fix: addresses PR feedback

calblueprint · May 19, 2024 · cf2d903 · cf2d903
1 parent ce35f56
commit cf2d903
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 28 deletions.
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -47,7 +47,7 @@ const ButtonStyles = css<ButtonProps>`
   appearance: none;
   color: ${({ $primaryColor }) => ($primaryColor ? 'white' : COLORS.blueMid)};
   background: ${({ $primaryColor }) => $primaryColor || 'white'};
-  padding: 0.625rem 1.25rem;
+  padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   transition: 150ms ease-in-out;
@@ -105,9 +105,9 @@ export const LinkButton = styled(Link)`
 export const SmallLinkButton = styled(Link)`
   ${ButtonStyles}
   text-decoration: none;
-  padding: 0.25rem 0.75rem;
+  padding: 4px 12px;
   font-weight: 400;
-  border-radius: 0.313rem; // 5px
+  border-radius: 5px;
   border: 2px solid
     ${({ $primaryColor, $secondaryColor }) => $primaryColor || $secondaryColor};
   &:hover {
@@ -176,7 +176,7 @@ RedButton.displayName = 'RedButton';
 const BigButtonStyles = css<ButtonProps>`
   ${ButtonStyles}
 
-  padding: .9375rem 0;
+  padding: 15px 0;
   width: 100%;
 
   &:active {

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -7,19 +7,26 @@ import { usePathname } from 'next/navigation';
 import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
 import { useAuth } from '@/utils/AuthProvider';
+import { useActiveStatus } from '@/utils/hooks';
 import { useProfile } from '@/utils/ProfileProvider';
 import IJPlogo from '~/public/images/ijp-logo.webp';
 import { ProfileButton, SmallLinkButton } from '../Buttons';
 import * as Styles from './style';
 
+type NavLink = {
+  name: string;
+  path: string;
+  active: boolean;
+};
+
 export default function NavBar() {
   const profile = useProfile();
   if (!profile) throw new Error('Profile must be defined.');
 
   const auth = useAuth();
-  if (!auth) throw new Error('Auth Must be defined.');
+  if (!auth) throw new Error('Auth must be defined.');
 
-  const AuthButtonView = useMemo(() => {
+  const authButtonView = useMemo(() => {
     if (profile.profileReady && auth.userId)
       return (
         <ProfileButton href="/settings">
@@ -46,18 +53,8 @@ export default function NavBar() {
         </SmallLinkButton>
       </>
     );
-  }, [profile]);
-
-  function useActiveStatus(path: string): boolean {
-    const currentPath = usePathname();
-    return currentPath.includes(path);
-  }
+  }, [profile, auth.userId]);
 
-  type NavLink = {
-    name: string;
-    path: string;
-    active: boolean;
-  };
   const navlinks: NavLink[] = [
     { name: 'Cases', path: '/cases', active: useActiveStatus('/cases') },
     {
@@ -81,11 +78,7 @@ export default function NavBar() {
           flex: 1,
         }}
       >
-        <Styles.NoUnderlineLink
-          href={link.path}
-          $color="white"
-          $isActive={link.active}
-        >
+        <Styles.NoUnderlineLink href={link.path} $color="white">
           <Styles.DisplayText $isActive={link.active}>
             {link.name}
           </Styles.DisplayText>
@@ -118,7 +111,7 @@ export default function NavBar() {
         {navlinks.map(renderLink)}
       </Styles.NavBarSectionDiv>
       <Styles.NavBarSectionDiv>
-        <Styles.AuthButtons>{AuthButtonView}</Styles.AuthButtons>
+        <Styles.AuthButtons>{authButtonView}</Styles.AuthButtons>
       </Styles.NavBarSectionDiv>
     </Styles.NavBarContainer>
   );

diff --git a/src/components/NavBar/style.ts b/src/components/NavBar/style.ts
@@ -11,15 +11,14 @@ export const NavBarContainer = styled.div`
   z-index: 1000;
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
   justify-content: space-between;
+  padding: 0px 34px;
 `;
 
 export const NavBarSectionDiv = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 18px;
-  margin-left: 34px;
-  margin-right: 34px;
+  gap: 12px;
 `;
 
 export const AuthButtons = styled.div`
@@ -29,7 +28,7 @@ export const AuthButtons = styled.div`
   top: 0;
   right: 0;
 `;
-export const NoUnderlineLink = styled(LinkColored)<{ $isActive: boolean }>`
+export const NoUnderlineLink = styled(LinkColored)`
   ${sans.style}
   text-decoration: none;
   margin: 10px;
@@ -64,7 +63,6 @@ export const LinkContainer = styled.div`
   display: flex;
   position: relative;
   height: 100%;
-  margin: 5px;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;

diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
@@ -128,3 +128,8 @@ export const useOnboardingNavigation = () => {
 
   return { flowAt, ebbTo, backlinkHref, pageProgress };
 };
+
+export const useActiveStatus = (path: string): boolean => {
+  const currentPath = usePathname();
+  return currentPath.includes(path);
+};