diff --git a/src/components/Map/Drawer/LayersDrawer/LayersDrawerImageItem.component.tsx b/src/components/Map/Drawer/LayersDrawer/LayersDrawerImageItem.component.tsx
index 11ccb9b15737ce8c8e1826e491701725c5d10994..d2884a5bb104b64d6d5f30105d5f3afc84a13bec 100644
--- a/src/components/Map/Drawer/LayersDrawer/LayersDrawerImageItem.component.tsx
+++ b/src/components/Map/Drawer/LayersDrawer/LayersDrawerImageItem.component.tsx
@@ -15,6 +15,7 @@ interface LayersDrawerImageItemProps {
bringToBack: () => void;
removeObject: () => void;
centerObject: () => void;
+ editObject: () => void;
isLayerVisible: boolean;
isLayerActive: boolean;
}
@@ -25,6 +26,7 @@ export const LayersDrawerImageItem = ({
bringToBack,
removeObject,
centerObject,
+ editObject,
isLayerVisible,
isLayerActive,
}: LayersDrawerImageItemProps): JSX.Element | null => {
@@ -74,6 +76,7 @@ export const LayersDrawerImageItem = ({
bringToBack={bringToBack}
removeObject={removeObject}
centerObject={centerObject}
+ editObject={editObject}
/>
)}
</div>
diff --git a/src/components/Map/Drawer/LayersDrawer/LayersDrawerLayerContextMenuItems.component.tsx b/src/components/Map/Drawer/LayersDrawer/LayersDrawerLayerContextMenuItems.component.tsx
index 0696efca46a92cb2d68db4f365697fbb12f0caf0..1017e9c84790ef5effeb04a6b09c0f886009543b 100644
--- a/src/components/Map/Drawer/LayersDrawer/LayersDrawerLayerContextMenuItems.component.tsx
+++ b/src/components/Map/Drawer/LayersDrawer/LayersDrawerLayerContextMenuItems.component.tsx
@@ -50,7 +50,7 @@ export const LayerDrawerLayerContextMenuItems = forwardRef<
onKeyDown={handleKeyPress}
role="menuitem"
>
- <Icon name="edit-image" />
+ <Icon name="edit" className="stroke-black" />
<span>Edit layer</span>
</li>
<hr />
diff --git a/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectActions.component.tsx b/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectActions.component.tsx
index 11f5e89496964cdb1c23d74e855f80155275df39..4cf6871e8f0b84a80ca0cae05e64e2fd526a7a77 100644
--- a/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectActions.component.tsx
+++ b/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectActions.component.tsx
@@ -6,6 +6,7 @@ interface LayersDrawerObjectActionsProps {
bringToBack: () => void;
removeObject: () => void;
centerObject: () => void;
+ editObject: () => void;
}
export const LayersDrawerObjectActions = ({
@@ -13,6 +14,7 @@ export const LayersDrawerObjectActions = ({
bringToBack,
removeObject,
centerObject,
+ editObject,
}: LayersDrawerObjectActionsProps): JSX.Element | null => {
return (
<div className="flex shrink-0 gap-2">
@@ -22,6 +24,12 @@ export const LayersDrawerObjectActions = ({
title="Center"
onClick={centerObject}
/>
+ <IconButton
+ icon="edit"
+ className="h-auto w-auto bg-transparent p-0"
+ title="Edit"
+ onClick={editObject}
+ />
<IconButton
icon="bring-front"
className="h-auto w-auto bg-transparent p-0"
diff --git a/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectsList.component.tsx b/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectsList.component.tsx
index 445574da375287606bb7a47766a5c0545816a4a3..fca7a858abf3d7658a6b63415d8eeea9bcf46636 100644
--- a/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectsList.component.tsx
+++ b/src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectsList.component.tsx
@@ -24,6 +24,7 @@ import { useSetBounds } from '@/utils/map/useSetBounds';
import { mapEditToolsLayerImageObjectSelector } from '@/redux/mapEditTools/mapEditTools.selectors';
import { usePointToProjection } from '@/utils/map/usePointToProjection';
import { Coordinate } from 'ol/coordinate';
+import { openLayerImageObjectEditFactoryModal } from '@/redux/modal/modal.slice';
interface LayersDrawerObjectsListProps {
layerId: number;
@@ -142,6 +143,10 @@ export const LayersDrawerObjectsList = ({
}
};
+ const editImage = (): void => {
+ dispatch(openLayerImageObjectEditFactoryModal());
+ };
+
if (!layer) {
return null;
}
@@ -165,6 +170,7 @@ export const LayersDrawerObjectsList = ({
bringToBack={() => bringImageToBack(layerImage)}
removeObject={() => removeImage(layerImage)}
centerObject={() => centerObject(layerImage)}
+ editObject={() => editImage()}
isLayerVisible={isLayerVisible}
isLayerActive={isLayerActive}
/>
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 67bae92f4b7e44fb785ff29ba9cbab7d0651b45e..f925f23294e9f055b0ba0751df55e15f09aa8318 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -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 />
diff --git a/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.component.tsx b/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32f1402deee14ec489c8a728da6ce94860a5594e
--- /dev/null
+++ b/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.component.tsx
@@ -0,0 +1,33 @@
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { mapBackgroundSelector } from '@/redux/map/map.selectors';
+import { MAP_BACKGROUND_TYPES } from '@/redux/map/map.constants';
+import { setMapBackground } from '@/redux/map/map.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import './MapBackgroundSwitch.styles.css';
+import { JSX } from 'react';
+
+export const MapBackgroundSwitchComponent = (): JSX.Element => {
+ const dispatch = useAppDispatch();
+ const backgroundId = useAppSelector(mapBackgroundSelector);
+
+ const handleChange = (selectedBackgroundId: string | number): void => {
+ dispatch(setMapBackground(+selectedBackgroundId));
+ };
+
+ return (
+ <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>
+ );
+};
diff --git a/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.styles.css b/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b00df5f682c7a46d160a374308694ce9a6b44f7
--- /dev/null
+++ b/src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.styles.css
@@ -0,0 +1,39 @@
+.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;
+}
diff --git a/src/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component.tsx b/src/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component.tsx
deleted file mode 100644
index caea44b9746713de1cae2fcfb97b1e6d6802e89e..0000000000000000000000000000000000000000
--- a/src/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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';
-
-export const MapVectorBackgroundSelector = (): JSX.Element => {
- const dispatch = useAppDispatch();
- const backgroundId = useAppSelector(mapBackgroundSelector);
-
- const handleChange = (selectedBackgroundId: string | number): void => {
- dispatch(setMapBackground(+selectedBackgroundId));
- };
-
- 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>
- );
-};
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 2c51e771c48419399d4e7eacb08b96af246953ff..5745b6ec67ac5612ab8866556fd11aa65b51bc5b 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -21,7 +21,7 @@ import { DownloadIcon } from '@/shared/Icon/Icons/DownloadIcon';
import { ImageIcon } from '@/shared/Icon/Icons/ImageIcon';
import { ResizeImageIcon } from '@/shared/Icon/Icons/ResizeImageIcon';
import { PencilIcon } from '@/shared/Icon/Icons/PencilIcon';
-import { EditImageIcon } from '@/shared/Icon/Icons/EditImageIcon';
+import { EditIcon } from '@/shared/Icon/Icons/EditIcon';
import { TrashIcon } from '@/shared/Icon/Icons/TrashIcon';
import { ArrowDoubleUpIcon } from '@/shared/Icon/Icons/ArrowDoubleUpIcon';
import { ArrowDoubleDownIcon } from '@/shared/Icon/Icons/ArrowDoubleDownIcon';
@@ -76,7 +76,7 @@ const icons: Record<IconTypes, IconComponentType> = {
'manage-user': ManageUserIcon,
image: ImageIcon,
'resize-image': ResizeImageIcon,
- 'edit-image': EditImageIcon,
+ edit: EditIcon,
trash: TrashIcon,
pencil: PencilIcon,
'arrow-double-up': ArrowDoubleUpIcon,
diff --git a/src/shared/Icon/Icons/EditImageIcon.tsx b/src/shared/Icon/Icons/EditIcon.tsx
similarity index 82%
rename from src/shared/Icon/Icons/EditImageIcon.tsx
rename to src/shared/Icon/Icons/EditIcon.tsx
index 1cb37615a15c0feb267a72e8008a6699cc55bffc..21f3ecadde25387a5e9ddac927a19cf3ec4baec2 100644
--- a/src/shared/Icon/Icons/EditImageIcon.tsx
+++ b/src/shared/Icon/Icons/EditIcon.tsx
@@ -1,8 +1,8 @@
-interface EditImageIconProps {
+interface EditIconProps {
className?: string;
}
-export const EditImageIcon = ({ className }: EditImageIconProps): JSX.Element => (
+export const EditIcon = ({ className }: EditIconProps): JSX.Element => (
<svg
width="20"
height="20"
@@ -13,17 +13,17 @@ export const EditImageIcon = ({ className }: EditImageIconProps): JSX.Element =>
>
<path
d="M21.2 6.4L12 15.6C11.2 16.4 8.8 16.8 8.3 16.3C7.8 15.8 8.2 13.4 9 12.6L18.4 3.2C18.6 3 18.8 2.8 19.1 2.7C19.4 2.5 19.7 2.4 20.1 2.4C20.4 2.4 20.7 2.5 21 2.7C21.3 2.9 21.5 3.1 21.7 3.4C21.9 3.7 22 4 22 4.4C22 4.7 21.9 5 21.7 5.3C21.5 5.6 21.3 5.8 21.2 6L21.2 6.4Z"
- stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
strokeLinejoin="miter"
+ fill="none"
/>
<path
d="M11 4H6C5 4 4.2 4.4 3.6 5C3 5.6 2.6 6.4 2.6 8V18C2.6 19 3 19.8 3.6 20.4C4.2 21 5 21.4 6 21.4H17C18.8 21.4 19.6 20.4 19.6 18V13"
- stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
strokeLinejoin="miter"
+ fill="none"
/>
</svg>
);
diff --git a/src/shared/IconButton/IconButton.component.tsx b/src/shared/IconButton/IconButton.component.tsx
index 569d745b012b62a24094848b3addd30c99cba68b..1330e460889a6c21a9a8b6e2cf26155a569286bb 100644
--- a/src/shared/IconButton/IconButton.component.tsx
+++ b/src/shared/IconButton/IconButton.component.tsx
@@ -37,6 +37,7 @@ export const IconButton = ({
'padlock-open',
'padlock-locked',
'layers',
+ 'edit',
].includes(icon);
return (
diff --git a/src/types/iconTypes.ts b/src/types/iconTypes.ts
index b87711646ef5794efb756ef91f93a3266785ecde..0d74dd786dade26d36a99f5b83bd44d2cd448ba5 100644
--- a/src/types/iconTypes.ts
+++ b/src/types/iconTypes.ts
@@ -27,7 +27,7 @@ export type IconTypes =
| 'question'
| 'image'
| 'resize-image'
- | 'edit-image'
+ | 'edit'
| 'trash'
| 'pencil'
| 'arrow-double-up'
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e2c026d909241ac536fae67aa80e253c274c5280..18a4c332edbf96d0818454ec74ec3a3877c40478 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -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',