Skip to content
Snippets Groups Projects
Commit 028cb8a7 authored by Miłosz Grocholewski's avatar Miłosz Grocholewski
Browse files

chore: merge conflict resolve

parents f6e504ec 4547586a
No related branches found
No related tags found
1 merge request!398feat(layer-text): Add editing text notes, font size, color alignment etc.
Pipeline #101707 passed
......@@ -249,7 +249,7 @@ export const LayersDrawerObjectsList = ({
onConfirm={confirmRemove}
question={
removeModalState
? removeObjectConfig[removeModalState].question
? removeObjectConfig[removeModalState]?.question
: 'Are you sure you want to remove the object'
}
/>
......
......@@ -3,8 +3,8 @@ import { Drawer } from '@/components/Map/Drawer';
import { Legend } from '@/components/Map/Legend';
import { MapViewer } from '@/components/Map/MapViewer';
import { MapLoader } from '@/components/Map/MapLoader/MapLoader.component';
import { MapVectorBackgroundSelector } from '@/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component';
import { MapAdditionalLogos } from '@/components/Map/MapAdditionalLogos';
import { MapBackgroundSwitchComponent } from '@/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.component';
import { MapAdditionalActions } from './MapAdditionalActions';
import { PluginsDrawer } from './PluginsDrawer';
......@@ -15,7 +15,7 @@ export const Map = (): JSX.Element => {
data-testid="map-container"
>
<MapViewer />
<MapVectorBackgroundSelector />
<MapBackgroundSwitchComponent />
<Drawer />
<PluginsDrawer />
<Legend />
......
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { mapBackgroundSelector } from '@/redux/map/map.selectors';
import { twMerge } from 'tailwind-merge';
import { MAP_BACKGROUND_TYPES } from '@/redux/map/map.constants';
import { setMapBackground } from '@/redux/map/map.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { Select } from '@/shared/Select';
import './MapBackgroundSwitch.styles.css';
import { JSX } from 'react';
export const MapVectorBackgroundSelector = (): JSX.Element => {
export const MapBackgroundSwitchComponent = (): JSX.Element => {
const dispatch = useAppDispatch();
const backgroundId = useAppSelector(mapBackgroundSelector);
......@@ -15,13 +15,19 @@ export const MapVectorBackgroundSelector = (): JSX.Element => {
};
return (
<div className={twMerge('absolute right-6 top-[calc(64px+40px+24px)] z-10 flex')}>
<Select
options={MAP_BACKGROUND_TYPES}
selectedId={backgroundId}
onChange={handleChange}
width={140}
/>
<div role="group" className="c-map-background-switch">
{MAP_BACKGROUND_TYPES.map(background => (
<button
className={`${
background.id === backgroundId && 'c-map-background-switch__button--active'
} c-map-background-switch__button`}
type="button"
key={background.id}
onClick={() => handleChange(background.id)}
>
{background.name}
</button>
))}
</div>
);
};
.c-map-background-switch {
position: absolute;
right: 1.5rem;
top: 128px;
z-index: 10;
display: flex;
}
.c-map-background-switch__button {
width: 80px;
background-color: #ffffff;
padding: 0.5rem;
color: #070130;
outline: 1px solid currentColor;
}
.c-map-background-switch__button:first-child {
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
.c-map-background-switch__button:last-child {
border-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
}
.c-map-background-switch__button:hover {
background-color: #eeeeee;
}
.c-map-background-switch__button--active {
background-color: #ebf4ff;
color: #106ad7;
}
.c-map-background-switch__button--active:hover {
background-color: #d4e5fa;
color: #0055bb;
}
......@@ -7,6 +7,7 @@ const config: Config = {
colors: {
primary: {
100: '#ebf4ff',
200: '#d4e5fa',
500: '#106ad7',
600: '#0055bb',
700: '#004393',
......@@ -15,6 +16,7 @@ const config: Config = {
500: '#eeeeee',
600: '#cacaca',
700: '#a5a5a5',
800: '#858585',
},
font: {
400: '#6a6977',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment