chore: fix settings menu styles (#4923)

* fix: styles for settings menu * fix: styles for settings menu
cowprotocol · Sep 30, 2024 · 533eeec · 533eeec
1 parent 2f2f572
commit 533eeec
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/libs/ui/src/pure/MenuBar/index.tsx b/libs/ui/src/pure/MenuBar/index.tsx
@@ -580,7 +580,7 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
       {isOpen &&
         (mobileMode ? (
           <MobileDropdownContainer mobileMode={mobileMode} ref={ref as React.RefObject<HTMLDivElement>}>
-            <DropdownContent isOpen={true} alignRight={true} mobileMode={mobileMode} ref={ref}>
+            <DropdownContent isOpen={true} alignRight={true} mobileMode={mobileMode}>
               {settingsNavItems.map((item, index) => {
                 const to = item.external
                   ? appendUtmParams(item.href!, item.utmSource, item.utmContent, rootDomain, item.external, item.label)
@@ -598,9 +598,9 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
                 )
 
                 return (
-                  <DropdownContentItemButton key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
+                  <StyledDropdownContentItem key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
                     {to ? <LinkComponent href={to}>{content}</LinkComponent> : <div>{content}</div>}
-                  </DropdownContentItemButton>
+                  </StyledDropdownContentItem>
                 )
               })}
             </DropdownContent>
@@ -622,9 +622,9 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
               )
 
               return (
-                <DropdownContentItemButton key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
+                <StyledDropdownContentItem key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
                   {to ? <LinkComponent href={to}>{content}</LinkComponent> : <div>{content}</div>}
-                </DropdownContentItemButton>
+                </StyledDropdownContentItem>
               )
             })}
           </DropdownContent>

diff --git a/libs/ui/src/pure/MenuBar/styled.ts b/libs/ui/src/pure/MenuBar/styled.ts
@@ -252,6 +252,7 @@ export const DropdownContent = styled.ul<DropdownContentProps>`
   backdrop-filter: blur(var(--blur));
   z-index: 1000;
   padding: ${({ isThirdLevel }) => (isThirdLevel ? '6px' : '6px')};
+  margin: 0;
   width: ${({ isThirdLevel }) => (isThirdLevel ? '100%' : '320px')};
   height: auto;
   border-radius: 28px;
@@ -328,7 +329,8 @@ export const MobileDropdownContainer = styled.div<{ mobileMode: boolean }>`
       scrollbar-color: var(--scrollbarColor) var(--scrollbarBackground);
       list-style: none;
 
-      > div {
+      > div,
+      > ul {
         width: 100%;
         position: relative;
         left: initial;
@@ -339,8 +341,6 @@ export const MobileDropdownContainer = styled.div<{ mobileMode: boolean }>`
         border-radius: 28px;
       }
 
-      /* For WebKit-based browsers (Chrome, Safari) */
-
       &::-webkit-scrollbar {
         width: 10px;
       }