three dots icon and layout fixes

City-of-Helsinki · May 29, 2024 · 60178e7 · 60178e7
1 parent 0261d0e
commit 60178e7
Show file tree

Hide file tree

Showing 4 changed files with 517 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "foundation-sites": "6.5.3",
+    "hds-react": "^3.8.0",
     "history": "^4.9.0",
     "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.4",

diff --git a/src/components/topNavigation/TopNavigation.js b/src/components/topNavigation/TopNavigation.js
@@ -3,6 +3,7 @@ import React, {Component} from 'react';
 import classNames from 'classnames';
 import {withRouter} from 'react-router';
 import {Link} from 'react-router-dom';
+import {IconMenuDots} from 'hds-react';
 
 import {ActionTypes, AppConsumer} from '$src/app/AppContext';
 import MainMenuIcon from '../icons/MainMenuIcon';
@@ -209,7 +210,7 @@ class TopNavigation extends Component<Props, State> {
 
                 <div className="username-wrapper">
                   <p className="username">
-                    {username} <button onClick={toggleDisplayUserGroups}><InfoIcon className="user-group-icon" /></button>
+                    User Name <button className={"user-group-button"} onClick={toggleDisplayUserGroups}><IconMenuDots color="white" size="xs" /></button>
                   </p>
                   <button className='logout-link' onClick={handleLogout}>Kirjaudu ulos</button>
                 </div>

diff --git a/src/components/topNavigation/_top-navigation.scss b/src/components/topNavigation/_top-navigation.scss
@@ -73,30 +73,34 @@
 
   &__right-wrapper {
     display: flex;
-    align-items: center;
-
+
     .username-wrapper {
       line-height: 1;
       margin-left: 20px;
       text-align: right;
 
       .username {
-        line-height: 1;
-        margin: 0;
+        display: flex;
         font-weight: 500;
         font-size: rem-calc(16px);
-
-        .user-group-icon g {
-          fill: #0078C0;
+        margin-bottom: 0;
+
+        .user-group-button {
+          height: rem-calc(24px);
+          width: rem-calc(24px);
+          padding: rem-calc(2px);
+          border-radius: 50%;
+          margin-left: rem-calc(5px);
+          background-color: #0078c0;
         }
-      }
 
+      }
       .logout-link {
-        line-height: 1;
         color: $blue;
         font-weight: $semibold;
         font-size: rem-calc(16px);
         font-family: $font-family-helsinki-grotesk;
+        margin: 0;
         cursor: pointer;
 
         &:hover {
@@ -105,58 +109,63 @@
         }
       }
     }
-  }
 
-  .menuIcon, .userIcon, .flagIcon {
-    width: 27px;
-    height: 27px;
-    fill: $black;
-    cursor: pointer;
-  }
+    .menuIcon,
+    .userIcon,
+    .flagIcon {
+      width: 27px;
+      height: 27px;
+      fill: $black;
+      cursor: pointer;
+    }
 
-  .menuIcon:hover, .userIcon:hover {
-    fill: $blue;
-  }
+    .menuIcon:hover,
+    .userIcon:hover {
+      fill: $blue;
+    }
 
-  .menuIcon {
-    width: rem-calc(25px);
-    height: rem-calc(25px);
-    baseline-shift: rem-calc(10px);
-  }
+    .menuIcon {
+      width: rem-calc(25px);
+      height: rem-calc(25px);
+      baseline-shift: rem-calc(10px);
+    }
 
-  .search {
-    margin: 0 rem-calc(40px) 0 0;
-  }
+    .search {
+      margin: 0 rem-calc(40px) 0 0;
+    }
 
-  .flag {
-    position: relative;
-    margin: 0 rem-calc(60px) 0 0;
-  }
+    .flag {
+      position: relative;
+      margin: 0 rem-calc(60px) 0 0;
+    }
 
-  .user-service-unit {
-    border-right: 1px solid #ddd;
-    padding-right: 20px;
+    .user-service-unit {
+      border-right: 1px solid #ddd;
+      padding-right: 20px;
 
-    form {
-      min-width: 200px;
-    }
+      form {
+        min-width: 200px;
+        label {
+          display: inline;
 
-    .user-service-unit-text {
-      line-height: 1.25;
-      text-align: right;
-    }
+        }
+      }
 
-    .service-unit-label {
-      font-size: 0.8rem;
-      color: #666666;
-      font-weight: 400;
-    }
+      .user-service-unit-text {
+        line-height: 1.25;
+        text-align: right;
+      }
+
+      .service-unit-label {
+        font-size: 0.8rem;
+        color: #666666;
+        font-weight: 400;
+      }
 
-    .service-unit-name {
-      font-size: 0.85rem;
-      font-weight: 500;
+      .service-unit-name {
+        font-size: 0.85rem;
+        font-weight: 500;
+      }
     }
   }
-
-
 }