Buyankhuu/final hack

src/api/supabase/queries/user_queries.ts

@@ -10,13 +10,20 @@ import { convertButtonNumberToCategory } from './button_queries';
  */
 export async function fetchUser(): Promise<User> {
   const {
-    data: { user },
+    data: { session },
     error,
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getSession();
+
   if (error) {
-    throw new Error(`Error fetching user: ${error.message}`);
+    throw new Error(`Error fetching session: ${error.message}`);
+  }
+
+  if (!session) {
+    throw new Error(`Session is null`);
   }
 
+  const { user } = session;
+
   if (user !== null) {
     const { data, error: error1 } = await supabase
       .from('profiles')

src/app/[productId]/page.tsx

@@ -62,7 +62,7 @@ export default function ItemDisplay({
           <img
             src={Item?.photo}
             alt={Item?.name}
-            style={{ width: '400px', height: '400px' }}
+            style={{ width: '400px', height: '400px', objectFit: 'cover' }}
           />
         </ImageContainer>
         <TextContainer>

src/app/favorites/styles.ts

@@ -43,6 +43,9 @@ export const BackDiv = styled.button`
 export const OutterBox = styled.div`
   width: 800px;
   height: 100%;
+
+  margin-top: 50px;
+  margin-bottom: 50px;
 `;
 
 export const Backtext = styled.p`

src/app/orderHistory/page.tsx

@@ -30,7 +30,9 @@ function OrderHistory() {
       <NavBarMovedUP />
       <OutterBox>
         <BackButton destination="./profileScreen" />
-        <Heading1>Order History</Heading1>
+        <div style={{ marginTop: '40px', marginBottom: '20px' }}>
+          <Heading1>Order History</Heading1>
+        </div>
         <OrderHistoryContainer>
           {orderIds.length > 0 ? (
             orderIds.map((orderId: number) => (

src/app/orderHistory/styles.ts

@@ -1,5 +1,6 @@
 // styles.ts (for styled-components)
 import styled from 'styled-components';
+import COLORS from '@/styles/colors';
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import Footer from '../../components/FooterFolder/Footer';
@@ -13,22 +14,22 @@ export const NavBarMovedUP = styled(NavBar)`
 `;
 
 export const OutterBox = styled.div`
-  width: 900px;
-  margin: 0 auto; // This will center the OutterBox
+  width: 800px;
+  margin-top: 40px;
+  margin-bottom: 70px;
 `;
 
 export const OrderHistoryContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 10px;
-  background: var(--White, #fff);
+  background: ${COLORS.white};
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   width: 800px; // Width of the outer box
-  height: 700px;
-  overflow: scroll;
+  height: auto;
   margin-top: 10px;
-  padding: 0; // Ensure there's no padding pushing the internal boxes inward
+  padding-top: 40px;
 `;
 
 export const OrderHistoryBox = styled.div`
@@ -46,4 +47,8 @@ export const OrderHistoryBox = styled.div`
 export const Fullscreen = styled.div`
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: ${COLORS.offWhite};
 `;

src/app/profileScreen/page.tsx

@@ -31,7 +31,7 @@ import {
   fetchOrderProductById,
   fetchProductWithQuantityById,
 } from '@/api/supabase/queries/order_queries';
-import { Check, CheckCircle, X } from 'react-feather';
+import { Check, CheckCircle, X, Send } from 'react-feather';
 import BackButton from '../../components/BackButton/BackButton';
 import {
   LogOutButton,
@@ -170,15 +170,15 @@ function OrderHistorySection(props: { Orders: Order[] }) {
   if (firstOrderProducts.length > 0) {
     let backgroundColor = 'transparent';
     if (Orders[0].order_status === 'Submitted') {
-      backgroundColor = '#CEE8BE';
+      backgroundColor = 'var(--Greyish, #E6E6E6)';
     } else if (Orders[0].order_status === 'Rejected') {
       backgroundColor = '#FFDDDD';
     } else if (Orders[0].order_status === 'Confirmed') {
       backgroundColor = '#C7DDFF';
     }
     let icon;
     if (Orders[0].order_status === 'Submitted') {
-      icon = <CheckCircle />;
+      icon = <Send />;
     } else if (Orders[0].order_status === 'Rejected') {
       icon = <X />;
     } else if (Orders[0].order_status === 'Confirmed') {
@@ -329,12 +329,7 @@ function AccountDetailSectionPickUp(props: { user: User }) {
     <main>
       <AccountDetails>
         <Heading2>Account Details</Heading2>
-        <HeadingSpacing>
-          <Body1Bold>Email</Body1Bold>
-        </HeadingSpacing>
-        <TextSpacing>
-          <Body2>{user?.email}</Body2>
-        </TextSpacing>
+
         <HeadingSpacing>
           <Body1Bold>Name</Body1Bold>
         </HeadingSpacing>
@@ -343,6 +338,13 @@ function AccountDetailSectionPickUp(props: { user: User }) {
             {user?.first_name} {user?.last_name}
           </Body2>
         </TextSpacing>
+        <HeadingSpacing>
+          <Body1Bold>Email</Body1Bold>
+        </HeadingSpacing>
+        <TextSpacing>
+          <Body2>{user?.email}</Body2>
+        </TextSpacing>
+
         <HeadingSpacing>
           <Body1Bold>Phone Number</Body1Bold>
         </HeadingSpacing>

src/app/profileScreen/styles.ts

@@ -77,7 +77,7 @@ export const LogOutButton = styled.button`
   border: transparent;
   border-radius: 5px;
   width: 405px;
-  height: 70px;
+  height: 50px;
 `;
 /* transform: translateY(200px); */
 
@@ -112,7 +112,8 @@ export const HeartIcon = styled(Heart)`
 `;
 
 export const BackButtonDiv = styled.div`
-  margin-bottom: 40px;
+  margin-bottom: 30px;
+  margin-top: 50px;
 `;
 
 export const HeaderDiv = styled.div`

src/components/BackButton/BackButton.tsx

@@ -1,12 +1,12 @@
-import { Body1 } from '@/styles/fonts';
+import { Body1Bold } from '@/styles/fonts';
 import { BackLink, ArrowLeftIcon } from './styles';
 
 export default function BackButton(props: { destination: string }) {
   const { destination } = props;
   return (
     <BackLink href={destination}>
       <ArrowLeftIcon />
-      <Body1>Back</Body1>
+      <Body1Bold>Back</Body1Bold>
     </BackLink>
   );
 }

src/components/BackButton/styles.ts

@@ -10,13 +10,13 @@ export const BackLink = styled(Link)`
   justify-content: space-between;
   color: ${COLORS.black};
   width: 75px;
-  gap: 5px;
+
   &:hover {
     text-decoration: underline;
   }
 `;
 
 export const ArrowLeftIcon = styled(ArrowLeft)`
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
 `;

src/components/OrderHistory/styles.ts

@@ -165,8 +165,8 @@ export const GalleryImage = styled.img`
 
 export const RowDiv = styled.div`
   width: 700px;
-  height: 400px;
-  margin-bottom: 50px;
+  height: 300px;
+  margin-bottom: 20px;
 `;
 
 export const OrderStatusDiv = styled.div`