Merge pull request #65 from calblueprint/buyankhuu/fixesPages

Buyankhuu/fixes pages

src/app/[productId]/page.tsx

@@ -10,8 +10,9 @@ import {
   TextContainer,
   DescriptionContainer,
   ToastPopUP,
+  Fullscreen,
 } from './styles';
-import { GlobalStyle } from '../../styles/components';
+
 import NavBar from '../../components/NavBarFolder/NavBar';
 import { Product } from '../../schema/schema';
 import Buttons from './Buttons';
@@ -39,8 +40,7 @@ export default function ItemDisplay({
   }, [params.productId]);
 
   return (
-    <main>
-      <GlobalStyle />
+    <Fullscreen>
       <NavBar />
       <ToastPopUP
         position="top-right"
@@ -68,6 +68,6 @@ export default function ItemDisplay({
           <p>{Item?.description}</p>
         </TextContainer>
       </DescriptionContainer>
-    </main>
+    </Fullscreen>
   );
 }

src/app/[productId]/styles.ts

@@ -85,3 +85,8 @@ export const ToastPopUP = styled(ToastContainer)`
   z-index: 100;
   transform: translatey(130px);
 `;
+
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/app/login/styles.ts

@@ -6,6 +6,8 @@ export const LoginBox = styled.div`
   width: 500px;
   height: 420px;
   border: 1px solid ${COLORS.neutralGrey};
+  justify-self: center;
+  align-self: center;
 `;
 
 export const LoginContent = styled.div`
@@ -73,11 +75,9 @@ export const EyeIcon = styled(Eye)`
 `;
 
 export const Fullscreen = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
-  height: 870px;
+  height: 100%;
+  display: grid;
 `;
 
 export const InputField = styled.div`

src/app/profileScreen/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { toast } from 'react-toastify';
+import { toast, ToastContainer } from 'react-toastify';
 import { useEffect, useState } from 'react';
 import {
   Heading2,
@@ -36,6 +36,7 @@ import {
   BackButtonDiv,
   BlankSpace,
   HeaderDiv,
+  Fullscreen,
 } from './styles';
 import { signOut } from '../../api/supabase/auth/auth';
 import 'react-toastify/dist/ReactToastify.css';
@@ -212,14 +213,20 @@ export default function Profile() {
     return <p>Error Loading User</p>;
   }
   return (
-    <main>
+    <Fullscreen>
       <NavBarMovedUP />
       <HeadingBack>
         <BackButtonDiv>
           <BackButton destination="./storefront" />
         </BackButtonDiv>
         <Heading1>My Profile</Heading1>
       </HeadingBack>
+      <ToastContainer
+        position="top-right"
+        autoClose={500}
+        limit={1}
+        hideProgressBar
+      />
 
       {user.delivery_allowed ? (
         <AccountDetailSectionDelivery user={user} />
@@ -233,6 +240,6 @@ export default function Profile() {
         Favorites
       </LogOutButton> */}
       <BlankSpace />
-    </main>
+    </Fullscreen>
   );
 }

src/app/profileScreen/styles.ts

@@ -138,3 +138,8 @@ export const BlankSpace = styled.div`
   width: 250px;
   height: 200px;
 `;
+
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/app/storefront/IndividualItem.tsx

@@ -51,15 +51,14 @@ export default function IndividualItem(props: {
             style={{ width: '250px', height: '250px' }}
           />
         </ItemButtons>
-
         <HeartContainer
           onClick={() => clickFunction()}
           onMouseEnter={() => setHovering(true)}
           onMouseLeave={() => setHovering(false)}
         >
-          <HeartIcon isHovering={hovering} isClicked={IsFavorite} />
+          <HeartIcon $isclicked={IsFavorite} />
         </HeartContainer>
-        <Hover isHovering={hovering} isClicked={IsFavorite}>
+        <Hover $ishovering={hovering}>
           <Body3>
             {IsFavorite ? 'Remove from favorites' : 'Add to favorites'}
           </Body3>

src/app/storefront/StoreFrontNavBar.tsx

@@ -134,6 +134,7 @@ export default function StoreFrontNavBar(props: {
             key={type.id - 1}
             value={type.name}
             setFiltredProducts={setFilteredProducts}
+            id={type.id}
             content={type.name}
             setCategoryWord={setCategoryWord}
             index={index + ind}

src/app/storefront/page.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
 
 import Footer from '../../components/FooterFolder/Footer';
-import { ShopAllText } from './styles';
+import { ShopAllText, Fullscreen } from './styles';
 import { fetchUserProducts } from '../../api/supabase/queries/product_queries';
 import { Product } from '../../schema/schema';
 
@@ -31,7 +31,7 @@ export default function App() {
   }, []);
 
   return (
-    <main>
+    <Fullscreen>
       <StoreFrontNavBar
         setFilteredProducts={setFilteredProducts}
         setCategoryWord={setCategoryWord}
@@ -42,6 +42,6 @@ export default function App() {
       <ShopAllText>Shop {CategoryWord}</ShopAllText>
       <Storefront products={FilteredProducts} />
       <Footer />
-    </main>
+    </Fullscreen>
   );
 }

src/app/storefront/productButtons.tsx

@@ -13,20 +13,20 @@ import {
 import { Product } from '../../schema/schema';
 
 export default function ProductButtons(props: {
-  key: number;
   value: string;
   setFiltredProducts: (category: Product[]) => void;
   content: string;
   setCategoryWord: (word: string) => void;
   index: number;
+  id: number;
   setClickedButton: (clicked: number) => void;
   clickedButton: number;
 }) {
   const {
-    key,
     value,
     content,
     setFiltredProducts,
+    id,
     setCategoryWord,
     index,
     setClickedButton,
@@ -89,7 +89,7 @@ export default function ProductButtons(props: {
     <IndividualContainer>
       <Button
         $pickColor={index === clickedButton}
-        key={key}
+        key={id}
         value={value}
         onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
           applyFilter(e)

src/app/storefront/styles.ts

@@ -14,11 +14,6 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 
 import COLORS from '../../styles/colors';
 
-interface props {
-  isClicked: boolean;
-  isHovering: boolean;
-}
-
 export const StickyHeader = styled.div`
   position: fixed;
   background-color: ${COLORS.periwinkle};
@@ -118,11 +113,11 @@ export const ShopAllText = styled.h1`
   color: ${COLORS.black};
 `;
 
-export const HeartIcon = styled(Heart)<props>`
-  color: ${props => (props.isClicked ? '#333286' : 'black')};
+export const HeartIcon = styled(Heart)<{ $isclicked?: boolean }>`
+  color: ${props => (props.$isclicked ? '#333286' : 'black')};
   width: 30px;
   height: 30px;
-  fill: ${props => (props.isClicked ? '#333286' : 'none')};
+  fill: ${props => (props.$isclicked ? '#333286' : 'none')};
   position: relative;
 `;
 
@@ -196,8 +191,8 @@ export const Addie = styled.p`
   margin-bottom: 30px;
 `;
 
-export const Hover = styled.p<props>`
-  visibility: ${props => (props.isHovering ? 'visible' : 'hidden')};
+export const Hover = styled.div<{ $ishovering?: boolean }>`
+  visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')};
   transform: translate(170px, -335px);
   color: ${COLORS.black};
   border: none;
@@ -248,3 +243,7 @@ export const BackButton = styled.button<{ $reachedEnd?: boolean }>`
   border: none;
   visibility: ${props => (props.$reachedEnd ? 'visible' : 'hidden')};
 `;
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/styles/components.tsx

@@ -3,20 +3,6 @@ import styled, { createGlobalStyle } from 'styled-components';
 import { User, ShoppingCart } from 'react-feather';
 import COLORS from './colors';
 
-export const GlobalStyle = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&display=swap'); 
-  
-  body {
-    background: ${COLORS.offWhite};
-    color: ${COLORS.black};
-    font-family: 'Public Sans', sans-serif;
-  }
-  span{
-  
-    color:black;
-  }
-`;
-
 export const StickyHeader = styled.div`
   position: fixed;
   background-color: ${COLORS.lightPeriwinkle};