From 2ddb65749dacaa7db8f4d4d6dfcd3b77eebb7351 Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Thu, 16 Nov 2023 12:51:02 +0100 Subject: [PATCH 1/3] feat(header-bar): reduce height and minor design changes --- components/header-bar/src/apps.js | 6 +++--- components/header-bar/src/header-bar.js | 4 ++-- components/header-bar/src/logo-image.js | 8 ++++---- components/header-bar/src/logo.js | 8 ++++---- components/header-bar/src/notification-icon.js | 16 +++++++++------- .../header-bar/src/online-status.styles.js | 16 +++++++++------- components/header-bar/src/profile.js | 9 +++++---- components/header-bar/src/title.js | 4 ++-- 8 files changed, 38 insertions(+), 33 deletions(-) diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js index ac5046baea..7b9789cb11 100755 --- 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 index 7b8051f98a..93def3e3b1 100755 --- 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 index ba6c129a68..7667c6cee5 100644 --- 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 = () => { diff --git a/components/header-bar/src/title.js b/components/header-bar/src/title.js index 3757714772..e2bc2e1209 100755 --- 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; } `} From 36fb3f336b28d139f8e31e52c3bb24d42b4e339f Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Thu, 16 Nov 2023 13:10:09 +0100 Subject: [PATCH 2/3] test: adjust headerbar avatar height test --- ...shows_a_text_icon_if_the_user_does_not_have_an_avatar.js | 6 +++--- ...aderbar_shows_an_image_icon_if_the_user_has_an_avatar.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js index 5acd429fab..bbe278891c 100644 --- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js +++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js @@ -8,12 +8,12 @@ Given( } ) -Then(`the headerbar contains a text icon of size 36px`, () => { +Then(`the headerbar contains a text icon of size 24px`, () => { cy.fixture('HeaderBar/me').then(() => { cy.get('[data-test="headerbar-profile-icon-text"]') .should('be.visible') - .and('have.css', 'height', '36px') - .and('have.css', 'width', '36px') + .and('have.css', 'height', '24px') + .and('have.css', 'width', '24px') }) }) diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js index 7acd78b39f..cccf629e8e 100644 --- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js +++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js @@ -4,11 +4,11 @@ Given('the HeaderBar loads without an error and the user has an avatar', () => { cy.visitStory('HeaderBarTesting', 'Me With Avatar') }) -Then('the headerbar contains an image icon of size 36px', () => { +Then('the headerbar contains an image icon of size 24px', () => { cy.get('[data-test="headerbar-profile-icon-image"]') .should('be.visible') - .and('have.css', 'height', '36px') - .and('have.css', 'width', '36px') + .and('have.css', 'height', '24px') + .and('have.css', 'width', '24px') }) When('the user clicks on the image icon', () => { From e0be96364b86b4d7246881ed29a56a0869ccdda9 Mon Sep 17 00:00:00 2001 From: Austin McGee <947888+amcgee@users.noreply.github.com> Date: Thu, 16 Nov 2023 22:36:06 +0400 Subject: [PATCH 3/3] chore: fix headerbar cypress tests --- .../features/the_headerbar_contains_a_profile_menu.feature | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature index 56d423a8ac..b7c5cf1910 100644 --- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature +++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature @@ -2,13 +2,13 @@ Feature: The HeaderBar contains a profile menu Scenario: The HeaderBar shows a text icon if the user does not have an avatar Given the HeaderBar loads without an error and the user does not have an avatar - Then the headerbar contains a text icon of size 36px + Then the headerbar contains a text icon of size 24px When the user clicks on the text icon Then the profile menu contains a text icon of size 48px Scenario: The HeaderBar shows an image icon if the user has an avatar Given the HeaderBar loads without an error and the user has an avatar - Then the headerbar contains an image icon of size 36px + Then the headerbar contains an image icon of size 24px When the user clicks on the image icon Then the profile menu contains an image icon of size 48px