style: change velocity page time buttons style

src/hooks/useSingleLineData.ts

@@ -21,7 +21,6 @@ export const useSingleLineData = (
   const [filteredPositions, setFilteredPositions] = useState<Point[]>([])
   const [plannedRouteStops, setPlannedRouteStops] = useState<BusStop[]>([])
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
-  // const [startTime, setStartTime] = useState<string>()
   const { startTime } = search
   const [error, setError] = useState<string>()
 
@@ -46,7 +45,6 @@ export const useSingleLineData = (
       setRouteKey(undefined)
       setStartTime(undefined)
       setError(undefined)
-      // setSearch((prev) => ({ ...prev, routes: undefined, routeKey: undefined }))
       setSearch((prev) => ({
         ...prev,
         routes: undefined,
@@ -64,7 +62,6 @@ export const useSingleLineData = (
         setRoutes(routes)
         setSearch((prev) => ({ ...prev, routes }))
         setError(undefined)
-        // setStartTime(undefined)
       })
       .catch((err) => {
         if (err?.cause?.name !== 'AbortError') {

src/pages/components/DateSelector.tsx

@@ -45,6 +45,7 @@ export function DateSelector({
       minDate={minDate || startOfTime}
       disabled={disabled}
       onError={(err) => setError(err)}
+      sx={{ width: { xs: '100%', sm: '70%' } }}
       slotProps={{
         calendarHeader: {
           sx: {
@@ -56,6 +57,7 @@ export function DateSelector({
         textField: {
           fullWidth: true,
           helperText: errorMessageKey && t(errorMessageKey),
+          sx: { bgcolor: '#ffffff', borderRadius: 1 },
         },
       }}
     />

src/pages/components/dateNavigator/DateNavigator.scss

@@ -0,0 +1,36 @@
+.nav-btn {
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: 0.75rem !important;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+  height: 44px;
+  text-transform: none;
+  border-color: rgb(0 0 0 / 12%);
+
+  @media (width >= 600px) {
+    padding-left: 16px;
+    padding-right: 16px;
+    font-size: 0.9rem !important;
+  }
+
+  @media (width >= 900px) {
+    font-size: 1rem !important;
+  }
+
+  &.today {
+    background-color: #1976d2 !important;
+    color: #fff !important;
+    border-color: #1976d2 !important;
+
+    &:hover {
+      background-color: #1565c0 !important;
+      border-color: #1565c0 !important;
+    }
+
+    .MuiButton-startIcon {
+      color: #fff;
+    }
+  }
+}

src/pages/components/dateNavigator/DateNavigator.tsx

@@ -0,0 +1,51 @@
+import { Today } from '@mui/icons-material'
+import { Box, Button, ButtonGroup } from '@mui/material'
+import dayjs from 'src/dayjs'
+import './DateNavigator.scss'
+
+interface DateNavigatorProps {
+  currentTime: dayjs.Dayjs
+  onChange: (time: dayjs.Dayjs) => void
+}
+
+export const DateNavigator = ({ currentTime, onChange }: DateNavigatorProps) => {
+  const handleChange = (amount: number, unit: 'day' | 'week') => {
+    const newTime =
+      amount > 0 ? currentTime.add(amount, unit) : currentTime.subtract(Math.abs(amount), unit)
+    onChange(newTime)
+  }
+
+  const handleToday = () => onChange(dayjs())
+
+  return (
+    <Box sx={{ width: { xs: '100%', sm: '100%' }, my: 1 }}>
+      <ButtonGroup
+        variant="outlined"
+        fullWidth
+        sx={{
+          bgcolor: 'background.paper',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+          borderRadius: 2,
+        }}>
+        <Button onClick={() => handleChange(-1, 'week')} className="nav-btn">
+          שבוע קודם
+        </Button>
+        <Button onClick={() => handleChange(-1, 'day')} className="nav-btn">
+          יום קודם
+        </Button>
+        <Button
+          onClick={handleToday}
+          className="nav-btn today"
+          startIcon={<Today fontSize="small" />}>
+          היום
+        </Button>
+        <Button onClick={() => handleChange(1, 'day')} className="nav-btn">
+          יום הבא
+        </Button>
+        <Button onClick={() => handleChange(1, 'week')} className="nav-btn">
+          שבוע הבא
+        </Button>
+      </ButtonGroup>
+    </Box>
+  )
+}

src/pages/velocityHeatmap/index.tsx

@@ -1,9 +1,9 @@
-import { Grid } from '@mui/material'
+import { Stack } from '@mui/material'
 import React, { useContext, useState } from 'react'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import dayjs from 'src/dayjs'
 import { SearchContext } from '../../model/pageState'
-import { DateNavigator } from '../components/DateNavigator'
+import { DateNavigator } from '../components/dateNavigator/DateNavigator'
 import { DateSelector } from '../components/DateSelector'
 import { VelocityHeatmapLegend } from './components/VelocityHeatmapLegend'
 import { VelocityHeatmapRectangles } from './components/VelocityHeatmapRectangles'
@@ -34,10 +34,10 @@ const VelocityHeatmapPage: React.FC = () => {
       <p>This page will display a heatmap of velocity aggregation data.</p>
 
       {/* choose date*/}
-      <Grid>
+      <Stack direction="column" spacing={2} sx={{ mb: 2, width: { xs: '100%', md: '70%' } }}>
         <DateSelector time={dayjs(search.timestamp)} onChange={handleTimestampChange} />
-      </Grid>
-      <DateNavigator currentTime={dayjs(search.timestamp)} onChange={handleTimestampChange} />
+        <DateNavigator currentTime={dayjs(search.timestamp)} onChange={handleTimestampChange} />
+      </Stack>
       <div style={{ margin: '12px 0' }}>
         <b>Visualization:</b>{' '}
         {VIS_MODES.map((mode) => (