fix: dark mode hides map legend (#760)

hasadna · May 22, 2024 · f413ae5 · f413ae5
1 parent bfc73b9
commit f413ae5
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/locale/he.json b/src/locale/he.json
@@ -81,7 +81,7 @@
   "and_smaller_donors": "ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.",
 
   "github_link": "למעבר אל GitHub",
-  "dark_mode_tooltip": "עבור למצב חשוך",
+  "dark_mode_tooltip": "עבור למצב כהה",
   "light_mode_tooltip": "עבור למצב בהיר",
   "Change Language": "English",
   "bug_title": "כותרת/סיכום",

diff --git a/src/pages/Map.scss b/src/pages/Map.scss
@@ -56,6 +56,10 @@ main > div,
       }
     }
   }
+
+  .map-index.dark {
+    background-color: #303230;
+  }
 }
 
 pre {

diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx
@@ -11,6 +11,8 @@ import { ExpandAltOutlined } from '@ant-design/icons'
 import { BusStop } from 'src/model/busStop'
 import { t } from 'i18next'
 import '../../Map.scss'
+import { useTheme } from 'src/layout/ThemeContext'
+import cn from 'classnames'
 
 const position: Point = {
   loc: [32.3057988, 34.85478613], // arbitrary default value... Netanya - best city to live & die in
@@ -30,6 +32,7 @@ interface MapProps {
 }
 
 export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) {
+  const { isDarkTheme } = useTheme()
   const agencyList = useAgencyList()
   const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), [])
@@ -62,7 +65,7 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro
           attribution='&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
         />
-        <div className="map-index">
+        <div className={cn('map-index', { dark: isDarkTheme })}>
           <MapIndex
             lineColor={actualRouteLineColor}
             imgSrc={actualRouteStopMarkerPath}

diff --git a/tests/dashboard.spec.ts b/tests/dashboard.spec.ts
@@ -18,11 +18,11 @@ test.describe('dashboard tests', () => {
   test('page is working', async () => {})
 
   test('dark mode use localstorage', async ({ page }) => {
-    await page.getByLabel('עבור למצב חשוך').click()
+    await page.getByLabel('עבור למצב כהה').click()
     await page.reload()
     await page.getByLabel('עבור למצב בהיר').click()
     await page.reload()
-    await page.getByLabel('עבור למצב חשוך').click()
+    await page.getByLabel('עבור למצב כהה').click()
     await page.getByLabel('עבור למצב בהיר').click()
   })
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,10 @@ main > div, @@
           }
         }
       }
+      .map-index.dark {
+        background-color: #303230;
+      }
     }
     pre {
@@ Expand Down @@