From b74bb72fc92065b0a89c2d04aab88d9bc3e9e75c Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Oct 2022 10:32:18 +0200
Subject: [PATCH] change(ui) - note tag, user menu and settings menu fixes

---
 .../app/components/Header/SettingsMenu/SettingsMenu.tsx  | 2 +-
 frontend/app/components/Header/UserMenu/UserMenu.tsx     | 8 ++++----
 .../SessionListContainer/components/Notes/NoteItem.tsx   | 9 +++++----
 frontend/app/styles/main.css                             | 8 ++++++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
index 6e9096109..1b4fa446d 100644
--- a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
+++ b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
@@ -56,7 +56,7 @@ export default withRouter(SettingsMenu);
 function MenuItem({ onClick, label, icon }: any) {
   return (
     <div
-      className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
+      className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border hover-teal"
       onClick={onClick}
     >
       <Icon name={icon} size="16" />
diff --git a/frontend/app/components/Header/UserMenu/UserMenu.tsx b/frontend/app/components/Header/UserMenu/UserMenu.tsx
index 9c5fac9cb..3e74f63e9 100644
--- a/frontend/app/components/Header/UserMenu/UserMenu.tsx
+++ b/frontend/app/components/Header/UserMenu/UserMenu.tsx
@@ -27,11 +27,11 @@ function UserMenu(props: RouteComponentProps<Props>) {
       className={cn(className, 'absolute right-0 top-0 bg-white border mt-14')}
     >
       <div className="flex items-start p-3 border-b border-dashed">
-        <div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center mr-2 color-white shrink-0">
+        <div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center mr-2 color-white shrink-0 uppercase">
           {getInitials(account.name)}
         </div>
         <div className="overflow-hidden leading-8">
-          <div className="color-teal font-medium leading-none">{account.name}</div>
+          <div className="color-teal font-medium leading-none capitalize">{account.name}</div>
           <div className="overflow-hidden whitespace-nowrap color-gray-medium text-ellipsis">
             {account.email}
           </div>
@@ -42,14 +42,14 @@ function UserMenu(props: RouteComponentProps<Props>) {
       </div>
       <div className="p-2">
         <div
-          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
+          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border hover-teal"
           onClick={onAccountClick}
         >
           <Icon name="user-circle" size="16" />
           <button className="ml-2">{'Account'}</button>
         </div>
         <div
-          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
+          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border hover-teal"
           onClick={onLogoutClick}
         >
           <Icon name="door-closed" size="16" />
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index 60e8c30c2..17efa2747 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -63,11 +63,12 @@ function NoteItem(props: Props) {
                 style={{
                   // @ts-ignore
                   background: tagProps[props.note.tag],
-                  userSelect: 'none',
-                  width: 50,
-                  fontSize: 11,
+                  // userSelect: 'none',
+                  // width: 'fit-content',
+                  // fontSize: 11,
+                  padding: '1px 6px',
                 }}
-                className="rounded-full px-2 py-1 text-white flex items-center justify-center"
+                className="rounded-full text-white text-xs select-none w-fit"
               >
                 {props.note.tag}
               </div>
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index ec1b0c528..83550cad6 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -125,6 +125,14 @@
   }
 }
 
+.hover-teal:hover {
+  background-color: $active-blue;
+  color: $teal;
+  & svg {
+    fill: $teal;
+  }
+}
+
 .note-hover {
   border: solid thin transparent;
   &:hover {