From 799a80350bee7560eca00631ce1330ace515ebf6 Mon Sep 17 00:00:00 2001 From: jonrxu Date: Sun, 13 Oct 2024 14:31:39 -0400 Subject: [PATCH] fix(styling): navigation + buttons --- .../components/dashboard/DashboardHeader.tsx | 13 +- .../components/dashboard/EmptyDashboard.tsx | 8 +- frontend/components/form/StatusBar.tsx | 6 +- frontend/components/header/Header.tsx | 2 +- frontend/components/styles/Buttons.tsx | 39 +++-- frontend/components/styles/Nav.tsx | 137 ++++++++---------- frontend/components/styles/sizes.ts | 2 +- frontend/tailwind.config.js | 6 +- 8 files changed, 109 insertions(+), 104 deletions(-) diff --git a/frontend/components/dashboard/DashboardHeader.tsx b/frontend/components/dashboard/DashboardHeader.tsx index 5d5b21cb..9cf3e39f 100644 --- a/frontend/components/dashboard/DashboardHeader.tsx +++ b/frontend/components/dashboard/DashboardHeader.tsx @@ -42,11 +42,16 @@ export const DashboardHeader = ({ : CREATE_POLL_ROUTE } > - - - + + diff --git a/frontend/components/dashboard/EmptyDashboard.tsx b/frontend/components/dashboard/EmptyDashboard.tsx index a952437c..149f1c15 100644 --- a/frontend/components/dashboard/EmptyDashboard.tsx +++ b/frontend/components/dashboard/EmptyDashboard.tsx @@ -27,10 +27,10 @@ const EmptyDashboard = ({ page }: { page: PageType }) => { Looks like you're new here.

- Penn Mobile Portal allows organizations to connect and engage with - students on the Penn Mobile app. Make posts for recruiting, events, - or campaigns and watch in real time as users see and interact with - your content. + Penn Portal allows organizations to connect and engage with students + on the Penn Mobile app. Make posts for recruiting, events, or + campaigns and watch in real time as users see and interact with your + content. Ready to get started? diff --git a/frontend/components/form/StatusBar.tsx b/frontend/components/form/StatusBar.tsx index 3949534b..548d2a57 100644 --- a/frontend/components/form/StatusBar.tsx +++ b/frontend/components/form/StatusBar.tsx @@ -43,7 +43,11 @@ const StatusBar = ({ status }: iStatusBarProps) => { return ( <> - + diff --git a/frontend/components/header/Header.tsx b/frontend/components/header/Header.tsx index bb65b893..f5952170 100644 --- a/frontend/components/header/Header.tsx +++ b/frontend/components/header/Header.tsx @@ -4,7 +4,7 @@ import Head from 'next/head' const Header = () => ( <> - Penn Mobile Portal + Portal ` - border-width: 0; - background-color: ${(props) => - props.active ? colors.MEDIUM_BLUE : colors.LIGHTER_GRAY}; - color: ${(props) => props.active && 'white'}; - border-radius: 100px; - padding: 0.25rem 1rem; - outline: none; +export const ToggleOption = React.forwardRef< + HTMLButtonElement, + { active: boolean } & React.ButtonHTMLAttributes +>(({ active, className, ...props }, ref) => ( +