[release] Fix header and product sizes

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@aws-amplify/auth": "^4.4.4",
     "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.3",
     "@emotion/react": "^11",

src/App.tsx

@@ -13,6 +13,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import Routes from "./routes";
 import chakraTheme from "./config/theme";
 import { CartProvider } from "./context/cart";
+import { CheckoutProvider } from "./context/checkout";
 
 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
 
@@ -22,7 +23,9 @@ const App = () => {
       <ChakraProvider theme={chakraTheme}>
         <BrowserRouter>
           <CartProvider>
-            <Routes />
+            <CheckoutProvider>
+              <Routes />
+            </CheckoutProvider>
           </CartProvider>
         </BrowserRouter>
       </ChakraProvider>

src/components/Footer.tsx

@@ -8,27 +8,9 @@ type FooterLinkProps = {
 
 function Footer() {
   return (
-    <Flex direction="column" alignItems="center">
-      <Box>
-        <Grid
-          display="inline-grid"
-          gap={5}
-          alignItems="center"
-          justifyContent="center"
-          my={5}
-          flexDirection="row"
-        >
-          <GridItem
-            colStart={{ base: 1, lg: "auto" }}
-            colEnd={{ base: 4, lg: "auto" }}
-            order={{ base: "-1", lg: "initial" }}
-            justifySelf="center"
-          >
-            <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
-          </GridItem>
-        </Grid>
-      </Box>
-      <Image src="/images/vercellogo.svg" w={48} objectFit="contain" my={5} />
+    <Flex direction="column" alignItems="center" mt={10} mb={5}>
+      <Image src="https://cdn.ntuscse.com/LogoBW.png" alt="SCSE Logo" boxSize={14} />
+      <Image src="/images/vercellogo.svg" w={48} objectFit="contain" my={2} />
     </Flex>
   );
 }

src/components/Header.tsx

@@ -10,59 +10,56 @@ import {
   Show,
   Hide,
   Icon,
+  Text,
 } from "@chakra-ui/react";
 import { useState, useEffect } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import CognitoClient from "../utils/aws/cognito/cognitoClient";
 import routes from "../utils/constants/routes";
 import { useCartStore } from "../context/cart";
 import { CartItemType } from "../typings/cart";
 
 
 const Header = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
   const cartContext = useCartStore();
   const { state: cartState } = cartContext;
   const cartLength = cartState.items.reduce((acc: number, cur: CartItemType) => acc + cur.quantity, 0);
 
-  useEffect(() => {
-    CognitoClient.isUserSignedIn().then((isSignedIn) => {
-      setIsAuthenticated(isSignedIn);
-    });
-  }, []);
-
   return (
-    <Flex pos="sticky" zIndex={2} bg="#dedee0" top={0} py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
+    <Flex pos="sticky" zIndex={2} bg="#0e2b50" top={0} py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
       <HStack spacing={2}>
         <RouterLink to={routes.HOME}>
-          <Flex alignItems="center">
-            <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
-            <Heading ml={1}>SCSE MERCH</Heading>
-          </Flex>
+          <HStack align="center" gap="0.5em">
+            <Image src="https://cdn.ntuscse.com/LogoRedAccent.png" alt="SCSE Logo" boxSize={14} />
+            <Heading ml={1} color="white">SCSE MERCH</Heading>
+          </HStack>
         </RouterLink>
       </HStack>
 
       <Spacer />
       <Show below="xl">
         <RouterLink to={routes.CART}>
           <Flex alignItems="center" gap={1} mr={4}>
-            <Icon as={AiOutlineShoppingCart} w={5} h={5} />
-            {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
+            <Icon as={AiOutlineShoppingCart} w={5} h={5} color="white"/>
+            {cartLength > 0 && <Badge bg="secondary.400" color="white">{cartLength > 99 ? "99+" : cartLength}</Badge>}
           </Flex>
         </RouterLink>
       </Show>
       <Hide below="xl">
         <HStack spacing={5} alignItems="center">
           <Box px={2} py={1} borderRadius={7}
-          _hover={{ bg: "#465945", transition: "0.5s", color: "white" }}>
-            <RouterLink to={routes.HOME}>Home</RouterLink>
+          _hover={{ bg: "#426899", transition: "0.5s", color: "white" }}>
+            <RouterLink to={routes.HOME}>
+              <Text color="white">Home</Text>
+            </RouterLink>
           </Box>
           <RouterLink to={routes.CART}>
-            <Flex alignItems="center" gap={1}>
-              <Icon as={AiOutlineShoppingCart} w={8} h={8}
-              _hover={{ fill: "#465945", transition: "0.5s" }} />
-              {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
-            </Flex>
+            <Box px={2} py={1} borderRadius={7}
+            _hover={{ bg: "#426899", transition: "0.5s", color: "white" }}>
+              <Flex alignItems="center" gap={1}>
+                <Icon as={AiOutlineShoppingCart} w={8} h={8} color="white"/>
+                {cartLength > 0 && <Badge bg="secondary.400" color="white">{cartLength > 99 ? "99+" : cartLength}</Badge>}
+              </Flex>
+            </Box>
           </RouterLink>
         </HStack>
       </Hide>

src/components/OrderItem.tsx

@@ -36,7 +36,7 @@ const OrderItem: React.FC<OrderItemProps> = (props: OrderItemProps) => {
               <Flex color="grey">
                 Color:
                 <Text ml={1} textTransform="uppercase">
-                  {data.color}
+                  {data.colorway}
                 </Text>
               </Flex>
             </Flex>

src/context/checkout/index.tsx

@@ -0,0 +1,28 @@
+import React, { useContext, useMemo, useState } from "react";
+import { CheckoutResponseDto } from "../../typings/cart";
+
+type ContextType = {
+    state: CheckoutResponseDto | null;
+    setState:  React.Dispatch<React.SetStateAction<CheckoutResponseDto | null>>
+} | null
+
+const CheckoutContext = React.createContext<ContextType>(null)
+
+export const useCheckoutStore = () => {
+    const context = useContext(CheckoutContext);
+    if (context === null){
+        throw new Error("useCheckoutStore must be used within a CheckoutProvider.")
+    }
+    return context
+}
+
+export const CheckoutProvider: React.FC = ({ children }) => {
+    const [checkoutState, setCheckoutState] = useState<CheckoutResponseDto | null>(null)
+
+    const value = useMemo(() => ({
+        state: checkoutState,
+        setState: setCheckoutState
+    }), [checkoutState])
+    return <CheckoutContext.Provider value={value}>{children}</CheckoutContext.Provider>
+
+}

src/pages/Cart/CartItem.tsx

@@ -89,7 +89,13 @@ const CartItem: React.FC<CartItemProps> = ({ isMobile, data, onRemove, onQuantit
     <Grid templateColumns="3fr repeat(4, 1fr)" rowGap={2}>
       <GridItem display="flex">
         <Box boxShadow="sm" maxWidth={[125, 100]}>
-          <Image w="100%" borderRadius="md" src={productInfo?.images?.[0]} fallbackSrc="https://via.placeholder.com/100" />
+          <Image 
+            src={productInfo?.images?.[0]} 
+            fallbackSrc="https://via.placeholder.com/100" 
+            boxSize="70"
+            objectFit="contain"
+            borderRadius="md" 
+          />
         </Box>
         <Flex flexDir="column" fontWeight="600" fontSize={["sm", "md"]} ml={2}>
           <Text color="primary.600" noOfLines={2}>