From 26c63fdefddd4029fcce95ad0708409e4642d687 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 1 May 2024 13:15:41 +0200
Subject: [PATCH 1/2] fix(menu): reintroduce profile menu styling

---
 .../components/UserMenu/UserMenu.module.scss  | 49 +++++++++++++++++
 .../UserMenuNav/UserMenuNav.module.scss       | 55 -------------------
 .../components/UserMenuNav/UserMenuNav.tsx    |  3 +-
 3 files changed, 50 insertions(+), 57 deletions(-)
 delete mode 100644 packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss

diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
index 096f619ca..24c78503d 100644
--- 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
deleted file mode 100644
index 9c8daf45c..000000000
--- a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@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: '';
-  }
-}
-
-.menuItems {
-  width: auto;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  > li > a {
-    padding: 0 18px;
-    font-size: 16px;
-  }
-}
-
-.button {
-  margin-bottom: variables.$base-spacing;
-}
-
-.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.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
index 57b7f85f8..962ff8298 100644
--- 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;

From 0577f17c6baf39c8dc4c8a7d8da24f8dcacfe4cb Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 1 May 2024 15:53:55 +0200
Subject: [PATCH 2/2] chore: update snapshot

---
 .../UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
index f0a3fdc77..b971d187b 100644
--- a/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
+++ b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`<UserMenu> > renders and matches snapshot 1`] = `
 <div>
   <h2
-    class="_sectionHeader_e947a3"
+    class="_sectionHeader_457528"
   >
     nav.settings
   </h2>
   <ul
-    class="_menuItems_e947a3"
+    class="_menuItems_457528"
   >
     <li>
       <a
@@ -61,7 +61,7 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
       </a>
     </li>
     <li
-      class="_divider_e947a3"
+      class="_divider_457528"
     >
       <div
         class="_menuButton_91706b"