fix(styling): navigation + buttons

pennlabs · Oct 13, 2024 · 799a803 · 799a803
1 parent 819d971
commit 799a803
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 104 deletions.
diff --git a/frontend/components/dashboard/DashboardHeader.tsx b/frontend/components/dashboard/DashboardHeader.tsx
@@ -42,11 +42,16 @@ export const DashboardHeader = ({
               : CREATE_POLL_ROUTE
           }
         >
-          <a>
-            <Button color={colors.GREEN} round style={{ margin: '0 0 0 1rem' }}>
+          <Button
+            className="flex items-center justify-center"
+            color={colors.GREEN}
+            round
+            style={{ margin: '0 0 0 1rem' }}
+          >
+            <span className="text-base font-work-sans text-nowrap">
               Create +
-            </Button>
-          </a>
+            </span>
+          </Button>
         </Link>
       </Group>
     </Row>

diff --git a/frontend/components/dashboard/EmptyDashboard.tsx b/frontend/components/dashboard/EmptyDashboard.tsx
@@ -27,10 +27,10 @@ const EmptyDashboard = ({ page }: { page: PageType }) => {
             Looks like you&apos;re new here.
             <br />
             <br />
-            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.
           </Text>
           <Text>
             Ready to get started?

diff --git a/frontend/components/form/StatusBar.tsx b/frontend/components/form/StatusBar.tsx
@@ -43,7 +43,11 @@ const StatusBar = ({ status }: iStatusBarProps) => {
 
   return (
     <>
-      <Group horizontal style={{ margin: '0 0.5rem' }}>
+      <Group
+        horizontal
+        className="flex items-center"
+        style={{ margin: '0 0.5rem' }}
+      >
         <IconCircle color={colors.MEDIUM_BLUE} />
         <StatusGroup compareStatus={Status.REVISION} />
         <StatusGroup compareStatus={Status.APPROVED} />

diff --git a/frontend/components/header/Header.tsx b/frontend/components/header/Header.tsx
@@ -4,7 +4,7 @@ import Head from 'next/head'
 const Header = () => (
   <>
     <Head>
-      <title>Penn Mobile Portal</title>
+      <title>Portal</title>
       <meta
         name="description"
         content="A web-based portal for organizations to reach Penn Mobile users."

diff --git a/frontend/components/styles/Buttons.tsx b/frontend/components/styles/Buttons.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import s from 'styled-components'
 
 import { colors } from '@/components/styles/colors'
@@ -44,20 +45,28 @@ export const Toggle = s.div`
   height: 2.5rem;
 `
 
-export const ToggleOption = s.button<{ active: boolean }>`
-  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<HTMLButtonElement>
+>(({ active, className, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={`
+      border-0
+      ${active ? 'bg-blue-500 text-white' : 'bg-neutral-100 text-gray-700'}
+      rounded-full
+      py-1 px-4
+      outline-none
+      hover:cursor-pointer
+      hover:opacity-80
+      transition-opacity
+      ${className || ''}
+    `}
+    {...props}
+  />
+))
 
-  &:hover {
-    cursor: pointer;
-    opacity: 0.7;
-  }
-`
+ToggleOption.displayName = 'ToggleOption'
 
 export const PostPollToggle = ({
   activeOption,
@@ -66,7 +75,7 @@ export const PostPollToggle = ({
   activeOption: PageType
   setActiveOption: React.Dispatch<React.SetStateAction<PageType>>
 }) => (
-  <Toggle style={{ verticalAlign: 'middle' }}>
+  <div className="flex items-center rounded-full bg-neutral-100 p-1.5 h-10 align-middle border shadow-sm shadow-neutral-50">
     <ToggleOption
       active={activeOption === PageType.POST}
       onClick={() => setActiveOption(PageType.POST)}
@@ -83,5 +92,5 @@ export const PostPollToggle = ({
         Polls
       </InlineText>
     </ToggleOption>
-  </Toggle>
+  </div>
 )
diff --git a/frontend/components/styles/Nav.tsx b/frontend/components/styles/Nav.tsx
@@ -1,69 +1,37 @@
 import React, { useContext } from 'react'
 import Image from 'next/image'
-import s from 'styled-components'
 import Link from 'next/link'
 
 import { AuthUserContext } from '@/utils/auth'
 import { User } from '@/utils/types'
-import { NAV_WIDTH } from '@/components/styles/sizes'
 import { colors } from '@/components/styles/colors'
-import { InlineText, Text } from '@/components/styles/Text'
-import { Icon } from '@/components/styles/Icons'
-import { Group } from '@/components/styles/Layout'
 import {
   ANALYTICS_ROUTE,
   DASHBOARD_ROUTE,
   SETTINGS_ROUTE,
 } from '@/utils/routes'
+import { useRouter } from 'next/router'
 
-const PROFILE_HEIGHT = '24vh'
-const PROFILE_PIC_SIZE = '4rem'
-
-const ProfileWrapper = s.div`
-  height: ${PROFILE_HEIGHT};
-  background-color: ${colors.NAV_PROFILE_BACKGROUND};
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-const ProfilePicWrapper = s.div`
-  border-radius: 50%;
-  background-color: ${colors.LIGHT_GRAY};
-  width: ${PROFILE_PIC_SIZE};
-  height: ${PROFILE_PIC_SIZE};
-  margin: 0 auto;
-`
+const iconSrcMap: { [key: string]: string } = {
+  dashboard: '/icons/dashboard.svg',
+  analytics: '/icons/analytics.svg',
+  settings: '/icons/settings.svg',
+}
 
 const Profile = ({ user }: { user: User }) => {
   return (
-    <ProfileWrapper>
-      <Group center>
-        <ProfilePicWrapper>
-          <InlineText bold heading style={{ lineHeight: PROFILE_PIC_SIZE }}>
-            {user.first_name[0].toUpperCase()}
-            {user.last_name[0].toUpperCase()}
-          </InlineText>
-        </ProfilePicWrapper>
-        <Text bold heading>
-          {user.first_name} {user.last_name}
-        </Text>
-      </Group>
-    </ProfileWrapper>
+    <div className="flex items-center gap-2 font-work-sans">
+      <div className="p-2 w-10 h-10 bg-gray-100 flex items-center justify-center rounded-full">
+        {user.first_name[0].toUpperCase()}
+        {user.last_name[0].toUpperCase()}
+      </div>
+      <div>
+        {user.first_name} {user.last_name}
+      </div>
+    </div>
   )
 }
 
-const NavItemWrapper = s.div`
-  display: flex;
-  cursor: pointer;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-  }
-`
-
 const NavItem = ({
   icon,
   title,
@@ -73,47 +41,62 @@ const NavItem = ({
   title: string
   link: string
 }) => {
+  const router = useRouter()
+  const isActive = router.pathname === link
+
   return (
     <Link href={link}>
-      <NavItemWrapper>
-        <Text heading>
-          <Icon name={icon} margin="auto 1rem 1px 0" />
+      <div
+        className={`flex gap-2 cursor-pointer items-center py-2 px-4 rounded-full border ${
+          isActive
+            ? 'bg-neutral-50 shadow-sm shadow-neutral-100'
+            : 'border-transparent'
+        }`}
+      >
+        <img
+          src={iconSrcMap[icon] || '/icons/dashboard.svg'}
+          alt={`${icon} icon`}
+          width={18}
+          height={18}
+          className={isActive ? 'text-blue-500' : 'text-gray-500'}
+        />
+        <span
+          className={`text-base font-work-sans ${
+            isActive ? 'text-blue-500' : 'text-neutral-500'
+          }`}
+        >
           {title}
-        </Text>
-      </NavItemWrapper>
+        </span>
+      </div>
     </Link>
   )
 }
 
-const NavWrapper = s.div`
-  width: ${NAV_WIDTH};
-  background-color: ${colors.NAV_BACKGROUND};
-  text-align: center;
-  min-height: 99vh;
-  position: absolute;
-`
-
 export const Nav = () => {
   const { user } = useContext(AuthUserContext)
 
   return (
-    <NavWrapper>
-      <h1 className="flex justify-center items-center gap-4">
-        <Image
-          src="/penn-mobile.svg"
-          alt="Penn Mobile"
-          width={26}
-          height={26}
-        />
-        <span className="hidden md:inline text-2xl font-medium">Portal</span>
-      </h1>
+    <div
+      className={`w-[12rem] bg-${colors.NAV_BACKGROUND} flex flex-col justify-between items-center min-h-screen fixed py-4`}
+    >
+      <div className="flex flex-initial flex-col gap-6 justify-center items-center">
+        <h1 className="flex justify-center items-center gap-4">
+          <Image
+            src="/penn-mobile.svg"
+            alt="Penn Mobile"
+            width={26}
+            height={26}
+          />
+          <span className="inline text-2xl font-medium">Portal</span>
+        </h1>
 
-      <Group center>
-        <NavItem icon="dashboard" title="Dashboard" link={DASHBOARD_ROUTE} />
-        <NavItem icon="analytics" title="Analytics" link={ANALYTICS_ROUTE} />
-        <NavItem icon="settings" title="Settings" link={SETTINGS_ROUTE} />
-      </Group>
-      {/* {user && <Profile user={user} />} */}
-    </NavWrapper>
+        <div className="flex flex-col gap-1">
+          <NavItem icon="dashboard" title="Dashboard" link={DASHBOARD_ROUTE} />
+          <NavItem icon="analytics" title="Analytics" link={ANALYTICS_ROUTE} />
+          <NavItem icon="settings" title="Settings" link={SETTINGS_ROUTE} />
+        </div>
+      </div>
+      {user && <Profile user={user} />}
+    </div>
   )
 }
diff --git a/frontend/components/styles/sizes.ts b/frontend/components/styles/sizes.ts
@@ -1,5 +1,5 @@
 export const NAV_HEIGHT = '4.25rem'
-export const NAV_WIDTH = '15%'
+export const NAV_WIDTH = '12rem'
 export const MAX_BODY_HEIGHT = `calc(100vh - ${NAV_HEIGHT})`
 
 export const DESKTOP = '1248px'

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -5,7 +5,11 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'work-sans': ['"Work Sans"', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
 }