better dropdown handling on the main menu

packages/web/components/elements/DropdownElements.tsx

@@ -16,13 +16,12 @@ const StyledItem = styled(Item, {
   fontWeight: '400',
   py: '10px',
   px: '15px',
-  borderRadius: 3,
   cursor: 'default',
   color: '$utilityTextDefault',
 
   '&:focus': {
     outline: 'none',
-    backgroundColor: '$grayBgHover',
+    backgroundColor: '$thLeftMenuBackground',
   },
 })
 
@@ -32,7 +31,7 @@ const DropdownTrigger = styled(Trigger, {
   padding: 0,
   backgroundColor: 'transparent',
   '&:hover': {
-    opacity: 0.7,
+    opacity: 1.0,
   },
   '&:focus': {
     outline: 'none',
@@ -129,7 +128,7 @@ type DropdownProps = {
 export const DropdownSeparator = styled(Separator, {
   height: '1px',
   margin: 0,
-  backgroundColor: '$grayBorder',
+  backgroundColor: '$homeDivider',
 })
 
 type DropdownOptionProps = {

packages/web/components/templates/PrimaryDropdown.tsx

@@ -53,9 +53,10 @@ const TriggerButton = (props: TriggerButtonProps): JSX.Element => {
         alignItems: 'center',
         borderRadius: '5px',
         height: '32px',
-        padding: '5px',
+        px: '10px',
+        py: '20px',
         '&:hover': {
-          bg: '$thLibraryMenuFooterHover',
+          bg: '$thLeftMenuBackground',
           opacity: '0.7px',
         },
       }}
@@ -130,7 +131,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
       triggerElement={
         props.children ?? <TriggerButton name={viewerData?.me?.name} />
       }
-      css={{ width: '240px', ml: '15px' }}
+      css={{ width: '240px', ml: '15px', bg: '$thNavMenuFooter' }}
     >
       <HStack
         alignment="center"