belindas-closet-nextjs_3_242_update-home-page-and-remove-CSS (#243)

* update home page and remove CSS * remove home css * update fixing error
SeattleColleges · Feb 27, 2024 · eb69e95 · eb69e95
1 parent dcfd201
commit eb69e95
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 174 deletions.
diff --git a/app/category-page/[categoryId]/page.tsx b/app/category-page/[categoryId]/page.tsx
@@ -52,32 +52,43 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
   }, [categoryId]);
 
   return (
-    <Container sx={{ py: 4 }} maxWidth="lg">
-      <Typography
-        variant="h4"
-        gutterBottom
-        justifyContent={"center"}
-        align={"center"}
-      >
-        Found {products.length} products in {categoryId}
-      </Typography>
-      <Grid container spacing={2}>
-        {products.map((product, index) => (
-          <Grid item key={index} xs={12} sm={6} md={4}>
-            <ProductCard
-              image={logo}
-              categories={product.productType}
-              gender={product.productGender}
-              sizeShoe={product.productSizeShoe}
-              size={product.productSize}
-              sizePantsWaist={product.productSizePantsWaist}
-              sizePantsInseam={product.productSizePantsInseam}
-              description={product.productDescription}
-              href={`/category-page/${categoryId}/products/${product._id}`} // Construct the URL
-            />
-          </Grid>
-        ))}
-      </Grid>
+    <Container
+      fixed
+      maxWidth="lg"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        bgcolor: "#12202d",
+      }}
+    >
+      <Container sx={{ py: 4 }} maxWidth="lg">
+        <Typography
+          variant="h4"
+          gutterBottom
+          justifyContent={"center"}
+          align={"center"}
+        >
+          Found {products.length} products in {categoryId}
+        </Typography>
+        <Grid container spacing={2}>
+          {products.map((product, index) => (
+            <Grid item key={index} xs={12} sm={6} md={4}>
+              <ProductCard
+                image={logo}
+                categories={product.productType}
+                gender={product.productGender}
+                sizeShoe={product.productSizeShoe}
+                size={product.productSize}
+                sizePantsWaist={product.productSizePantsWaist}
+                sizePantsInseam={product.productSizePantsInseam}
+                description={product.productDescription}
+                href={`/category-page/${categoryId}/products/${product._id}`} // Construct the URL
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
     </Container>
   );
 };

diff --git a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx b/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx
@@ -43,7 +43,6 @@ const ProductDetailDisplay = ({ product }: { product: Product }) => {
         alignItems="center"
         flexDirection="column"
         gap={2}
-        bgcolor="#293745"
         p={3}
       >
         <Typography component="h1" variant="h4">

diff --git a/app/creator-page/page.tsx b/app/creator-page/page.tsx
@@ -1,18 +1,16 @@
-import styles from "../home.module.css";
-
 const Creator = () => {
     // Temporary boilerplate code to make it compile
     return (
         <div className="flex flex-col items-center justify-center min-h-screen">
 
         <div >
-            <div className={styles.loginButton}>
+            <div>
                 <a href="/">
                 <button>All Products</button>
                 </a>
             </div>
 
-            <div className={styles.loginButton}>
+            <div>
                 <a href="/add-product-page">
                 <button>Add Products</button>
                 </a>

diff --git a/app/globals.css b/app/globals.css
@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -24,4 +24,4 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
-}
+} */
diff --git a/app/home.module.css b/app/home.module.css
diff --git a/app/page.tsx b/app/page.tsx
@@ -12,7 +12,7 @@ import Card from '@mui/material/Card';
 import { Container, Typography, Link, Button } from '@mui/material';
 
 // TEMPORARY CATEGORIES LIST
-const placeholderImg = google_play
+const placeholderImg = logo;
 const categories = [
   {'type': 'Shirts', 'image': placeholderImg},
   {'type': 'Shoes', 'image': placeholderImg},
@@ -27,10 +27,10 @@ const categories = [
 
 const Home = () => {
   return (
-    <Box component="div" width={'100%'} display="flex" justifyContent="center" alignItems="center" flexDirection="column" bgcolor='#314252'>
-      <Box width={800} display="flex" alignItems="center" flexDirection="column" gap={2} bgcolor='#293745' p={3}>
-        <Container disableGutters fixed maxWidth="xs" sx={{width: "15%"}}>
-          <Image src={logo} alt="logo" />
+    <Container fixed maxWidth="lg" sx={{display: "flex", justifyContent: "center", alignItems: "center", bgcolor: '#12202d'}}>
+      <Box width={800} display="flex" alignItems="center" flexDirection="column" gap={2} p={3}>
+        <Container disableGutters fixed maxWidth="xs" sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Image src={logo} alt="logo" style={{width: 100, height: 100, display: 'block', margin: 'auto'}} />
         </Container>
         <Typography component='h1' variant='h3' sx={{color: 'white'}}>
           Belinda&apos;s Closet
@@ -45,16 +45,16 @@ const Home = () => {
         </Button>
           <Grid container spacing={2}>
               {categories.map((category, index)=>(
-                <Grid lg={4} sm={4} component="div" key={index}>
+                <Grid xs={12} md={6} lg={4} component="div" key={index}>
                   <Card>
                     <CustomCardContent title={category.type} image={placeholderImg} />
                   </Card>
                 </Grid>
               ))}
           </Grid>
         </Box>
-    </Box>
+     </Container>
   );
 };
 
-export default Home;
+export default Home;
diff --git a/app/theme/theme.tsx b/app/theme/theme.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { ThemeContext } from '@emotion/react';
 import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
@@ -21,8 +22,8 @@ const theme = createTheme({
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          color: "darkgrey",
-          backgroundColor: "grey",
+          color: "#fff",
+          backgroundColor: "lightgray", // replace with a design image
           // "& h1": {
           //   color: "black"
           // }

diff --git a/components/CustomCardContent.tsx b/components/CustomCardContent.tsx
@@ -1,6 +1,6 @@
 import Image, { StaticImageData } from "next/image";
 import React from "react";
-import { CardActionArea, Typography, CardHeader } from '@mui/material';
+import { CardActionArea, Typography } from '@mui/material';
 import { useRouter } from "next/navigation";
 import CardContent from '@mui/material/CardContent';
 
@@ -19,8 +19,8 @@ const CustomCardContent: React.FC<CategoryCardProps> =({title, image})=>{
     return (
         <CardActionArea onClick={() => navigate()}>
             <CardContent>
-                <Image src={image} alt="logo" style={{width: "100%"}} />
-                <Typography variant='h5' align='center' gutterBottom>
+                <Image src={image} alt="logo" style={{width: 128, height: 128, display: 'block', margin: 'auto'}} />
+                <Typography variant='h5' align='center' mt={2}>
                     {title}
                 </Typography>
             </CardContent>