slight updates to the standard (non-storefront navbar)

calblueprint · Apr 3, 2024 · 2220e14 · 2220e14
1 parent feebd5f
commit 2220e14
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/NavBarFolder/NavBar.tsx b/src/components/NavBarFolder/NavBar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 
-import { Body2 } from '@/styles/fonts';
+import { Body2, Body2Bold } from '@/styles/fonts';
 import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries';
 
 import {
@@ -52,7 +52,9 @@ export default function NavBar({ ...rest }) {
         <IconWithLabelLink href="../cart">
           <ShoppingCartIcon />
           <Body2>Cart</Body2>
-          <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
+          <CartTotalCircle $isZero={isZero}>
+            <Body2Bold>{data}</Body2Bold>
+          </CartTotalCircle>
         </IconWithLabelLink>
       </ButtonsDiv>
     </NavBarComp>

diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts
@@ -5,14 +5,18 @@ import Link from 'next/link';
 import COLORS from '../../styles/colors';
 
 export const CartTotalCircle = styled.div<{ $isZero?: boolean }>`
-  width: 20px;
-  height: 20px;
-  background: ${COLORS.marineBlue};
+  display: ${props => (props.$isZero ? 'none' : 'content')};
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  text-align: center;
-  transform: translate(19px, -58px);
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: ${COLORS.white};
-  display: ${props => (props.$isZero ? 'none' : 'content')};
+  background: ${COLORS.marineBlue};
 `;
 
 export const UserProfileIcon = styled(User)`
@@ -40,6 +44,7 @@ export const ButtonsDiv = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 `;
 
 export const LocationDiv = styled.div`
@@ -65,4 +70,5 @@ export const IconWithLabelLink = styled(Link)`
   align-items: center;
   text-decoration: none;
   color: ${COLORS.black};
+  position: relative;
 `;