more refactoring of the navbar and backbutton

calblueprint · Mar 27, 2024 · dc62a20 · dc62a20
1 parent e4b99d7
commit dc62a20
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 13 deletions.
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -48,9 +48,9 @@ export default function App() {
         width={125}
         height={65}
         style={{
+          position: 'absolute',
           top: '30px',
           left: '30px',
-          position: 'absolute',
         }}
       />
       <LoginBox>

diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts
@@ -76,8 +76,9 @@ export const EyeIcon = styled(Eye)`
 
 export const Fullscreen = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: grid;
+  place-items: center;
 `;
 
 export const InputField = styled.div`

diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/button-has-type */
 import Image from 'next/image';
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
 import { fetchButtonCategories } from '@/api/supabase/queries/button_queries';
@@ -23,6 +22,7 @@ import {
   BackButton,
   FrontArrow,
   BackArrow,
+  IconWithLabelLink,
 } from './styles';
 
 import ProductButtons from './productButtons';
@@ -117,14 +117,14 @@ export default function StoreFrontNavBar(props: {
 
   return (
     <NavBarComp>
-      <Link href="../storefront">
+      <IconWithLabelLink href="../storefront">
         <Image
           src="/images/ShantiLogo.png"
           alt="Shanti Logo"
-          width={147}
-          height={73}
+          width={125}
+          height={70}
         />
-      </Link>
+      </IconWithLabelLink>
       <ButtonsContainer>
         <FrontButton onClick={handlePrevious} $reachedStart={reachedStart}>
           <FrontArrow />
@@ -148,15 +148,15 @@ export default function StoreFrontNavBar(props: {
       </ButtonsContainer>
 
       <ButtonsDiv>
-        <Link href="../profileScreen">
+        <IconWithLabelLink href="../profileScreen">
           <UserProfileIcon />
-          <Body2>Users</Body2>
-        </Link>
-        <Link href="../cart">
+          <Body2>User</Body2>
+        </IconWithLabelLink>
+        <IconWithLabelLink href="../cart">
           <ShoppingCartIcon />
           <Body2>Cart</Body2>
           <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
-        </Link>
+        </IconWithLabelLink>
       </ButtonsDiv>
     </NavBarComp>
   );

diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts
@@ -249,3 +249,11 @@ export const BackButton = styled.button<{ $reachedEnd?: boolean }>`
   visibility: ${props => (props.$reachedEnd ? 'visible' : 'hidden')};
   cursor: pointer;
 `;
+
+export const IconWithLabelLink = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: ${COLORS.black};
+`;
diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts
@@ -7,8 +7,9 @@ export const BackLink = styled(Link)`
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   color: ${COLORS.black};
-  gap: 5px;
+  width: 56px;
 `;
 
 export const ArrowLeftIcon = styled(ArrowLeft)`