style: a couple styling changes

src/layout/header/Header.tsx

@@ -6,7 +6,6 @@ import { MenuOutlined } from '@ant-design/icons'
 import './Header.css'
 import cn from 'classnames'
 import ToggleThemeButton from './ToggleThemeButton'
-import { DonationButton } from './DonationButton'
 import HeaderLinks from './HeaderLinks/HeaderLinks'
 import { LanguageToggle } from './LanguageToggle'
 
@@ -22,7 +21,6 @@ const MainHeader = () => {
       <HeaderLinks>
         <LanguageToggle />
         <ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
-        <DonationButton />
       </HeaderLinks>
     </Header>
   )

src/locale/en.json

@@ -4,7 +4,8 @@
     "databus_definition": "The open platform for real data on the quality of public transportation lines in Israel",
     "website_goal": "The purpose of the site is to improve the quality of public transportation in Israel by providing reliable information to journalists, citizens, transportation companies, and government officials in Israel.",
     "show_button": "Show",
-    "copyright": "© The Public Knowledge Workshop"
+    "copyright": "© The Public Knowledge Workshop",
+    "open_menu": "Start Exploring"
   },
   "homepage_title": "Home",
   "dashboard_page_title": "Public transport operators according to planned trips",

src/locale/he.json

@@ -4,7 +4,8 @@
     "databus_definition": "הפלטפורמה הפתוחה לנתוני אמת על איכות קווי התחבורה הציבורית בישראל",
     "website_goal": "מטרת האתר היא לשפר את איכות התחבורה הציבורית בארץ ע\"י מתן מידע אמין לעיתונאים, אזרחים, חברות התחבורה, וגורמי ממשל בישראל.",
     "show_button": "הצג",
-    "copyright": "© הסדנא לידע ציבורי (ע\"ר)"
+    "copyright": "© הסדנא לידע ציבורי (ע\"ר)",
+    "open_menu": "תתחיל לחקור"
   },
   "homepage_title": "ראשי",
   "dashboard_page_title": "קיום נסיעות",

src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss

