feat(organizations): add badge to profile dropdown TASK-979 (#5253)

### 🗒️ 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 `<type>(<scope>)<!>: <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

@@ -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;

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();

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.

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>
 

jsapp/js/components/header/mainHeader.module.scss

@@ -23,3 +23,8 @@
   margin-left: auto;
   position: relative;
 }
+
+.badgeWrapper {
+  padding-top: 2px;
+  margin-right: 20px;
+}

jsapp/js/components/header/organizationBadge.component.tsx

@@ -1,16 +1,22 @@
 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.
   const orgQuery = useOrganizationQuery();
 
   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;

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;
 }

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 {