diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
index 0bc4e1d80759f06d92e40b57f2cd8bded63ac632..06d7c9f013f641a8f8d937ba25983f8d4efa612b 100644
--- a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -31,12 +31,12 @@ export const MapNavigation = (): JSX.Element => {
};
return (
- <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl shadow-map-navigation-bar">
+ <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl text-xs shadow-primary">
{openedMaps.map(map => (
<Button
key={map.modelId}
className={twMerge(
- 'h-10 whitespace-nowrap ',
+ 'h-10 whitespace-nowrap',
isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal',
)}
variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'}
diff --git a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx
index 7b2d9db9abce44346300b20b8a57d00d4de2901e..8aaf2bd11f3433c42bd3e9bdef76aa3101c4008d 100644
--- a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx
+++ b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx
@@ -1,9 +1,8 @@
/* eslint-disable no-magic-numbers */
import { StoreType } from '@/redux/store';
-import { useRouter } from 'next/router';
import { render, screen } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
-import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { initialMapDataFixture, initialMapStateFixture } from '@/redux/map/map.fixtures';
import {
InitialStoreState,
getReduxWrapperWithStore,
@@ -29,14 +28,6 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-jest.mock('next/router', () => ({
- useRouter: jest.fn(),
-}));
-
-(useRouter as jest.Mock).mockReturnValue({
- query: {},
-});
-
describe('BackgroundSelector - component', () => {
it('should initialy display default value', () => {
renderComponent();
@@ -88,11 +79,8 @@ describe('BackgroundSelector - component', () => {
describe('query params', () => {
it('should display default value when main background id is in query params', async () => {
- (useRouter as jest.Mock).mockReturnValue({
- query: { backgroundId: '13' },
- });
await renderComponent({
- map: initialMapStateFixture,
+ map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 13 } },
backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
});
@@ -100,11 +88,8 @@ describe('BackgroundSelector - component', () => {
expect(buttonName.textContent).toBe('Background');
});
it('should display correct background when background id is in query params', async () => {
- (useRouter as jest.Mock).mockReturnValue({
- query: { backgroundId: '15' },
- });
await renderComponent({
- map: initialMapStateFixture,
+ map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 15 } },
backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
});
diff --git a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx
index fd6b76a2197cac3b1a1ce43b60c893daa2fa94bd..ca0dd73392f972a5285211dba89fb71d1a87a102 100644
--- a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx
+++ b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
import { useSelect } from 'downshift';
import {
backgroundsDataSelector,
+ currentBackgroundSelector,
mainBackgroundIdSelector,
} from '@/redux/backgrounds/background.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
@@ -10,69 +10,56 @@ import { Icon } from '@/shared/Icon';
import { MapBackground } from '@/types/models';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { setMapBackground } from '@/redux/map/map.slice';
-import { useRouter } from 'next/router';
-import { parseQueryToTypes } from '@/utils/parseQueryToTypes';
const DEFAULT_TOGGLE_BUTTON_TEXT = 'Background';
export const BackgroundSelector = (): JSX.Element => {
- const [selectedItem, setSelectedItem] = useState<MapBackground | undefined>(undefined);
+ const selectedBackground = useAppSelector(currentBackgroundSelector);
const dispatch = useAppDispatch();
- const { query } = useRouter();
const backgrounds = useAppSelector(backgroundsDataSelector);
const mainBackgroundId = useAppSelector(mainBackgroundIdSelector);
- useEffect(() => {
- const onApplicationLoadSetInitialSelectedItem = (): void => {
- const backgroundId = parseQueryToTypes(query)?.backgroundId;
- const initialBackground = backgrounds?.find(({ id }) => id === backgroundId);
- setSelectedItem(initialBackground);
- };
-
- if (!selectedItem) {
- onApplicationLoadSetInitialSelectedItem();
- }
- }, [selectedItem, query, backgrounds]);
-
const onItemSelect = (background: MapBackground | undefined | null): void => {
if (background) {
dispatch(setMapBackground(background.id));
- setSelectedItem(background);
}
};
const { isOpen, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
items: backgrounds || [],
- selectedItem,
+ selectedItem: selectedBackground,
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => onItemSelect(newSelectedItem),
});
const getToggleButtonName = (): string => {
- const isSelectedBackgroundMainBackground = selectedItem?.id === mainBackgroundId;
- if (!selectedItem || isSelectedBackgroundMainBackground) {
+ const isSelectedBackgroundMainBackground = selectedBackground?.id === mainBackgroundId;
+ if (!selectedBackground || isSelectedBackgroundMainBackground) {
return DEFAULT_TOGGLE_BUTTON_TEXT;
}
- return selectedItem.name;
+ return selectedBackground.name;
};
return (
- <div data-testid="background-selector">
- <div className="flex w-72 flex-col gap-1">
+ <div
+ data-testid="background-selector"
+ className={twMerge('rounded-t bg-white text-xs shadow-primary', !isOpen && 'rounded-b')}
+ >
+ <div className={twMerge('flex w-72 flex-col rounded-t py-2 pl-4 pr-3')}>
<div
- className="flex cursor-pointer justify-between bg-white p-2"
+ className="flex cursor-pointer flex-row items-center justify-between bg-white"
{...getToggleButtonProps()}
>
- <span data-testid="background-dropdown-button-name">{getToggleButtonName()}</span>
- <span className="px-2">
- <Icon
- name="chevron-down"
- className={twMerge('arrow-button h-6 w-6 fill-font-500', isOpen && 'rotate-180')}
- />
+ <span data-testid="background-dropdown-button-name" className="font-medium">
+ {getToggleButtonName()}
</span>
+ <Icon
+ name="chevron-down"
+ className={twMerge('arrow-button h-6 w-6 fill-primary-500', isOpen && 'rotate-180')}
+ />
</div>
</div>
<ul
- className={`absolute z-10 mt-1 max-h-80 w-72 overflow-scroll bg-white p-0 shadow-md ${
+ className={`absolute z-10 max-h-80 w-72 overflow-scroll rounded-b bg-white p-0 ${
!isOpen && 'hidden'
}`}
{...getMenuProps()}
@@ -82,9 +69,10 @@ export const BackgroundSelector = (): JSX.Element => {
backgrounds.map((item, index) => (
<li
className={twMerge(
- highlightedIndex === index && 'bg-blue-300',
- selectedItem === item && 'font-bold',
- 'flex flex-col px-3 py-2 shadow-sm',
+ 'border-t',
+ highlightedIndex === index && 'text-primary-500',
+ selectedBackground === item && 'font-bold',
+ 'flex flex-col px-4 py-2 shadow-sm',
)}
key={item.id}
{...getItemProps({ item, index })}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f63ef9478c9e0f39486bd3b7dacd9ef45f17e89c..62c3f4f71cfba9d10d68444821d10e04a1366db3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,7 +33,7 @@ const config: Config = {
'calc-drawer': 'calc(100% - 104px)',
},
boxShadow: {
- 'map-navigation-bar': '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
+ primary: '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
},
},
fontFamily: {