@@ -1,8 +1,13 @@
 .HbarChart {
     .entry {
         position: relative;
+        margin-bottom: 2%;
+        padding: 3px;
+        border-radius: 8px;
 
-        .entryName {
+        .entryData {
+            display: flex;
+            justify-content: space-between;
             margin-left: 10px;
             font-size: 16px;
             font-weight: 500;
@@ -15,9 +20,13 @@
             align-items: center;
 
             .barDisplay {
-                height: 7px;
-                border-radius: 10px;
+                height: 5px;
+                display: inline-block;
+                border-radius: 4px;
                 margin-left: 10px;
+                text-align: center;
+                font-weight: bold;
+                color: white;
             }
 
             .entryBarTotal {
@@ -27,4 +36,12 @@
             }
          }
     }
+}
+
+.HbarChart:hover {
+    cursor: default;
+}
+
+.entry:hover{
+    background-color: gray
 }

src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx

@@ -17,7 +17,6 @@ export function HbarChart({
   const percents = entries
     .map((o) => (o.actual / o.total) * 100)
     .map((p) => (complement ? Math.max(100 - p, 0) : p))
-
   const rows = entries.map((entry, idx) => ({
     percent: percents[idx],
     ...entry,
@@ -45,23 +44,21 @@ export function HbarChart({
       {rows.map((entry) => {
         return (
           !!entry.percent && (
-            <div className="entry" key={entry.name}>
-              <div className="entryName" style={{ borderBottomColor: entry.color }}>
-                {entry.name.split('|').slice(0, 2).join(' | ')}
-              </div>
-
-              <div className="entryBar">
-                {wrapWithTooltip(
-                  <div
-                    className="barDisplay"
-                    style={{ width: `${entry.percent}%`, backgroundColor: entry.color }}></div>,
-                  entry,
-                )}
-                {wrapWithTooltip(
-                  <div className="entryBarTotal">{entry.percent.toFixed(2)}%</div>,
-                  entry,
-                )}
-              </div>
+            <div>
+              {wrapWithTooltip(
+                <div className="entry" key={entry.name} style={{ width: `${entry.percent}%` }}>
+                  <div className="entryData">
+                    <span>{entry.name.split('|').slice(0, 2).join(' | ')}</span>
+                    <span>{entry.percent.toFixed(2)}%</span>
+                  </div>
+                  <div className="entryBar">
+                    <div
+                      className="barDisplay"
+                      style={{ width: `100%`, backgroundColor: entry.color }}></div>
+                  </div>
+                </div>,
+                entry,
+              )}
             </div>
           )
         )

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -35,6 +35,7 @@ const { Title } = Typography
 import { useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
 import InfoYoutubeModal from '../components/YoutubeModal'
+
 // Define prop types for the component
 interface BusLineStatisticsProps {
   lineRef: number
@@ -61,7 +62,10 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
 }
 
 function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatisticsProps) {
-  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>('hour')
+  const sorting_mode = sessionStorage.getItem('sorting_mode') as 'hour' | 'severity'
+  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>(
+    sorting_mode ? sorting_mode : 'hour',
+  )
   const hourlyData = useGapsList(fromDate, toDate, operatorRef, lineRef, sortingMode)
   const isLoading = !hourlyData.length
   const { t } = useTranslation()
@@ -70,6 +74,11 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
     ...hourlyData.map((entry) => entry.actual_rides),
   )
 
+  function changeSorting(e: RadioChangeEvent) {
+    setSortingMode(e.target.value as 'hour' | 'severity')
+    sessionStorage.setItem('sorting_mode', e.target.value as 'hour' | 'severity')
+  }
+
   return (
     lineRef > 0 && (
       <Widget>
@@ -79,12 +88,10 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
           <>
             <Radio.Group
               style={{ marginBottom: '10px' }}
-              onChange={(e: RadioChangeEvent) =>
-                setSortingMode(e.target.value as 'hour' | 'severity')
-              }
+              onChange={changeSorting}
               value={sortingMode}>
               <Radio.Button value="hour">{t('order_by_hour')}</Radio.Button>
-              <Radio.Button value="severity">{t('order_by_severity')} </Radio.Button>
+              <Radio.Button value="severity">{t('order_by_severity')}</Radio.Button>
             </Radio.Group>
             <ResponsiveContainer width="100%" height={hourlyData.length * 50}>
               <ComposedChart
@@ -236,13 +243,13 @@ const GapsPatternsPage = () => {
           />
         </Grid>
         <Grid xs={12}>
-          {routesIsLoading && (
+          {routesIsLoading ? (
             <Row>
               <Label text={t('loading_routes')} />
               <Spin />
             </Row>
-          )}
-          {!routesIsLoading &&
+          ) : (
+            !routesIsLoading &&
             routes &&
             (routes.length === 0 ? (
               <NotFound>{t('line_not_found')}</NotFound>
@@ -254,7 +261,8 @@ const GapsPatternsPage = () => {
                   setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
                 />
               </>
-            ))}
+            ))
+          )}
         </Grid>
       </Grid>
       <Grid xs={12}>

src/pages/homepage/HomePage.scss

@@ -33,14 +33,23 @@
   }
 }
 
+.menu-link{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: medium;
+  font-weight: 600;
+  justify-content: space-between;
+
+  span {
+    margin-bottom: 0.5rem;
+  }
+}
+
 .links {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
-
-  @media (width <= 600px) {
-    margin-bottom: 3rem;
-  }
 }
 
 .page-link {
@@ -67,3 +76,26 @@
     }
   }
 }
+
+@media screen and (width > 600px) {
+  .links{
+    display:grid;
+    margin-bottom: 3rem;
+  }
+
+  .menu-link{
+    display: none
+  }
+}
+
+
+@media screen and (width < 601px) {
+  .links{
+    display:none
+  }
+
+  .menu-link{
+    display: flex;
+    margin-bottom: 3rem;
+  }
+}

src/pages/homepage/HomePage.tsx

@@ -6,19 +6,30 @@ import {
   DirectionsBusOutlined,
   HistoryOutlined,
   MapOutlined,
+  MenuOutlined,
   ViewKanbanOutlined,
 } from '@mui/icons-material'
 import { SvgIconProps } from '@mui/material'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 
 export const HomePage = () => {
   const { t } = useTranslation()
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
 
   return (
     <div className="container">
       <img src={busImage} alt="Public Transportaion Bus Illustration" />
       <h1>{t('homepage.welcome')}</h1>
       <h2>{t('homepage.databus_definition')}</h2>
       <p>{t('homepage.website_goal')}</p>
+      <section className="menu-link">
+        <PageLink
+          icon={<MenuOutlined />}
+          label={t('homepage.open_menu')}
+          to={() => setDrawerOpen(true)}
+        />
+      </section>
       <section className="links">
         <PageLink icon={<HistoryOutlined />} label={t('timeline_page_title')} to="/timeline" />
         <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
@@ -41,15 +52,19 @@ const PageLink = ({
 }: {
   icon: React.ReactElement<SvgIconProps>
   label: string
-  to: To
+  to: To | (() => void)
 }) => {
   const { t } = useTranslation()
 
   return (
     <div className="page-link">
       {icon}
       <span>{label}</span>
-      <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      {typeof to == 'function' ? (
+        <a onClick={to}>{t('homepage.show_button')}</a>
+      ) : (
+        <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      )}
     </div>
   )
 }