💄 add styled scroll bar and improve search page UI

aodn · Aug 27, 2024 · 30abcc7 · 30abcc7
1 parent 8dff9b6
commit 30abcc7
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 116 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,18 @@
 // React import is not required in React 17 or later
 import { RouterProvider } from "react-router-dom";
-
 import Fallback from "./pages/Fallback";
 import { ThemeProvider } from "@mui/material/styles";
 import AppTheme from "./utils/AppTheme";
 import AppRouter from "./utils/AppRouter";
 import { CssBaseline } from "@mui/material";
+import Scrollbar from "./components/common/ScrollBar";
 
 const app = () => {
   return (
     <div>
       <ThemeProvider theme={AppTheme}>
         <CssBaseline />
+        <Scrollbar />
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
       </ThemeProvider>
     </div>

diff --git a/src/components/common/ScrollBar.tsx b/src/components/common/ScrollBar.tsx
@@ -0,0 +1,35 @@
+import { GlobalStyles } from "@mui/material";
+import { color } from "../../styles/constants";
+
+// TODO: firefox browser does not support webkit, need to find a way to fix
+const Scrollbar = () => (
+  <GlobalStyles
+    styles={{
+      "*::-webkit-scrollbar": {
+        width: "8px",
+        borderRadius: "4px",
+      },
+      "*::-webkit-scrollbar-button": {
+        display: "none",
+      },
+      "*::-webkit-scrollbar-thumb": {
+        borderRadius: "4px",
+        backgroundColor: color.blue.dark,
+        minHeight: "24px",
+        border: "none",
+        cursor: "pointer",
+      },
+      "*::-webkit-scrollbar-corner": {
+        backgroundColor: color.blue.xLight,
+      },
+      "*::-webkit-scrollbar-track": {
+        backgroundColor: color.blue.xLight,
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+      },
+    }}
+  />
+);
+
+export default Scrollbar;
diff --git a/src/components/common/buttons/ActionButtonPaper.tsx b/src/components/common/buttons/ActionButtonPaper.tsx
@@ -1,5 +1,5 @@
 import { Paper } from "@mui/material";
-import { margin } from "../../../styles/constants";
+import { borderRadius, margin } from "../../../styles/constants";
 import React from "react";
 
 interface StyledActionButtonPaperProps {}
@@ -9,15 +9,13 @@ const ActionButtonPaper = ({
 }: React.PropsWithChildren<StyledActionButtonPaperProps>) => {
   return (
     <Paper
-      component="form"
-      variant="outlined"
+      elevation={0}
       sx={{
-        paddingLeft: "5px",
-        marginLeft: margin.md,
         display: "flex",
         alignItems: "center",
-        maxHeight: "40px",
-        width: { md: "100px" },
+        justifyContent: "center",
+        width: "100%",
+        borderRadius: borderRadius.medium,
       }}
     >
       {children}

diff --git a/src/components/common/filters/ResultPanelIconFilter.tsx b/src/components/common/filters/ResultPanelIconFilter.tsx
@@ -1,19 +1,16 @@
-import { Grid, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import TimeRangeIcon from "../../icon/TimeRangeIcon";
 import SpatialIcon from "../../icon/SpatialIcon";
 import DimensionsIcon from "../../icon/Dimensions";
+import { padding } from "../../../styles/constants";
 
 const ResultPanelIconFilter = () => {
   return (
-    <Grid container sx={{ pl: 2 }}>
-      <Grid item xs={12}>
-        <Stack direction="column" spacing={2}>
-          <TimeRangeIcon />
-          <SpatialIcon />
-          <DimensionsIcon />
-        </Stack>
-      </Grid>
-    </Grid>
+    <Stack direction="column" spacing={2} paddingTop={padding.large}>
+      <TimeRangeIcon />
+      <SpatialIcon />
+      <DimensionsIcon />
+    </Stack>
   );
 };
 

diff --git a/src/components/common/filters/ResultPanelSimpleFilter.tsx b/src/components/common/filters/ResultPanelSimpleFilter.tsx
@@ -1,11 +1,7 @@
 import {
-  FormControl,
   Grid,
-  IconButton,
   InputBase,
-  MenuItem,
   Paper,
-  Select,
   styled,
   SxProps,
   Theme,
@@ -16,12 +12,7 @@ import MapListToggleButton, {
 } from "../buttons/MapListToggleButton";
 import SortButton, { SortButtonProps } from "../buttons/SortButton";
 import { FC } from "react";
-
-const SlimSelect = styled(InputBase)(() => ({
-  "& .MuiInputBase-input": {
-    border: "none",
-  },
-}));
+import { borderRadius, fontSize } from "../../../styles/constants";
 
 interface ResultPanelSimpleFilterProps
   extends MapListToggleButtonProps,
@@ -39,27 +30,27 @@ const ResultPanelSimpleFilter: FC<ResultPanelSimpleFilterProps> = ({
   onChangeSorting,
 }) => {
   return (
-    <Grid sx={sx} padding={1} container justifyContent="center">
-      <Grid item xs={6} sx={{ pb: 1 }}>
+    <Grid sx={sx} container justifyContent="center" spacing={1}>
+      <Grid item md={6} xs={12}>
         <Paper
-          variant="outlined"
-          component="form"
+          elevation={0}
           sx={{
-            p: "2px 4px",
             display: "flex",
+            justifyContent: "center",
             alignItems: "center",
-            width: { md: "250px" },
+            height: "100%",
+            borderRadius: borderRadius.medium,
           }}
         >
-          <Typography>
+          <Typography fontSize={fontSize.info} padding={0}>
             Showing 1-{count} of {total} results
           </Typography>
         </Paper>
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <SortButton onChangeSorting={onChangeSorting} />
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <MapListToggleButton onChangeLayout={onChangeLayout} />
       </Grid>
     </Grid>

diff --git a/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx b/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx
@@ -70,11 +70,12 @@ const TimePeriodCard: FC = () => {
       <RoundCard
         sxProps={{ border: `${border.xs} ${theme.palette.success.main}` }}
       >
-        <DataUsageIcon
-          sx={{ fontSize: "16px", paddingRight: padding.medium }}
-          color="success"
-        />
-        <Typography padding={0} color={theme.palette.success.main}>
+        <DataUsageIcon sx={{ fontSize: "16px" }} color="success" />
+        <Typography
+          padding={0}
+          paddingLeft={padding.small}
+          color={theme.palette.success.main}
+        >
           On Going
         </Typography>
       </RoundCard>
@@ -90,11 +91,12 @@ const TimePeriodCard: FC = () => {
           backgroundColor: color.blue.extraLightSemiTransparent,
         }}
       >
-        <DoneAllIcon
-          sx={{ fontSize: "18px", paddingRight: padding.medium }}
-          color="primary"
-        />
-        <Typography padding={0} color={color.blue.dark}>
+        <DoneAllIcon sx={{ fontSize: "18px" }} color="primary" />
+        <Typography
+          padding={0}
+          paddingLeft={padding.small}
+          color={color.blue.dark}
+        >
           Completed
         </Typography>
       </RoundCard>
@@ -111,11 +113,13 @@ const TimePeriodCard: FC = () => {
             backgroundColor: color.blue.extraLightSemiTransparent,
           }}
         >
-          <Typography padding={0}>{startDate}</Typography>
+          <Typography padding={0} paddingRight={padding.small}>
+            {startDate}
+          </Typography>
           <KeyboardDoubleArrowRightIcon
             sx={{
               fontSize: "18px",
-              paddingLeft: padding.small,
+
               color: color.gray.light,
             }}
           />
@@ -132,11 +136,12 @@ const TimePeriodCard: FC = () => {
             <KeyboardDoubleArrowRightIcon
               sx={{
                 fontSize: "18px",
-                paddingRight: padding.small,
                 color: color.gray.light,
               }}
             />
-            <Typography padding={0}>{endDate}</Typography>
+            <Typography padding={0} paddingLeft={padding.small}>
+              {endDate}
+            </Typography>
           </RoundCard>
         )}
       </Stack>

diff --git a/src/pages/search-page/SearchPage.tsx b/src/pages/search-page/SearchPage.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../components/common/store/searchReducer";
 import Layout from "../../components/layout/layout";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import {
   formatToUrlParam,
   ParameterState,
@@ -40,7 +40,7 @@ import { LngLatBoundsLike, MapboxEvent as MapEvent } from "mapbox-gl";
 import ResultSection from "./subpages/ResultSection";
 import ResultPanelIconFilter from "../../components/common/filters/ResultPanelIconFilter";
 import MapSection from "./subpages/MapSection";
-import { color, margin } from "../../styles/constants";
+import { color } from "../../styles/constants";
 import ComplexTextSearch from "../../components/search/ComplexTextSearch";
 import { SearchResultLayoutEnum } from "../../components/common/buttons/MapListToggleButton";
 import { bboxPolygon } from "@turf/turf";
@@ -50,6 +50,8 @@ import {
 } from "../../components/common/store/OGCCollectionDefinitions";
 import { SortResultEnum } from "../../components/common/buttons/SortButton";
 
+const SEARCH_BAR_HEIGHT = 56;
+
 const SearchPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -250,80 +252,70 @@ const SearchPage = () => {
 
   return (
     <Layout>
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          // backgroundImage: "url(/bg_search_results.png)",
-          // backgroundSize: "cover",
-          bgcolor: color.blue.light,
-          marginTop: margin.sm,
-        }}
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="center"
+        bgcolor={color.blue.light}
+        gap={2}
+        padding={2}
       >
-        <Grid item xs={12}>
-          <Grid container>
-            <Grid item xs={1} />
-            <Grid item xs={10}>
-              <ComplexTextSearch />
-            </Grid>
-            <Grid item xs={1} />
-          </Grid>
-        </Grid>
-        <Grid item xs={1}>
+        <Box paddingTop={`${SEARCH_BAR_HEIGHT}px`}>
           <ResultPanelIconFilter />
-        </Grid>
-        <Grid item xs={11}>
-          {
-            // Must group the ResultSection and MapSection together so that show hide works
-          }
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "stretch",
-              width: "100%",
-            }}
-          >
-            {visibility === SearchResultLayoutEnum.VISIBLE && (
+        </Box>
+        <Grid container flex={1} gap={2}>
+          <Grid item xs={12} height={`${SEARCH_BAR_HEIGHT}px`}>
+            <ComplexTextSearch />
+          </Grid>
+          <Grid item xs={12}>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "stretch",
+                width: "100%",
+              }}
+              gap={2}
+            >
+              {visibility === SearchResultLayoutEnum.VISIBLE && (
+                <Box
+                  sx={{
+                    flex: 1,
+                  }}
+                >
+                  <ResultSection
+                    sx={{
+                      height: "80vh",
+                    }}
+                    onVisibilityChanged={onVisibilityChanged}
+                    onClickCard={handleNavigateToDetailPage}
+                    onChangeSorting={onChangeSorting}
+                    datasetSelected={datasetsSelected}
+                  />
+                </Box>
+              )}
               <Box
                 sx={{
-                  flex: 1,
+                  flex: visibility === SearchResultLayoutEnum.VISIBLE ? 2 : 1,
                 }}
               >
-                <ResultSection
+                <MapSection
                   sx={{
                     height: "80vh",
                   }}
-                  onVisibilityChanged={onVisibilityChanged}
-                  onClickCard={handleNavigateToDetailPage}
-                  onChangeSorting={onChangeSorting}
-                  datasetSelected={datasetsSelected}
+                  collections={layers}
+                  bbox={bbox}
+                  showFullMap={visibility === SearchResultLayoutEnum.INVISIBLE}
+                  onMapZoomOrMove={onMapZoomOrMove}
+                  onToggleClicked={onToggleDisplay}
+                  onDatasetSelected={onDatasetSelected}
                 />
               </Box>
-            )}
-            <Box
-              sx={{
-                flex: visibility === SearchResultLayoutEnum.VISIBLE ? 2 : 1,
-                paddingLeft: 2,
-                paddingRight: 2,
-              }}
-            >
-              <MapSection
-                sx={{
-                  height: "80vh",
-                }}
-                collections={layers}
-                bbox={bbox}
-                showFullMap={visibility === SearchResultLayoutEnum.INVISIBLE}
-                onMapZoomOrMove={onMapZoomOrMove}
-                onToggleClicked={onToggleDisplay}
-                onDatasetSelected={onDatasetSelected}
-              />
             </Box>
-          </Box>
+          </Grid>
         </Grid>
-      </Grid>
+      </Box>
     </Layout>
   );
 };