fix(menu): reintroduce profile menu styling

jwplayer · May 17, 2024 · 39fd840 · 39fd840
1 parent 9aa4a71
commit 39fd840
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 57 deletions.
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -1,6 +1,21 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
+@mixin divider-before($marginY, $marginX, $background-opacity) {
+  position: relative;
+  margin-top: $marginY;
+
+  &::before {
+    position: absolute;
+    top: calc(#{$marginY} * -0.5);
+    right: $marginX;
+    left: $marginX;
+    height: 1px;
+    background-color: rgba(variables.$white, $background-opacity);
+    content: '';
+  }
+}
+
 .popover {
   top: 10px;
 }
@@ -13,3 +28,37 @@
     margin-right: calc(#{variables.$base-spacing} / 2);
   }
 }
+
+.menuItems {
+  width: auto;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  > li > a {
+    padding: 0 18px;
+    font-size: 16px;
+  }
+}
+
+.divider {
+  @include divider-before(variables.$base-spacing, 0, 0.12);
+
+  &.small {
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  }
+}
+
+.sectionHeader {
+  width: 100%;
+  padding: 12px 0 12px 24px;
+  color: variables.$white;
+  font-weight: 700;
+  font-size: 12px;
+  text-transform: uppercase;
+  opacity: 0.7;
+
+  .menuItems + & {
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  }
+}
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
@@ -12,12 +12,11 @@ import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
 import type { Profile } from '@jwp/ott-common/types/profiles';
 
+import styles from '../UserMenu/UserMenu.module.scss'; // TODO inherit styling
 import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
 import ProfileCircle from '../ProfileCircle/ProfileCircle';
 
-import styles from './UserMenuNav.module.scss';
-
 type Props = {
   small?: boolean;
   focusable: boolean;