fix remaining page components

ocadotechnology · Jun 27, 2024 · ec6ebf2 · ec6ebf2
1 parent ea80cae
commit ec6ebf2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 71 deletions.
diff --git a/src/components/page/Banner.tsx b/src/components/page/Banner.tsx
@@ -1,7 +1,7 @@
 import { Button, Stack, Typography, type ButtonProps } from "@mui/material"
-import type React from "react"
+import { type FC } from "react"
 
-// import { primary, secondary, tertiary } from "../../theme/colors"
+import { primary, secondary, tertiary } from "../../theme/colors"
 import palette from "../../theme/palette"
 import Image, { type ImageProps } from "../Image"
 import Section from "./Section"
@@ -15,7 +15,7 @@ export interface BannerProps {
   bgcolor?: "primary" | "secondary" | "tertiary"
 }
 
-const Banner: React.FC<BannerProps> = ({
+const Banner: FC<BannerProps> = ({
   header,
   subheader,
   textAlign = "start",
@@ -26,62 +26,52 @@ const Banner: React.FC<BannerProps> = ({
   // @ts-expect-error guaranteed to be in palette
   const contrastText = palette[bgcolor].contrastText
 
-  // let _bgcolor: string
-  // switch (bgcolor) {
-  //   case "primary":
-  //     _bgcolor = primary[500]
-  //     break
-  //   case "secondary":
-  //     _bgcolor = secondary[500]
-  //     break
-  //   case "tertiary":
-  //     _bgcolor = tertiary[500]
-  //     break
-  // }
-
   return (
-    <>
-      <Section
-        // TODO: figure this out
-        // gridProps={{ bgcolor: _bgcolor }}
-        sx={{ paddingY: 0 }}
+    <Section
+      boxProps={{
+        bgcolor: {
+          primary: primary[500],
+          secondary: secondary[500],
+          tertiary: tertiary[500],
+        }[bgcolor],
+      }}
+      sx={{ paddingY: 0 }}
+    >
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent={textAlign}
+        gap={2}
       >
         <Stack
-          direction="row"
-          alignItems="center"
-          justifyContent={textAlign}
-          gap={2}
+          py={{
+            xs: "80px",
+            md: imageProps !== undefined ? 0 : "100px",
+          }}
+          textAlign={textAlign}
         >
-          <Stack
-            py={{
-              xs: "80px",
-              md: imageProps !== undefined ? 0 : "100px",
-            }}
-            textAlign={textAlign}
+          <Typography variant="h2" color={contrastText}>
+            {header}
+          </Typography>
+          <Typography
+            color={contrastText}
+            variant="h4"
+            mb={buttonProps !== undefined ? undefined : 0}
           >
-            <Typography variant="h2" color={contrastText}>
-              {header}
-            </Typography>
-            <Typography
-              color={contrastText}
-              variant="h4"
-              mb={buttonProps !== undefined ? undefined : 0}
-            >
-              {subheader}
-            </Typography>
-            {buttonProps !== undefined && <Button {...buttonProps} />}
-          </Stack>
-          {imageProps !== undefined && (
-            <Image
-              {...imageProps}
-              display={{ xs: "none", md: "block" }}
-              maxWidth="320px"
-              marginLeft="auto"
-            />
-          )}
+            {subheader}
+          </Typography>
+          {buttonProps !== undefined && <Button {...buttonProps} />}
         </Stack>
-      </Section>
-    </>
+        {imageProps !== undefined && (
+          <Image
+            {...imageProps}
+            display={{ xs: "none", md: "block" }}
+            maxWidth="320px"
+            marginLeft="auto"
+          />
+        )}
+      </Stack>
+    </Section>
   )
 }
 

diff --git a/src/components/page/Notification.tsx b/src/components/page/Notification.tsx
@@ -4,7 +4,7 @@ import {
   InfoOutlined as InfoOutlinedIcon,
 } from "@mui/icons-material"
 import { IconButton, Stack, Typography } from "@mui/material"
-import { useEffect, useState, type FC } from "react"
+import { useEffect, useState, type FC, type ReactNode } from "react"
 
 import palette from "../../theme/palette"
 import Section from "./Section"
@@ -13,7 +13,7 @@ export interface NotificationProps {
   open?: boolean
   error?: boolean
   onClose?: () => void
-  children: React.ReactNode
+  children: ReactNode
   bgcolor?: "secondary" | "tertiary"
 }
 
@@ -37,7 +37,12 @@ const Notification: FC<NotificationProps> = ({
 
   return (
     <Section
-      boxProps={{ bgcolor: bgcolor === "secondary" ? "#ffd23b" : "#08bafc" }}
+      boxProps={{
+        bgcolor: {
+          secondary: "#ffd23b",
+          tertiary: "#08bafc",
+        }[bgcolor],
+      }}
       sx={{ paddingY: "5px" }}
     >
       <Stack direction="row" alignItems="center" gap={2}>

diff --git a/src/components/page/TabBar.tsx b/src/components/page/TabBar.tsx
@@ -9,45 +9,41 @@ import {
   Typography,
   type TabScrollButtonProps,
 } from "@mui/material"
-import React from "react"
+import { useEffect, useState, type FC, type ReactNode } from "react"
 import { generatePath, useNavigate, useParams } from "react-router-dom"
 import { object as YupObject, string as YupString } from "yup"
 
+import { primary } from "../../theme/colors"
 import { tryValidateSync } from "../../utils/schema"
 import Section from "./Section"
 
 export interface TabBarProps {
   header: string
   tabs: Array<{
     label: string
-    children: React.ReactNode
+    children: ReactNode
     path: string
   }>
   originalPath: string
   value?: number
 }
 
-const TabBar: React.FC<TabBarProps> = ({
-  header,
-  tabs,
-  originalPath,
-  value = 0,
-}) => {
+const TabBar: FC<TabBarProps> = ({ header, tabs, originalPath, value = 0 }) => {
   const params = useParams()
   const navigate = useNavigate()
-  const [_value, _setValue] = React.useState(
+  const [_value, _setValue] = useState(
     value < 0 ? 0 : value >= tabs.length ? tabs.length - 1 : value,
   )
 
   const labels = tabs.map(tab => tab.label)
   const children = tabs.map(tab => tab.children)
   const paths = tabs.map(tab => tab.path)
 
-  React.useEffect(() => {
+  useEffect(() => {
     _setValue(value)
   }, [value])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const tab = tryValidateSync(
       params,
       YupObject({
@@ -63,8 +59,7 @@ const TabBar: React.FC<TabBarProps> = ({
   return (
     <>
       <Section
-        // TODO: figure this out
-        // gridProps={{ bgcolor: primary[500] }}
+        boxProps={{ bgcolor: primary[500] }}
         sx={{ paddingY: "100px" }}
         className="flex-center"
       >
@@ -78,8 +73,7 @@ const TabBar: React.FC<TabBarProps> = ({
         </Typography>
       </Section>
       <Section
-        // TODO: figure this out
-        // gridProps={{ bgcolor: primary[300] }}
+        boxProps={{ bgcolor: primary[300] }}
         sx={{ paddingY: "6px" }}
         className="flex-center"
       >