feat: Navbar updated for active links, added new SmallerButton on com…

…ponents
calblueprint · Apr 19, 2024 · bd2588e · bd2588e
1 parent 3bb82ad
commit bd2588e
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 132 deletions.
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
@@ -1,16 +1,12 @@
 'use client';
 
 import { ReactNode } from 'react';
-import NavBar from '@/components/NavBar';
 import { FormDiv, OuterDiv } from './styles';
 
 export default function layout({ children }: { children: ReactNode }) {
   return (
-    <>
-      <NavBar />
-      <OuterDiv>
-        <FormDiv>{children}</FormDiv>
-      </OuterDiv>
-    </>
+    <OuterDiv>
+      <FormDiv>{children}</FormDiv>
+    </OuterDiv>
   );
 }
diff --git a/src/app/cases/page.tsx b/src/app/cases/page.tsx
@@ -10,7 +10,6 @@ import { H1, H2, CenteredH3 } from '@/styles/text';
 import COLORS from '@/styles/colors';
 import FilterDropdown from '@/components/FilterDropdown';
 import { parseAgency } from '@/utils/helpers';
-import NavBar from '@/components/NavBar';
 import {
   CardColumn,
   PageContainer,
@@ -125,91 +124,88 @@ export default function Page() {
   };
 
   return (
-    <>
-      <NavBar />
-      <PageContainer>
-        <Header>
-          <H2>Browse Available Cases</H2>
-          <FiltersContainer>
-            <FilterDropdown
-              placeholder={defaultFilterValues.remote}
-              multi
-              options={remoteOptions}
-              value={caseFilters.remote}
-              fullText="Remote, In Person"
-              onChange={v => setCaseFilters({ ...caseFilters, remote: v })}
-            />
-            <FilterDropdown
-              placeholder={defaultFilterValues.role}
-              multi
-              options={roleOptions}
-              value={caseFilters.role}
-              fullText="Attorney, Interpreter"
-              onChange={v => setCaseFilters({ ...caseFilters, role: v })}
-            />
-            <FilterDropdown
-              placeholder={defaultFilterValues.languages}
-              multi
-              options={languageOptions}
-              value={caseFilters.languages}
-              onChange={v => setCaseFilters({ ...caseFilters, languages: v })}
-            />
-            <FilterDropdown
-              placeholder={defaultFilterValues.agency}
-              multi
-              options={agencyOptions}
-              value={caseFilters.agency}
-              onChange={v => setCaseFilters({ ...caseFilters, agency: v })}
-            />
-            <FilterDropdown
-              placeholder={defaultFilterValues.countries}
-              multi
-              options={countryOptions}
-              value={caseFilters.countries}
-              onChange={v => setCaseFilters({ ...caseFilters, countries: v })}
-            />
-            <ResetFilters onClick={() => resetFilters()}>
-              Reset Filters
-            </ResetFilters>
-          </FiltersContainer>
-        </Header>
-        <Body>
-          <CardColumn>
-            <ListingCount $color={COLORS.greyMid}>
-              {filteredCases.length} listings found
-            </ListingCount>
-            {filteredCases.length === 0 ? (
-              <CenteredH3 $color={COLORS.greyMid}>No cases listed</CenteredH3>
-            ) : (
-              <>
-                {filteredCases.map(c => (
-                  <ListingCard
-                    key={c.id}
-                    caseData={c}
-                    isSelected={c.id === selectedCardRef.current}
-                    onClick={() => {
-                      selectedCardRef.current = c.id;
-                      setCaseInfo(c);
-                    }}
-                  />
-                ))}
-              </>
-            )}
-          </CardColumn>
-          <CaseDetailsContainer>
-            {caseInfo ? (
-              <CaseDetails caseData={caseInfo} />
-            ) : (
-              <NoCasesContainer>
-                <H1 $color={COLORS.greyMid}>No cases listed</H1>
-                <CenteredH3 $color={COLORS.greyMid}>
-                  Check back later for more cases
-                </CenteredH3>
-              </NoCasesContainer>
-            )}
-          </CaseDetailsContainer>
-        </Body>
-      </PageContainer>
-    </>
+    <PageContainer>
+      <Header>
+        <H2>Browse Available Cases</H2>
+        <FiltersContainer>
+          <FilterDropdown
+            placeholder={defaultFilterValues.remote}
+            multi
+            options={remoteOptions}
+            value={caseFilters.remote}
+            fullText="Remote, In Person"
+            onChange={v => setCaseFilters({ ...caseFilters, remote: v })}
+          />
+          <FilterDropdown
+            placeholder={defaultFilterValues.role}
+            multi
+            options={roleOptions}
+            value={caseFilters.role}
+            fullText="Attorney, Interpreter"
+            onChange={v => setCaseFilters({ ...caseFilters, role: v })}
+          />
+          <FilterDropdown
+            placeholder={defaultFilterValues.languages}
+            multi
+            options={languageOptions}
+            value={caseFilters.languages}
+            onChange={v => setCaseFilters({ ...caseFilters, languages: v })}
+          />
+          <FilterDropdown
+            placeholder={defaultFilterValues.agency}
+            multi
+            options={agencyOptions}
+            value={caseFilters.agency}
+            onChange={v => setCaseFilters({ ...caseFilters, agency: v })}
+          />
+          <FilterDropdown
+            placeholder={defaultFilterValues.countries}
+            multi
+            options={countryOptions}
+            value={caseFilters.countries}
+            onChange={v => setCaseFilters({ ...caseFilters, countries: v })}
+          />
+          <ResetFilters onClick={() => resetFilters()}>
+            Reset Filters
+          </ResetFilters>
+        </FiltersContainer>
+      </Header>
+      <Body>
+        <CardColumn>
+          <ListingCount $color={COLORS.greyMid}>
+            {filteredCases.length} listings found
+          </ListingCount>
+          {filteredCases.length === 0 ? (
+            <CenteredH3 $color={COLORS.greyMid}>No cases listed</CenteredH3>
+          ) : (
+            <>
+              {filteredCases.map(c => (
+                <ListingCard
+                  key={c.id}
+                  caseData={c}
+                  isSelected={c.id === selectedCardRef.current}
+                  onClick={() => {
+                    selectedCardRef.current = c.id;
+                    setCaseInfo(c);
+                  }}
+                />
+              ))}
+            </>
+          )}
+        </CardColumn>
+        <CaseDetailsContainer>
+          {caseInfo ? (
+            <CaseDetails caseData={caseInfo} />
+          ) : (
+            <NoCasesContainer>
+              <H1 $color={COLORS.greyMid}>No cases listed</H1>
+              <CenteredH3 $color={COLORS.greyMid}>
+                Check back later for more cases
+              </CenteredH3>
+            </NoCasesContainer>
+          )}
+        </CaseDetailsContainer>
+      </Body>
+    </PageContainer>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { openSans } from '@/styles/fonts';
 import ProfileProvider from '@/utils/ProfileProvider';
+import NavBar from '@/components/NavBar';
 
 export const metadata: Metadata = {
   title: 'Immigration Justice Project',
@@ -18,6 +19,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={openSans.className}>
         <ProfileProvider>
+          <NavBar />
           <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
         </ProfileProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,8 @@
-import NavBar from '@/components/NavBar';
 import styles from './page.module.css';
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <NavBar />
       <div style={{ paddingTop: '78px' }}>
         <div className={styles.description}>immigration justice project</div>
       </div>

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -5,15 +5,9 @@ import { useMemo, useContext } from 'react';
 import COLORS from '@/styles/colors';
 import { ProfileContext } from '@/utils/ProfileProvider';
 import ProfileButton from '@/components/ProfileButton';
-import { LinkButton } from '@/components/Button';
+import { LinkButton } from '@/components/SmallerButton';
 import { usePathname } from 'next/navigation';
-import {
-  NavBarContainer,
-  NavBarSectionDiv,
-  AuthButtons,
-  NoUnderlineLink,
-  LinkContainer,
-} from './style';
+import * as Styles from './style';
 import Icon from '../../../assets/icons/Icon';
 
 export default function NavBar() {
@@ -31,13 +25,15 @@ export default function NavBar() {
         <LinkButton
           $primaryColor={COLORS.blueMid}
           $secondaryColor={COLORS.blueDark}
+          $fontColor="white"
           href="/login"
         >
           Log In
         </LinkButton>
         <LinkButton
-          $primaryColor={COLORS.goldMid}
-          $secondaryColor={COLORS.blueMid}
+          $primaryColor="white"
+          $secondaryColor={COLORS.blueDark}
+          $fontColor={COLORS.blueMid}
           href="/signup"
         >
           Sign Up
@@ -67,36 +63,51 @@ export default function NavBar() {
   ];
 
   const renderLink = (link: NavLinks) => (
-    <LinkContainer active={link.active}>
-    {/* Wrapper div for vertical centering */}
-    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1 }}>
-      <NoUnderlineLink href={link.path} $color='white'>
-        {link.name}
-      </NoUnderlineLink>
-    </div>
-    <hr
-      style={{
-        display: 'block',
-        width: '100%',
-        height: '4px',
-        backgroundColor: 'white',
-        border: 'none',
-        margin: 0, // Removing default margin from <hr>
-      }}
-    />
-  </LinkContainer>
+    <Styles.LinkContainer active={link.active}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          flex: 1,
+        }}
+      >
+        <Styles.NoUnderlineLink href={link.path} $color="white">
+          {link.name}
+        </Styles.NoUnderlineLink>
+      </div>
+
+      {link.active && (
+        <hr
+          style={{
+            display: 'block',
+            width: '100%',
+            height: '4px',
+            backgroundColor: 'white',
+            border: 'none',
+            margin: 0,
+          }}
+        />
+      )}
+    </Styles.LinkContainer>
   );
+
+  const currentPath = usePathname();
+  if (currentPath.includes('/onboarding')) {
+    return null;
+  }
+
   return (
-    <NavBarContainer>
-      <NavBarSectionDiv>
+    <Styles.NavBarContainer>
+      <Styles.NavBarSectionDiv>
         <Link href="/">
           <Icon type="logo" />
         </Link>
         {navllink.map(NavLinks => renderLink(NavLinks))}
-      </NavBarSectionDiv>
-      <NavBarSectionDiv>
-        <AuthButtons>{AuthButtonView}</AuthButtons>
-      </NavBarSectionDiv>
-    </NavBarContainer>
+      </Styles.NavBarSectionDiv>
+      <Styles.NavBarSectionDiv>
+        <Styles.AuthButtons>{AuthButtonView}</Styles.AuthButtons>
+      </Styles.NavBarSectionDiv>
+    </Styles.NavBarContainer>
   );
 }
diff --git a/src/components/NavBar/style.tsx b/src/components/NavBar/style.tsx
@@ -24,7 +24,7 @@ export const NavBarSectionDiv = styled.div`
 `;
 export const AuthButtons = styled.div`
   display: flex;
-  gap: 1.5625rem;
+  gap: 1rem;
   align-self: center;
   top: 0;
   right: 0;