From bd2588e70d5fac0f2a8164fa5da0feb9934e07c2 Mon Sep 17 00:00:00 2001 From: kevin3656 Date: Thu, 18 Apr 2024 18:59:18 -0700 Subject: [PATCH] feat: Navbar updated for active links, added new SmallerButton on components --- src/app/(auth)/layout.tsx | 10 +- src/app/cases/page.tsx | 170 +++++++++++++++---------------- src/app/layout.tsx | 2 + src/app/page.tsx | 2 - src/components/NavBar/index.tsx | 81 ++++++++------- src/components/NavBar/style.tsx | 2 +- src/components/SmallerButton.tsx | 62 +++++++++++ 7 files changed, 197 insertions(+), 132 deletions(-) create mode 100644 src/components/SmallerButton.tsx diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx index a3614c8c..be814187 100644 --- 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 ( - <> - - - {children} - - + + {children} + ); } diff --git a/src/app/cases/page.tsx b/src/app/cases/page.tsx index cfadb22a..ea7fd383 100644 --- 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 ( - <> - - -
-

Browse Available Cases

- - setCaseFilters({ ...caseFilters, remote: v })} - /> - setCaseFilters({ ...caseFilters, role: v })} - /> - setCaseFilters({ ...caseFilters, languages: v })} - /> - setCaseFilters({ ...caseFilters, agency: v })} - /> - setCaseFilters({ ...caseFilters, countries: v })} - /> - resetFilters()}> - Reset Filters - - -
- - - - {filteredCases.length} listings found - - {filteredCases.length === 0 ? ( - No cases listed - ) : ( - <> - {filteredCases.map(c => ( - { - selectedCardRef.current = c.id; - setCaseInfo(c); - }} - /> - ))} - - )} - - - {caseInfo ? ( - - ) : ( - -

No cases listed

- - Check back later for more cases - - - )} - - - - + +
+

Browse Available Cases

+ + setCaseFilters({ ...caseFilters, remote: v })} + /> + setCaseFilters({ ...caseFilters, role: v })} + /> + setCaseFilters({ ...caseFilters, languages: v })} + /> + setCaseFilters({ ...caseFilters, agency: v })} + /> + setCaseFilters({ ...caseFilters, countries: v })} + /> + resetFilters()}> + Reset Filters + + +
+ + + + {filteredCases.length} listings found + + {filteredCases.length === 0 ? ( + No cases listed + ) : ( + <> + {filteredCases.map(c => ( + { + selectedCardRef.current = c.id; + setCaseInfo(c); + }} + /> + ))} + + )} + + + {caseInfo ? ( + + ) : ( + +

No cases listed

+ + Check back later for more cases + + + )} + + + ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c66a14e2..6ed3b279 100644 --- 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({ + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index c7fb8dcb..97e9481d 100644 --- 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 (
-
immigration justice project
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 5db91b8a..9ba8644c 100644 --- 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() { Log In Sign Up @@ -67,36 +63,51 @@ export default function NavBar() { ]; const renderLink = (link: NavLinks) => ( - - {/* Wrapper div for vertical centering */} -
- - {link.name} - -
-
- }} - /> - + +
+ + {link.name} + +
+ + {link.active && ( +
+ )} + ); + + const currentPath = usePathname(); + if (currentPath.includes('/onboarding')) { + return null; + } + return ( - - + + {navllink.map(NavLinks => renderLink(NavLinks))} - - - {AuthButtonView} - - + + + {AuthButtonView} + + ); } diff --git a/src/components/NavBar/style.tsx b/src/components/NavBar/style.tsx index 76568615..a7e73a18 100644 --- 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; diff --git a/src/components/SmallerButton.tsx b/src/components/SmallerButton.tsx new file mode 100644 index 00000000..fd846a97 --- /dev/null +++ b/src/components/SmallerButton.tsx @@ -0,0 +1,62 @@ +import styled, { css } from 'styled-components'; +import Link from 'next/link'; +import { openSans } from '@/styles/fonts'; + +/* + FOR PRIMARY BUTTON USAGE: + + Props: + $primaryColor (Required) - This color will determine the default background color of the button + $secondaryColor (Required) - This color will determine the border color and background color on hover + + Example: + + + FOR SECONDARY BUTTON USAGE: + + Props: + $primaryColor (Omit) - IMPORTANT: DO NOT PASS IN A primaryColor PROP!!! The background color will be white by default + $secondaryColor (Required) - This color will determine the border color and background color on hover + + Example: + + */ +const ButtonStyles = css<{ + $primaryColor?: string; + $secondaryColor: string; + $fontColor?: string; +}>` + ${openSans.style} + appearance: none; + color: ${props => props.$fontColor || 'black'}; + background: ${props => (props.$primaryColor ? props.$primaryColor : 'white')}; + padding: 0.25rem 0.75rem; + border-radius: 0.313rem; // 5px + border: 2px solid + ${props => + props.$primaryColor ? props.$primaryColor : props.$secondaryColor}; + cursor: pointer; + transition: 150ms ease-in-out; + font-size: 1rem; + font-weight: 500; + &:hover { + background: ${props => props.$secondaryColor}; + color: white; + border-color: ${props => props.$secondaryColor}; + } +`; + +const SmallerButton = styled.button` + ${ButtonStyles} +`; + +export const LinkButton = styled(Link)` + ${ButtonStyles} + text-decoration: none; +`; + +export default SmallerButton;