Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ddb657
feat(header-bar): reduce height and minor design changes
cooper-joe Nov 16, 2023
36fb3f3
test: adjust headerbar avatar height test
cooper-joe Nov 16, 2023
e0be963
chore: fix headerbar cypress tests
amcgee Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/header-bar/src/apps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -250,10 +250,10 @@ const Apps = ({ apps }) => {
outline: none;
}
button:hover {
background: #1a557f;
background: #104f7e;
}
button:active {
background: #104067;
background: #0d4168;
}

div {
Expand Down
4 changes: 2 additions & 2 deletions components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions ...ins_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})

Expand Down
6 changes: 3 additions & 3 deletions ...ar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions components/header-bar/src/header-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions components/header-bar/src/logo-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import css from 'styled-jsx/css'

const logoStyles = css.resolve`
svg {
height: 25px;
width: 27px;
height: 20px;
width: 22px;
}

img {
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions components/header-bar/src/logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
16 changes: 9 additions & 7 deletions components/header-bar/src/notification-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
16 changes: 9 additions & 7 deletions components/header-bar/src/online-status.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -41,7 +42,7 @@ export default css`
}

.info {
margin-right: ${spacers.dp16};
margin-right: ${spacers.dp12};
}

.info-dense {
Expand Down Expand Up @@ -85,7 +86,8 @@ export default css`
}
}

.label {
letter-spacing: 0.5px;
.label,
.info {
letter-spacing: 0.1px;
}
`
9 changes: 5 additions & 4 deletions components/header-bar/src/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -34,7 +35,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
avatarId={avatarId}
name={name}
dataTest="headerbar-profile-icon"
medium
small
/>
</button>

Expand Down Expand Up @@ -66,7 +67,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {

.headerbar-profile-btn {
background: transparent;
padding: 6px;
padding: ${spacers.dp8};
border: 0;
cursor: pointer;
}
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/header-bar/src/title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading