refactor: replace widget by antd Card component

hasadna · Nov 1, 2023 · f31f60d · f31f60d
1 parent 22df36e
commit f31f60d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/src/pages/GapsPatternsPage.tsx b/src/pages/GapsPatternsPage.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
 import { Moment } from 'moment'
-import { Skeleton, Spin } from 'antd'
+import { Card, Skeleton, Spin } from 'antd'
 import moment from 'moment/moment'
 import { useDate } from './components/DateTimePicker'
 import { PageContainer } from './components/PageContainer'
@@ -205,36 +205,39 @@ const GapsPatternsPage = () => {
             setLineNumber={(number) => setSearch((current) => ({ ...current, lineNumber: number }))}
           />
         </Grid>
+      </Grid>
 
-        <Grid xs={12}>
-          {routesIsLoading && (
-            <Row>
-              <Label text={TEXTS.loading_routes} />
-              <Spin />
-            </Row>
-          )}
-          {!routesIsLoading &&
-            routes &&
-            (routes.length === 0 ? (
-              <NotFound>{TEXTS.line_not_found}</NotFound>
-            ) : (
-              <>
-                <RouteSelector
-                  routes={routes}
-                  routeKey={routeKey}
-                  setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
-                />
-                <Grid xs={12}>
-                  <GapsByHour
-                    lineRef={routes?.find((route) => route.key === routeKey)?.lineRef || 0}
-                    operatorRef={operatorId || ''}
-                    fromDate={startDate}
-                    toDate={endDate}
-                  />
-                </Grid>
-              </>
-            ))}
-        </Grid>
+      <Grid xs={12}>
+        {routesIsLoading && (
+          <Row>
+            <Label text={TEXTS.loading_routes} />
+            <Spin />
+          </Row>
+        )}
+        {!routesIsLoading &&
+          routes &&
+          (routes.length === 0 ? (
+            <NotFound>{TEXTS.line_not_found}</NotFound>
+          ) : (
+            <>
+              <RouteSelector
+                routes={routes}
+                routeKey={routeKey}
+                setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
+              />
+            </>
+          ))}
+      </Grid>
+
+      <Grid xs={12}>
+        <Card>
+          <GapsByHour
+            lineRef={routes?.find((route) => route.key === routeKey)?.lineRef || 0}
+            operatorRef={operatorId || ''}
+            fromDate={startDate}
+            toDate={endDate}
+          />
+        </Card>
       </Grid>
     </PageContainer>
   )

diff --git a/src/pages/dashboard/DashboardPage.scss b/src/pages/dashboard/DashboardPage.scss
@@ -8,12 +8,7 @@
 }
 
 .widget {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 20px;
-  box-sizing: border-box;
-  margin-bottom: 20px;
-  background-color: white;
+
 
   .chart {
     height: 400px;

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -10,7 +10,7 @@ import LinesHbarChart from './LineHbarChart/LinesHbarChart'
 import { FormControlLabel, Switch, Tooltip } from '@mui/material'
 import OperatorSelector from 'src/pages/components/OperatorSelector'
 import { useDate } from '../components/DateTimePicker'
-import { Skeleton } from 'antd'
+import { Card, Skeleton } from 'antd'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import { Label } from '../components/Label'
 import { DateSelector } from '../components/DateSelector'
@@ -120,7 +120,7 @@ const DashboardPage = () => {
       </Grid>
       <Grid container spacing={2} alignItems="flex-start">
         <Grid xs={12} lg={6}>
-          <div className="widget">
+          <Card className="widget" hoverable>
             <h2 className="title">
               {TEXTS.dashboard_page_title}
               <Tooltip
@@ -135,7 +135,7 @@ const DashboardPage = () => {
             ) : (
               <OperatorHbarChart operators={convertToChartCompatibleStruct(groupByOperatorData)} />
             )}
-          </div>
+          </Card>
         </Grid>
         <Grid xs={6} display={{ xs: 'block', lg: 'none' }}>
           <OperatorSelector
@@ -145,7 +145,7 @@ const DashboardPage = () => {
           />
         </Grid>
         <Grid xs={12} lg={6}>
-          <div className="widget">
+          <Card className="widget" hoverable>
             <h2 className="title">{TEXTS.worst_lines_page_title}</h2>
             {lineDataLoading ? (
               <Skeleton active />
@@ -155,17 +155,17 @@ const DashboardPage = () => {
                 operators_whitelist={['אלקטרה אפיקים', 'דן', 'מטרופולין', 'קווים', 'אגד']}
               />
             )}
-          </div>
+          </Card>
         </Grid>
         <Grid xs={12}>
-          <div className="widget">
+          <Card className="widget" hoverable>
             <h2 className="title">{TEXTS.dashboard_page_graph_title}</h2>
             {loadingGrap ? (
               <Skeleton active />
             ) : (
               <ArrivalByTimeChart data={convertToGraphCompatibleStruct(graphData)} />
             )}
-          </div>
+          </Card>
         </Grid>
       </Grid>
     </PageContainer>