From f07c031de7147aed9c098b21edd2227f424c74ef Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Tue, 3 Dec 2024 00:14:00 +0000 Subject: [PATCH] feat(organizations): add badge to profile dropdown TASK-979 (#5253) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 🗒️ Checklist 1. [x] run linter locally 2. [x] update all related docs (API, README, inline, etc.), if any 3. [x] draft PR with a title `(): TASK-1234` 4. [x] tag PR: at least `frontend` or `backend` unless it's global 5. [x] fill in the template below and delete template comments 6. [x] review thyself: read the diff and repro the preview as written 7. [x] open PR & confirm that CI passes 8. [x] request reviewers, if needed 9. [ ] delete this section before merging ### 📣 Summary <!-- Delete this section if changes are internal only. --> <!-- One sentence summary for the public changelog, worded for non-technical seasoned Kobo users. --> Add the organization badge to the profile dropdown. ### 📖 Description <!-- Delete this section if summary already said everything. --> <!-- Full description for the public changelog, worded for non-technical seasoned Kobo users. --> Tiny reshuffle of elements to make it match the designs. ### 👀 Preview steps <!-- Delete this section if behavior can't change. --> <!-- If behavior changes or merely may change, add a preview of a minimal happy path. --> 1. Have an MMO with some users in it 2. Ensure the feature flag `mmosEnabled` is true 3. While logged in with a user in an MMO, clicking the profile icon should show the organization badge (in blue) under the user's email --- jsapp/js/components/common/badge.module.scss | 5 +++++ jsapp/js/components/common/badge.tsx | 3 ++- jsapp/js/components/header/accountMenu.tsx | 3 +++ jsapp/js/components/header/mainHeader.component.tsx | 4 +++- jsapp/js/components/header/mainHeader.module.scss | 5 +++++ .../header/organizationBadge.component.tsx | 12 +++++++++--- .../components/header/organizationBadge.module.scss | 5 +---- jsapp/scss/components/_kobo.navigation.scss | 1 + 8 files changed, 29 insertions(+), 9 deletions(-) diff --git a/jsapp/js/components/common/badge.module.scss b/jsapp/js/components/common/badge.module.scss index 7c2943213b..c65c58eb7c 100644 --- a/jsapp/js/components/common/badge.module.scss +++ b/jsapp/js/components/common/badge.module.scss @@ -55,6 +55,11 @@ $badge-font-l: 14px; background-color: colors.$kobo-light-green; } +.color-dark-gray { + color: colors.$kobo-white; + background-color: colors.$kobo-gray-700; +} + @mixin badge-size($size, $font) { // NOTE: icon size is already handled by badge.tsx file rendering proper <Icon> component height: $size; diff --git a/jsapp/js/components/common/badge.tsx b/jsapp/js/components/common/badge.tsx index 5706ffb49d..0dcd85887b 100644 --- a/jsapp/js/components/common/badge.tsx +++ b/jsapp/js/components/common/badge.tsx @@ -11,7 +11,8 @@ export type BadgeColor = | 'light-blue' | 'light-red' | 'light-teal' - | 'light-green'; + | 'light-green' + | 'dark-gray'; export type BadgeSize = 'l' | 'm' | 's'; export const BadgeToIconMap: Map<BadgeSize, IconSize> = new Map(); diff --git a/jsapp/js/components/header/accountMenu.tsx b/jsapp/js/components/header/accountMenu.tsx index 66c94c6dc9..4532873a3b 100644 --- a/jsapp/js/components/header/accountMenu.tsx +++ b/jsapp/js/components/header/accountMenu.tsx @@ -12,6 +12,7 @@ import {ACCOUNT_ROUTES} from 'js/account/routes.constants'; import {isAnyRouteBlockerActive} from 'js/router/routerUtils'; import Button from 'js/components/common/button'; import Avatar from 'js/components/common/avatar'; +import OrganizationBadge from './organizationBadge.component'; /** * UI element that display things only for logged-in user. An avatar that gives @@ -96,6 +97,8 @@ export default function AccountMenu() { /> </bem.AccountBox__menuItem> + <OrganizationBadge color='light-blue'/> + {/* There is no UI we can show to a user who sees a router blocker, so we don't allow any in-app navigation. diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx index 1e27caae90..3c504ebdbd 100644 --- a/jsapp/js/components/header/mainHeader.component.tsx +++ b/jsapp/js/components/header/mainHeader.component.tsx @@ -161,7 +161,9 @@ const MainHeader = class MainHeader extends React.Component<MainHeaderProps> { )} <div className={styles.accountSection}> - <OrganizationBadge /> + <div className={styles.badgeWrapper}> + <OrganizationBadge color='dark-gray' /> + </div> <AccountMenu /> </div> diff --git a/jsapp/js/components/header/mainHeader.module.scss b/jsapp/js/components/header/mainHeader.module.scss index 18b8800d8d..e4b4813df5 100644 --- a/jsapp/js/components/header/mainHeader.module.scss +++ b/jsapp/js/components/header/mainHeader.module.scss @@ -23,3 +23,8 @@ margin-left: auto; position: relative; } + +.badgeWrapper { + padding-top: 2px; + margin-right: 20px; +} diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx index 534de9c5c3..98c2401a8f 100644 --- a/jsapp/js/components/header/organizationBadge.component.tsx +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -1,8 +1,12 @@ import {useOrganizationQuery} from 'js/account/organization/organizationQuery'; - +import Badge, {BadgeColor} from 'js/components/common/badge'; import styles from './organizationBadge.module.scss'; -export default function OrganizationBadge() { +interface OrganizationBadgeProps { + color: BadgeColor; +} + +export default function OrganizationBadge(props: OrganizationBadgeProps) { // TODO: move this logic to the parent component when we refactor it // into a functional component. OrganizationBadge should just be a // purely presentational component. @@ -10,7 +14,9 @@ export default function OrganizationBadge() { if (orgQuery.data?.is_mmo) { return ( - <div className={styles.root}>{orgQuery.data.name.toUpperCase()}</div> + <div className={styles.root}> + <Badge color={props.color} size='m' label={orgQuery.data.name.toUpperCase()} /> + </div> ); } else { return null; diff --git a/jsapp/js/components/header/organizationBadge.module.scss b/jsapp/js/components/header/organizationBadge.module.scss index 56948eec48..1e5dbb4c09 100644 --- a/jsapp/js/components/header/organizationBadge.module.scss +++ b/jsapp/js/components/header/organizationBadge.module.scss @@ -1,11 +1,8 @@ @use 'scss/colors'; .root { - color: colors.$kobo-white; - background-color: colors.$kobo-gray-700; - padding: 6px 10px; border-radius: 48px; font-weight: 600; font-size: .85em; - margin-right: 20px; + width: fit-content; } diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss index ba7fb22344..6cb45b0725 100644 --- a/jsapp/scss/components/_kobo.navigation.scss +++ b/jsapp/scss/components/_kobo.navigation.scss @@ -145,6 +145,7 @@ .account-box__menu-item--settings { text-align: right; + margin-top: 16px; } .account-box__menu-li {