From c1f4f3ca60c8edbd5f3c461a7869cf6286444650 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 12 Jul 2023 18:17:23 +0100
Subject: [PATCH] additional formatting

---
 src/app/components/portfolio/AddNew.tsx          | 10 ++++++----
 src/app/components/portfolio/Toolbar.tsx         |  7 ++++++-
 src/app/shadcn_components/ui/navigation-menu.tsx |  7 ++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/components/portfolio/AddNew.tsx b/src/app/components/portfolio/AddNew.tsx
index a294982..f036824 100644
--- a/src/app/components/portfolio/AddNew.tsx
+++ b/src/app/components/portfolio/AddNew.tsx
@@ -54,17 +54,19 @@ export default function AddNewDropDown({
 
   return (
     <NavigationMenuItem>
-      <NavigationMenuTrigger>Add New</NavigationMenuTrigger>
+      <NavigationMenuTrigger className="bg-gray-50">
+        Add New
+      </NavigationMenuTrigger>
       <NavigationMenuContent>
-        <ul className="p-6 md:w-[200px] lg:w-[350px] lg:grid-cols-[.75fr_1fr]">
+        <ul className="p-6 md:w-[200px] lg:w-[350px] lg:grid-cols-[.75fr_1fr] cursor-pointer">
           <ListItem onClick={handleCickAddUnit}>
-            <div className="font-medium items-center flex text-sm text-gray-900 justify-start hover:cursor-pointer">
+            <div className="font-medium items-center flex text-sm text-gray-900 justify-start">
               <PlusIcon className="h-4 w-4 mr-2" /> Add Unit
             </div>
           </ListItem>
 
           <ListItem onClick={handleClickUploadCSV}>
-            <div className="font-medium items-center flex text-sm text-gray-900 justify-start cursor-pointer">
+            <div className="font-medium items-center flex text-sm text-gray-900 justify-start">
               <TableCellsIcon className="h-4 w-4 mr-2" /> Upload CSV
             </div>
             Upload a csv of multiple units
diff --git a/src/app/components/portfolio/Toolbar.tsx b/src/app/components/portfolio/Toolbar.tsx
index 62bccb5..b2575dc 100644
--- a/src/app/components/portfolio/Toolbar.tsx
+++ b/src/app/components/portfolio/Toolbar.tsx
@@ -5,14 +5,18 @@ import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
 } from "@/app/shadcn_components/ui/navigation-menu";
 import AddNewDropDown from "./AddNew";
+import { cva } from "class-variance-authority";
 
 interface ToolbarProps {
   portfolioId: number;
 }
 
+const navigationMenuTriggerStyle = cva(
+  "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
+);
+
 export function Toolbar({ portfolioId }: ToolbarProps) {
   function handleClickSettings() {
     console.log("Settings were clicked, implement me");
@@ -24,6 +28,7 @@ export function Toolbar({ portfolioId }: ToolbarProps) {
           className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
           onClick={handleClickSettings}
         >
+          <Cog6ToothIcon className="h-4 w-4 mr-2" />
           Settings
         </NavigationMenuItem>
         <AddNewDropDown portfolioId={portfolioId} />
diff --git a/src/app/shadcn_components/ui/navigation-menu.tsx b/src/app/shadcn_components/ui/navigation-menu.tsx
index ba3dfb5..0cb661b 100644
--- a/src/app/shadcn_components/ui/navigation-menu.tsx
+++ b/src/app/shadcn_components/ui/navigation-menu.tsx
@@ -40,8 +40,13 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
+// Original style:
+// const navigationMenuTriggerStyle = cva(
+//   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+// );
+
 const navigationMenuTriggerStyle = cva(
-  "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
 );
 
 const NavigationMenuTrigger = React.forwardRef<