From 126707e11b1e3b23d8049ffe743a202282dad874 Mon Sep 17 00:00:00 2001 From: kevin3656 Date: Thu, 16 May 2024 04:25:46 -0700 Subject: [PATCH] refactor:navbar login buttons updated --- src/app/settings/page.tsx | 3 +- src/components/Button.tsx | 89 -------------------------------- src/components/Buttons.tsx | 13 +++++ src/components/NavBar/index.tsx | 22 ++++---- src/components/ProfileButton.ts | 1 - src/components/SmallerButton.tsx | 62 ---------------------- 6 files changed, 24 insertions(+), 166 deletions(-) delete mode 100644 src/components/Button.tsx delete mode 100644 src/components/SmallerButton.tsx diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 693b9189..c4f8f9d5 100644 --- a/src/app/settings/page.tsx +++ b/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 ( - Back

Your Profile

diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 3ab81a7e..00000000 --- a/src/components/Button.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import Link from 'next/link'; -import styled, { css } from 'styled-components'; -import { sans } 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 }>` - ${sans.style} - appearance: none; - color: ${props => (props.$primaryColor ? 'white' : 'black')}; - background: ${props => (props.$primaryColor ? props.$primaryColor : 'white')}; - padding: 0.625rem 1.25rem; - 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: 600; - &:hover { - background: ${props => props.$secondaryColor}; - color: white; - border-color: ${props => props.$secondaryColor}; - } -`; - -const Button = styled.button` - ${ButtonStyles} -`; - -export const LinkButton = styled(Link)` - ${ButtonStyles} - text-decoration: none; -`; -const SmallButtonStyles = css<{ - $primaryColor?: string; - $secondaryColor: string; - $fontColor?: string; -}>` - ${sans.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}; - } -`; -export const SmallerButton = styled.button` - ${SmallButtonStyles} -`; -export const SmallLinkButton = styled(Link)` - ${SmallButtonStyles} - text-decoration: none; -`; - -export default Button; diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx index ae3247af..00a19a79 100644 --- a/src/components/Buttons.tsx +++ b/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, diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 64b54304..4b52c994 100644 --- a/src/components/NavBar/index.tsx +++ b/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 ( {profile.profileData?.first_name || 'Profile'} @@ -25,22 +24,21 @@ export default function NavBar() { return ( <> - Log In - - + Sign Up - + ); }, [profile]); diff --git a/src/components/ProfileButton.ts b/src/components/ProfileButton.ts index 98ba7971..c84c1d45 100644 --- a/src/components/ProfileButton.ts +++ b/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)` diff --git a/src/components/SmallerButton.tsx b/src/components/SmallerButton.tsx deleted file mode 100644 index fd846a97..00000000 --- a/src/components/SmallerButton.tsx +++ /dev/null @@ -1,62 +0,0 @@ -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;