use sloy-map

features/About/AboutProjectModal.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { SheetModal } from 'sloy-ui';
-import { useIsDesktop } from 'sloy-map/helpers/isDesktop';
+import { IconType, SheetModal } from 'sloy-ui';
+import { Icon } from 'sloy-ui';
 import { AboutProjectContent } from 'features/About/AboutProjectContent';
-import { Close } from 'sloy-map/components/Close';
+import { useIsDesktop } from 'helpers/isDesktop';
 import styles from './AboutProjectModal.module.css';
 
 export function AboutProjectModal({ close, isOpened }: { close: VoidFunction; isOpened: boolean }) {
@@ -33,7 +33,9 @@ export function AboutProjectModal({ close, isOpened }: { close: VoidFunction; is
     return (
         <>
             <div className={styles.aboutProjectModal} role="dialog" aria-modal="true">
-                <Close close={close} />
+                <div onClick={close}>
+                    <Icon type={IconType.Close} />
+                </div>
                 <AboutProjectContent />
             </div>
             <div className={styles.backdrop} onClick={close} aria-hidden />

features/App.tsx

@@ -2,19 +2,18 @@
 
 import React, { useCallback, useEffect } from 'react';
 import { Provider, useDispatch } from 'react-redux';
+import { SloyMap, setConfig, ILayer, OverrideLayersFn } from 'sloy-map';
 import { store } from 'state/redux';
 import { AboutProjectIcons } from 'features/About/AboutProjectIcons/AboutProjectIcons';
 import { Footer } from 'features/Footer/Footer';
-import { SloyMap } from 'sloy-map/SloyMap';
-import { setConfig } from 'sloy-map/state/slice';
-import { ILayer, OverrideLayersFn } from 'sloy-map/types';
 import { state } from 'state/config';
 import facades from 'public/ekb-facades.json';
 import { CENTER_COORDS, MAX_ZOOM, MIN_ZOOM } from 'constants/map';
 import { overrideCard } from './CustomCardContent/overrideCard';
 import { QuarterFilter } from './CustomFilterContent/QuarterFilter';
 import { FacadeFilter } from './CustomFilterContent/FacadeFilter';
 import { getHouseMeta } from './Buildings/houseBase';
+import 'sloy-map/style.css';
 
 function AppMap() {
     const dispatch = useDispatch();

features/CustomCardContent/Participants/Participant/Participant.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Tag } from 'sloy-ui';
+import { getYearNameByValue } from 'sloy-map';
 import { Info } from 'features/CustomCardContent/Info/Info';
-import { getYearNameByValue } from 'sloy-map/helpers/getYearNameByValue';
 import { DTPParticipant, HealthStatusType } from '../Participants.types';
 import styles from './Participant.module.css';
 

features/CustomCardContent/overrideCard.tsx

@@ -1,7 +1,7 @@
 import { Tag } from 'sloy-ui';
+import { OverrideCardFn } from 'sloy-map';
 import HealthProgress from 'features/CustomCardContent/HealthProgress/HealthProgress';
 import { DownloadButton } from 'features/CustomCardContent/DownloadButton/DownloadButton';
-import { OverrideCardFn } from 'sloy-map/types';
 import { FeedbackButton } from 'features/CustomCardContent/FeedbackButton/FeedbackButton';
 import facades from 'public/ekb-facades.json';
 import styles from 'features/CustomCardContent/CardContent.module.css';

helpers/isDesktop.tsx

@@ -0,0 +1,5 @@
+import { useMediaQuery } from '@uidotdev/usehooks';
+
+export const useIsDesktop = () => {
+    return useMediaQuery('only screen and (min-width : 1024px)');
+};

package.json

@@ -15,6 +15,7 @@
     },
     "dependencies": {
         "@reduxjs/toolkit": "^2.0.1",
+        "@uidotdev/usehooks": "^2.4.1",
         "classnames": "^2.4.0",
         "ekb": "1.2.0-rc.2",
         "geojson": "^0.5.0",
@@ -28,7 +29,8 @@
         "react-map-gl": "7.1.3",
         "react-redux": "^9.0.4",
         "redux": "^5.0.1",
-        "sloy-ui": "0.0.1-rc.1",
+        "sloy-map": "0.0.1-rc.1",
+        "sloy-ui": "0.0.1-rc.2",
         "styled-components": "^6.1.6",
         "swr": "^2.2.4",
         "typescript": "^5.3.3"