fix styling

vesselapi · Dec 5, 2023 · 94269cc · 94269cc
1 parent 2021bb0
commit 94269cc
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git a/apps/nextjs/src/app/_components/Dropdown.tsx b/apps/nextjs/src/app/_components/Dropdown.tsx
@@ -6,19 +6,21 @@ import React, { Fragment } from 'react';
 const Dropdown = ({
   children,
   OpenButton,
+  openButtonClass,
   position = 'left',
   size = 'md',
   noHighlight = false,
 }: {
   children: ReactElement | ReactNode[];
   OpenButton: ReactElement;
+  openButtonClass?: string;
   position?: 'left' | 'right';
   size?: 'sm' | 'md' | 'lg';
   noHighlight?: boolean;
 }) => {
   return (
     <Menu as="div" className="relative inline-block">
-      <Menu.Button>{OpenButton}</Menu.Button>
+      <Menu.Button className={openButtonClass}>{OpenButton}</Menu.Button>
 
       <Transition
         as={Fragment}

diff --git a/apps/nextjs/src/app/_components/SideNav.tsx b/apps/nextjs/src/app/_components/SideNav.tsx
@@ -55,8 +55,8 @@ const SideNav = ({ children }: { children: ReactNode }) => {
     <div className="flex">
       <div className="bg-light-grey relative left-0 top-0 flex h-screen w-[220px] flex-col justify-between border-r-[1px] border-zinc-200 px-3 text-black">
         <div>
-          <div className="flex items-center justify-between px-2 py-3">
-            <div className="text-xs flex">
+          <div className="flex items-center justify-between py-3 pl-2">
+            <div className="text-sm flex">
               <Image
                 src="/vessel-icon.svg"
                 width={18}
@@ -66,7 +66,11 @@ const SideNav = ({ children }: { children: ReactNode }) => {
               />
               Vessel
             </div>
-            <Dropdown position="right" OpenButton={<UserIcon {...user} />}>
+            <Dropdown
+              position="right"
+              OpenButton={<UserIcon {...user} />}
+              openButtonClass="flex"
+            >
               {/* TODO(@zkirby): Enable dark mode */}
               {/* <Switch
                 checked={darkMode}
@@ -84,7 +88,7 @@ const SideNav = ({ children }: { children: ReactNode }) => {
               <SignOutButton className={'w-full text-left text-red-400'} />
             </Dropdown>
           </div>
-          <div className="mt-2">
+          <div className="mt-3">
             <NavItem
               route="/alerts"
               title="Alerts"

diff --git a/apps/nextjs/src/app/_components/UserIcon.tsx b/apps/nextjs/src/app/_components/UserIcon.tsx
@@ -31,13 +31,15 @@ const UserIcon = ({
     );
   } else if (imageUrl) {
     return (
-      <Image
-        className="flex items-center justify-center rounded-full bg-slate-500 text-slate-200 h-[20px] w-[20px] text-xxs object-cover border-2 border-white"
-        src={imageUrl}
-        alt={'user profile picture'}
-        width={20}
-        height={20}
-      />
+      <div>
+        <Image
+          className="rounded-full bg-slate-500 text-slate-200 h-[23px] w-[23px] text-xxs object-cover border-2 border-white"
+          src={imageUrl}
+          alt={'user profile picture'}
+          width={25}
+          height={25}
+        />
+      </div>
     );
   }
   return (

diff --git a/apps/nextjs/tailwind.config.ts b/apps/nextjs/tailwind.config.ts
@@ -44,11 +44,12 @@ export default {
       },
       /**
        * @Guidelines - Lean smaller, more compact sizes.
+       * @NOTE - xxxs, xxs, and xs have been bumped by 1px each.
        */
       fontSize: {
-        xxxs: '4px',
-        xxs: '8px',
-        xs: '12px',
+        xxxs: '5px',
+        xxs: '9px',
+        xs: '13px',
         sm: '14px',
         base: '16px',
         lg: '18px',