feat(header-bar): reduce height and minor design changes

dhis2 · Nov 16, 2023 · 2ddb657 · 2ddb657
1 parent a7c1306
commit 2ddb657
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 33 deletions.
diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
@@ -237,7 +237,7 @@ const Apps = ({ apps }) => {
                 button {
                     display: block;
                     background: transparent;
-                    padding: ${spacers.dp4} ${spacers.dp12} 0;
+                    padding: ${spacers.dp4} ${spacers.dp8} 0;
                     border: 0;
                     cursor: pointer;
                     height: 100%;
@@ -250,10 +250,10 @@ const Apps = ({ apps }) => {
                     outline: none;
                 }
                 button:hover {
-                    background: #1a557f;
+                    background: #104f7e;
                 }
                 button:active {
-                    background: #104067;
+                    background: #0d4168;
                 }
 
                 div {

diff --git a/components/header-bar/src/header-bar.js b/components/header-bar/src/header-bar.js
@@ -114,9 +114,9 @@ export const HeaderBar = ({
                         flex-direction: row;
                         align-items: center;
                         justify-content: space-between;
-                        background-color: #2c6693;
+                        background-color: #165c92;
                         color: ${colors.white};
-                        height: 48px;
+                        height: 40px;
                     }
                     .right-control-spacer {
                         margin-left: auto;

diff --git a/components/header-bar/src/logo-image.js b/components/header-bar/src/logo-image.js
@@ -5,8 +5,8 @@ import css from 'styled-jsx/css'
 
 const logoStyles = css.resolve`
     svg {
-        height: 25px;
-        width: 27px;
+        height: 20px;
+        width: 22px;
     }
 
     img {
@@ -56,9 +56,9 @@ export const LogoImage = () => {
             <style jsx>{`
                 div {
                     padding: 4px;
-                    min-width: 48px;
+                    min-width: 40px;
                     max-width: 250px;
-                    height: 48px;
+                    height: 40px;
 
                     display: flex;
                     justify-content: center;

diff --git a/components/header-bar/src/logo.js b/components/header-bar/src/logo.js
@@ -14,13 +14,13 @@ export const Logo = () => {
             <style jsx>{`
                 div {
                     box-sizing: border-box;
-                    min-width: 49px;
-                    max-height: 48px;
-                    margin: 0 12px 0 0;
+                    min-width: 41px;
+                    max-height: 40px;
+                    margin: 0 8px 0 0;
                     border-right: 1px solid rgba(32, 32, 32, 0.15);
                 }
                 div:hover {
-                    background-color: #1a557f;
+                    background-color: #104f7e;
                 }
 
                 a,

diff --git a/components/header-bar/src/notification-icon.js b/components/header-bar/src/notification-icon.js
@@ -22,7 +22,7 @@ export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
                 position: relative;
                 margin: 0;
                 cursor: pointer;
-                padding: 0 ${spacers.dp12};
+                padding: 0 ${spacers.dp8};
                 height: 100%;
                 display: flex;
                 align-items: center;
@@ -35,10 +35,10 @@ export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
                 outline: none;
             }
             a:hover {
-                background: #1a557f;
+                background: #104f7e;
             }
             a:active {
-                background: #104067;
+                background: #0d4168;
             }
             span {
                 display: flex;
@@ -48,15 +48,17 @@ export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
                 position: absolute;
                 top: 3px;
                 right: 2px;
-                min-width: 18px;
-                min-height: 18px;
+                min-width: 16px;
+                min-height: 16px;
                 border-radius: ${spacers.dp12};
                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
                     0 1px 2px 0 rgba(0, 0, 0, 0.06);
                 background-color: ${theme.secondary500};
+                border: 1px solid ${theme.secondary700};
                 color: ${colors.white};
-                font-size: 13px;
-                font-weight: 600;
+                text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+                font-size: 12px;
+                font-weight: 500;
                 line-height: 15px;
                 text-align: center;
                 cursor: inherit;

diff --git a/components/header-bar/src/online-status.styles.js b/components/header-bar/src/online-status.styles.js
@@ -6,16 +6,17 @@ export default css`
         display: flex;
         align-items: center;
         justify-content: center; // new
-        background-color: #104167;
+        background-color: #10436a;
         flex-shrink: 0; // ?
-        color: ${colors.grey100};
+        color: ${colors.grey050};
+        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
     }
 
     .container.badge {
         margin-right: ${spacers.dp8};
-        padding: ${spacers.dp8};
+        padding: 6px;
         border-radius: 5px;
-        font-size: 14px;
+        font-size: 13px;
     }
 
     .container.bar {
@@ -41,7 +42,7 @@ export default css`
     }
 
     .info {
-        margin-right: ${spacers.dp16};
+        margin-right: ${spacers.dp12};
     }
 
     .info-dense {
@@ -85,7 +86,8 @@ export default css`
         }
     }
 
-    .label {
-        letter-spacing: 0.5px;
+    .label,
+    .info {
+        letter-spacing: 0.1px;
     }
 `
diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
@@ -1,4 +1,5 @@
 import { UserAvatar } from '@dhis2-ui/user-avatar'
+import { spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { useCallback, useRef, useState } from 'react'
 import { DebugInfoModal } from './debug-info/debug-info-modal.js'
@@ -34,7 +35,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
                     avatarId={avatarId}
                     name={name}
                     dataTest="headerbar-profile-icon"
-                    medium
+                    small
                 />
             </button>
 
@@ -66,7 +67,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
 
                 .headerbar-profile-btn {
                     background: transparent;
-                    padding: 6px;
+                    padding: ${spacers.dp8};
                     border: 0;
                     cursor: pointer;
                 }
@@ -78,10 +79,10 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
                     outline: none;
                 }
                 .headerbar-profile-btn:hover {
-                    background: #1a557f;
+                    background: #104f7e;
                 }
                 .headerbar-profile-btn:active {
-                    background: #104067;
+                    background: #0d4168;
                 }
             `}</style>
         </div>

diff --git a/components/header-bar/src/title.js b/components/header-bar/src/title.js
@@ -9,9 +9,9 @@ export const Title = ({ app, instance }) => (
             div {
                 overflow: hidden;
                 text-overflow: ellipsis;
-                font-size: 14px;
-                font-weight: 500;
+                font-size: 13px;
                 letter-spacing: 0.01em;
+                text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
                 white-space: nowrap;
             }
         `}</style>