diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index a9657642e..2c6400684 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/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 = {
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 2785f8a57..659df484f 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/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 ??
}
- css={{ width: '240px', ml: '15px' }}
+ css={{ width: '240px', ml: '15px', bg: '$thNavMenuFooter' }}
>