From da507d4d5c5414b6aae979b0527eeced549a2484 Mon Sep 17 00:00:00 2001
From: Michael Van De Walle <michael.vdwalle@dropsolid.com>
Date: Wed, 18 Dec 2024 16:07:11 +0100
Subject: [PATCH] SPOS-541: Add styling profile dropdown

---
 CHANGELOG.md                                  |  1 +
 gent_base.theme                               |  2 +-
 source/package-lock.json                      |  7 ++---
 .../31-molecules/oidc-menu/_oidc-menu.scss    | 29 +++++++++++++++----
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16c0281a9..2f2a02ba8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All Notable changes to `StadGent/drupal_theme_gent-base`.
 ### Added
 
 - DMD09LEAFL-4: Add css for leaflet maps.
+- SPOS-541: Add styling profile dropdown
 
 ## [6.x]
 
diff --git a/gent_base.theme b/gent_base.theme
index 063a612f8..bb0b71b37 100644
--- a/gent_base.theme
+++ b/gent_base.theme
@@ -1071,7 +1071,7 @@ function gent_base_preprocess_oidc_menu_anonymous(&$variables) {
 function gent_base_preprocess_oidc_menu_authenticated(&$variables) {
   $variables['logout_link']->getUrl()->mergeOptions([
     'attributes' => [
-      'class' => ['button', 'button-small', 'button-primary'],
+      'class' => ['button', 'button-primary', 'icon-sign-out', 'icon-left'],
     ],
   ]);
 
diff --git a/source/package-lock.json b/source/package-lock.json
index 103ebcac3..0b6646441 100644
--- a/source/package-lock.json
+++ b/source/package-lock.json
@@ -3152,11 +3152,10 @@
       }
     },
     "node_modules/gent_styleguide": {
-      "version": "6.0.0-beta34",
-      "resolved": "https://registry.npmjs.org/gent_styleguide/-/gent_styleguide-6.0.0-beta34.tgz",
-      "integrity": "sha512-EGNwKRrZyJ4nJDGl15IV26wYLLfuw88WnBStISvIO7xvI1urgFy8kQflfX7uV/nvt0KPms2ISy8kAgAuzivybw==",
+      "version": "6.0.0-beta35",
+      "resolved": "https://registry.npmjs.org/gent_styleguide/-/gent_styleguide-6.0.0-beta35.tgz",
+      "integrity": "sha512-yAHi6cfaNvFduBwMq6l+sNW2pxBba4jpR6+k4M7HcWdlomSbIwkogXCFM1fQ15bukTo9C9peRL+3SMXK/ViGrw==",
       "hasInstallScript": true,
-      "license": "GPL-2.0",
       "dependencies": {
         "@digipolis-gent/modal": "^1.0.4",
         "acorn": "^8.8.2",
diff --git a/source/sass/31-molecules/oidc-menu/_oidc-menu.scss b/source/sass/31-molecules/oidc-menu/_oidc-menu.scss
index b5373c5ec..b1877e2cd 100644
--- a/source/sass/31-molecules/oidc-menu/_oidc-menu.scss
+++ b/source/sass/31-molecules/oidc-menu/_oidc-menu.scss
@@ -4,7 +4,7 @@
 
 .oidc-menu--wrapper {
   display: flex;
-  position: relative;
+  position: static;
   justify-content: flex-end;
 
   .avatar {
@@ -89,8 +89,7 @@
     @include theme('background-color', 'color-none');
 
     position: absolute;
-    top: 100%;
-    right: 0;
+    top: calc(100% - 40px);
     width: calc(100vw - 2 * #{$gutter-width});
     max-width: $bp-mobile;
     margin-top: .5rem;
@@ -98,13 +97,21 @@
     border-radius: border-radius('radius-1');
     box-shadow: 0 0 20px 0 rgba(color('gray-medium'), 0.25);
     z-index: 6;
+
+    @media (max-width: 400px) {
+      left: -20px;
+      right: -20px;
+      width: calc(100vw + 40px);
+      max-width: 400px;
+      box-shadow: 0 10px 10px 0 rgba(color('gray-medium'), 0.25);
+    }
   }
 
   .content {
     padding: 1.2rem;
 
     h2 {
-      @extend %h3;
+      @extend %h4;
     }
 
     > h2 {
@@ -126,18 +133,28 @@
 
       .links {
         margin: 0;
+
+        a {
+          font-size: .8rem;
+        }
       }
     }
 
     .profile {
       display: flex;
-      padding-bottom: 20px;
+      padding-bottom: 25px;
       border-top: 0;
 
       &-info {
         span {
+          @include bold-text;
+
           display: block;
-          font-size: .7rem;
+          font-size: .9rem;
+        }
+
+        a {
+          font-size: .8rem;
         }
       }