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 />

src/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component.tsx → src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.component.tsx

 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>
   );
 };

src/components/Map/MapBackgroundSwitch/MapBackgroundSwitch.styles.css

+.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;
+}

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',