Fix dropdown styles

components/common/DropdownMenuContent/index.module.scss

@@ -1,10 +1,10 @@
-.Menu {
+.menu {
   transform-origin: --radix-dropdown-menu-content-transform-origin;
   background: var(--menu-bg);
   border-radius: 6px;
   box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
   box-sizing: border-box;
-  overflow: auto;
+  overflow: visible;
   width: 30vw;
   max-width: 180px;
   margin: 0 $unit-2x;
@@ -14,189 +14,3 @@
     min-width: 50vw;
   }
 }
-
-.MenuLabel {
-  color: var(--text-tertiary);
-  padding: $unit * 1.5 $unit * 1.5;
-  font-size: $font-small;
-  font-weight: $medium;
-}
-
-.MenuItem {
-  color: var(--text-tertiary);
-  font-weight: $normal;
-
-  @include breakpoint(phone) {
-    cursor: pointer;
-  }
-
-  &:hover:not(.disabled) {
-    background: var(--menu-bg-item-hover);
-    color: var(--text-primary);
-    cursor: pointer;
-
-    a {
-      color: var(--text-primary);
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &:visited {
-        color: var(--text-primary);
-      }
-    }
-
-    @include breakpoint(phone) {
-      background: inherit;
-      color: inherit;
-      cursor: default;
-
-      a {
-        color: inherit;
-      }
-    }
-  }
-
-  &.profile > div {
-    padding: 6px 12px;
-  }
-
-  &.language {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: $unit;
-    padding-right: $unit;
-
-    span {
-      flex-grow: 1;
-    }
-
-    .Switch {
-      $height: 24px;
-
-      background: $grey-60;
-      border-radius: calc($height / 2);
-      border: none;
-      position: relative;
-      width: 44px;
-      height: $height;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      .Thumb {
-        $diameter: 18px;
-
-        background: $grey-100;
-        border-radius: calc($diameter / 2);
-        display: block;
-        height: $diameter;
-        width: $diameter;
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        z-index: 3;
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        &[data-state='checked'] {
-          background: $grey-100;
-          left: 23px;
-        }
-      }
-
-      .left,
-      .right {
-        color: $grey-100;
-        font-size: 10px;
-        font-weight: $bold;
-        position: absolute;
-        z-index: 2;
-      }
-
-      .left {
-        top: 6px;
-        left: 6px;
-      }
-
-      .right {
-        top: 6px;
-        right: 5px;
-      }
-    }
-  }
-
-  & .destructive {
-    color: $error;
-
-    &:hover {
-      background: $error;
-      color: #fff;
-    }
-  }
-  a {
-    color: $grey-50;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:visited {
-      color: $grey-50;
-    }
-  }
-
-  & > a,
-  & > span {
-    display: block;
-    padding: 12px 12px;
-  }
-
-  & > div {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding: 10px 12px;
-
-    &:hover {
-      i.tag {
-        background: var(--tag-bg);
-        color: var(--tag-text);
-      }
-    }
-
-    span {
-      flex-grow: 1;
-    }
-
-    img {
-      $diameter: 32px;
-      border-radius: calc($diameter / 2);
-      height: $diameter;
-      width: $diameter;
-    }
-  }
-}
-
-.MenuGroup {
-  border-bottom: 1px solid var(--menu-separator);
-
-  &:first-child .MenuItem:first-child {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-  }
-
-  &:last-child .MenuItem:last-child {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-}

components/common/DropdownMenuContent/index.tsx

@@ -1,16 +1,14 @@
 import React, { PropsWithChildren } from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import classNames from 'classnames'
 
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+
 import styles from './index.module.scss'
 
 interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
 
 export const DropdownMenu = DropdownMenuPrimitive.Root
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-export const DropdownMenuLabel = DropdownMenuPrimitive.Label
-export const DropdownMenuItem = DropdownMenuPrimitive.Item
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group
 export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator
 
 export const DropdownMenuContent = React.forwardRef<HTMLDivElement, Props>(
@@ -19,7 +17,7 @@ export const DropdownMenuContent = React.forwardRef<HTMLDivElement, Props>(
     forwardedRef
   ) {
     const classes = classNames(props.className, {
-      Menu: true,
+      [styles.menu]: true,
     })
     return (
       <DropdownMenuPrimitive.Portal>

components/common/DropdownMenuGroup/index.module.scss

@@ -0,0 +1,17 @@
+.menuGroup {
+  border-bottom: 1px solid var(--menu-separator);
+
+  &:first-child > *:first-child {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  &:last-child > *:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}

components/common/DropdownMenuGroup/index.tsx

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import styles from './index.module.scss'
+
+interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
+
+export const DropdownMenuGroup = React.forwardRef<HTMLDivElement, Props>(
+  function dropdownMenuGroup(
+    { children }: PropsWithChildren<Props>,
+    forwardedRef
+  ) {
+    return (
+      <DropdownMenuPrimitive.Group
+        className={styles.menuGroup}
+        ref={forwardedRef}
+      >
+        {children}
+      </DropdownMenuPrimitive.Group>
+    )
+  }
+)
+
+export default DropdownMenuGroup

components/common/DropdownMenuItem/index.module.scss

@@ -0,0 +1,113 @@
+.menuItem {
+  color: var(--text-tertiary);
+  font-weight: $normal;
+
+  @include breakpoint(phone) {
+    cursor: pointer;
+  }
+
+  &:hover:not(.disabled) {
+    background: var(--menu-bg-item-hover);
+    color: var(--text-primary);
+    cursor: pointer;
+
+    a {
+      color: var(--text-primary);
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:visited {
+        color: var(--text-primary);
+      }
+    }
+
+    @include breakpoint(phone) {
+      background: inherit;
+      color: inherit;
+      cursor: default;
+
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  &.profile > div {
+    padding: 6px 12px;
+  }
+
+  &.language {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    padding-right: $unit;
+
+    span {
+      flex-grow: 1;
+    }
+  }
+
+  & .destructive {
+    color: $error;
+
+    &:hover {
+      background: $error;
+      color: #fff;
+    }
+  }
+  a {
+    color: $grey-50;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: $grey-50;
+    }
+  }
+
+  & > a,
+  & > span {
+    display: block;
+    padding: 12px 12px;
+  }
+
+  & > div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 12px;
+
+    &:hover {
+      i.tag {
+        background: var(--tag-bg);
+        color: var(--tag-text);
+      }
+    }
+
+    span {
+      flex-grow: 1;
+    }
+
+    img {
+      $diameter: 32px;
+      border-radius: calc($diameter / 2);
+      height: $diameter;
+      width: $diameter;
+    }
+  }
+
+  & i {
+    background: var(--tag-bg);
+    color: var(--tag-text);
+    border-radius: calc($unit / 2);
+    font-size: 10px;
+    font-weight: $bold;
+    padding: 4px 6px;
+    text-transform: uppercase;
+  }
+}

components/common/DropdownMenuItem/index.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import styles from './index.module.scss'
+
+interface Props extends DropdownMenuPrimitive.DropdownMenuItemProps {}
+
+export const DropdownMenuItem = React.forwardRef<HTMLDivElement, Props>(
+  function dropdownMenuItem(
+    { children, ...props }: PropsWithChildren<Props>,
+    forwardedRef
+  ) {
+    const classes = classNames(props.className, {
+      [styles.menuItem]: true,
+      [styles.language]: props.className?.includes('language'),
+    })
+
+    return (
+      <DropdownMenuPrimitive.Item
+        {...props}
+        className={classes}
+        ref={forwardedRef}
+      >
+        {children}
+      </DropdownMenuPrimitive.Item>
+    )
+  }
+)
+
+export default DropdownMenuItem

components/common/DropdownMenuLabel/index.module.scss

@@ -0,0 +1,6 @@
+.menuLabel {
+  color: var(--text-tertiary);
+  padding: $unit * 1.5 $unit * 1.5;
+  font-size: $font-small;
+  font-weight: $medium;
+}

components/common/DropdownMenuLabel/index.tsx

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import styles from './index.module.scss'
+
+interface Props extends DropdownMenuPrimitive.DropdownMenuLabelProps {}
+
+export const DropdownMenuLabel = React.forwardRef<HTMLDivElement, Props>(
+  function dropdownMenuItem(
+    { children, ...props }: PropsWithChildren<Props>,
+    forwardedRef
+  ) {
+    return (
+      <DropdownMenuPrimitive.Label
+        {...props}
+        className={styles.menuLabel}
+        ref={forwardedRef}
+      >
+        {children}
+      </DropdownMenuPrimitive.Label>
+    )
+  }
+)
+
+export default DropdownMenuLabel