From a7fe76257439a4785c180b11c83eb45739e043bb Mon Sep 17 00:00:00 2001
From: Buyankhuu Tsolmonkhuu <Buyankhuuts@Berkeley.edu>
Date: Sun, 21 Apr 2024 12:22:50 -0700
Subject: [PATCH] push

---
 src/app/favorites/styles.ts              |  3 +++
 src/app/orderHistory/page.tsx            |  4 +++-
 src/app/orderHistory/styles.ts           | 17 +++++++++++------
 src/app/profileScreen/styles.ts          |  5 +++--
 src/components/BackButton/BackButton.tsx |  4 ++--
 src/components/BackButton/styles.ts      |  6 +++---
 src/components/OrderHistory/styles.ts    |  4 ++--
 7 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts
index b2fb6851..acd1f56c 100644
--- a/src/app/favorites/styles.ts
+++ b/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`
diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx
index 62b3bf77..e02c8e1e 100644
--- a/src/app/orderHistory/page.tsx
+++ b/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) => (
diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts
index 9b2e322a..cae116e2 100644
--- a/src/app/orderHistory/styles.ts
+++ b/src/app/orderHistory/styles.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import Footer from '../../components/FooterFolder/Footer';
+import COLORS from '@/styles/colors';
 
 export const FooterMoved = styled(Footer)`
   left: 0;
@@ -13,8 +14,9 @@ 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`
@@ -22,13 +24,12 @@ export const OrderHistoryContainer = styled.div`
   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};
 `;
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts
index 884f01b1..1ee1f70b 100644
--- a/src/app/profileScreen/styles.ts
+++ b/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`
diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
index 11722ab4..bff2d899 100644
--- a/src/components/BackButton/BackButton.tsx
+++ b/src/components/BackButton/BackButton.tsx
@@ -1,4 +1,4 @@
-import { Body1 } from '@/styles/fonts';
+import { Body1Bold } from '@/styles/fonts';
 import { BackLink, ArrowLeftIcon } from './styles';
 
 export default function BackButton(props: { destination: string }) {
@@ -6,7 +6,7 @@ export default function BackButton(props: { destination: string }) {
   return (
     <BackLink href={destination}>
       <ArrowLeftIcon />
-      <Body1>Back</Body1>
+      <Body1Bold>Back</Body1Bold>
     </BackLink>
   );
 }
diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts
index 82155a18..4abb943e 100644
--- a/src/components/BackButton/styles.ts
+++ b/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;
 `;
diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts
index c321c849..fec7e6c7 100644
--- a/src/components/OrderHistory/styles.ts
+++ b/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`