refactor:navbar login buttons updated

src/app/settings/page.tsx

@@ -10,7 +10,7 @@ import AvailabilitySection from '@/components/SettingsSection/AvailabilitySectio
 import BasicInformationSection from '@/components/SettingsSection/BasicInformationSection';
 import RolesSection from '@/components/SettingsSection/RolesSection';
 import { Flex } from '@/styles/containers';
-import { BackLink, H1 } from '@/styles/text';
+import { H1 } from '@/styles/text';
 import { useProfileAuth } from '@/utils/hooks';
 import * as Styles from './styles';
 
@@ -28,7 +28,6 @@ export default function Page() {
 
   return (
     <Styles.PageContainer>
-      <BackLink href="/">Back</BackLink>
       <Styles.ContentContainer>
         <H1>Your Profile</H1>
 

src/components/Buttons.tsx

@@ -101,6 +101,19 @@ export const LinkButton = styled(Link)`
   ${ButtonStyles}
   text-decoration: none;
 `;
+export const SmallLinkButton = styled(Link)`
+  ${ButtonStyles}
+  text-decoration: none;
+  padding: 0.25rem 0.75rem;
+  font-weight: 400;
+  border-radius: 0.313rem; // 5px
+  border: 2px solid
+    ${props =>
+      props.$primaryColor ? props.$primaryColor : props.$secondaryColor};
+  &:hover {
+    color: white !important;
+  }
+`;
 
 export const BlueLinkButton = forwardRef<
   HTMLAnchorElement,

src/components/NavBar/index.tsx

@@ -1,22 +1,21 @@
 'use client';
 
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import ProfileButton from '@/components/ProfileButton';
 import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
-import { useAuth } from '@/utils/AuthProvider';
 import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../../../assets/icons/Icon';
-
-import { LinkButton } from '../Buttons';
+import { SmallLinkButton } from '../Buttons';
 import * as Styles from './style';
 
 export default function NavBar() {
-  const profile = useProfile()
+  const profile = useProfile();
   const AuthButtonView = useMemo(() => {
-    if (profile?.profileReady)
+    if (!profile) throw new Error('Profile must be defined.');
+    if (profile.profileReady && profile?.profileData)
       return (
         <ProfileButton href="/settings">
           {profile.profileData?.first_name || 'Profile'}
@@ -25,22 +24,21 @@ export default function NavBar() {
 
     return (
       <>
-        <LinkButton
+        <SmallLinkButton
           $primaryColor={COLORS.blueMid}
           $secondaryColor={COLORS.blueDark}
-          // $fontColor="white"
           href="/login"
         >
           Log In
-        </LinkButton>
-        <LinkButton
+        </SmallLinkButton>
+        <SmallLinkButton
           $primaryColor="white"
           $secondaryColor={COLORS.blueDark}
-          // $fontColor={COLORS.blueMid}
           href="/signup"
+          style={{ color: COLORS.blueMid }}
         >
           Sign Up
-        </LinkButton>
+        </SmallLinkButton>
       </>
     );
   }, [profile]);

src/components/ProfileButton.ts

@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import styled from 'styled-components';
-import COLORS from '@/styles/colors';
 import { sans } from '@/styles/fonts';
 
 const ProfileButton = styled(Link)`