From c10e160e958db866746f8aadc82382034a669b2b Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Tue, 29 Oct 2024 18:39:31 -0400 Subject: [PATCH 1/6] Remove submission counter --- jsapp/js/components/header/mainHeader.component.tsx | 7 ------- .../js/components/header/mainHeaderBase.component.tsx | 1 - jsapp/scss/components/_kobo.navigation.scss | 11 ++--------- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx index ce100af12f..30d63085c5 100644 --- a/jsapp/js/components/header/mainHeader.component.tsx +++ b/jsapp/js/components/header/mainHeader.component.tsx @@ -156,13 +156,6 @@ const MainHeader = class MainHeader extends React.Component { )} - - {asset.has_deployment && - asset.deployment__submission_count !== null && ( - - {asset.deployment__submission_count} {t('submissions')} - - )} )} diff --git a/jsapp/js/components/header/mainHeaderBase.component.tsx b/jsapp/js/components/header/mainHeaderBase.component.tsx index 02cd06ff5b..98430d200f 100644 --- a/jsapp/js/components/header/mainHeaderBase.component.tsx +++ b/jsapp/js/components/header/mainHeaderBase.component.tsx @@ -4,7 +4,6 @@ import bem, {makeBem} from 'js/bem'; bem.MainHeader = makeBem(null, 'main-header', 'header'); bem.MainHeader__icon = makeBem(bem.MainHeader, 'icon'); bem.MainHeader__title = makeBem(bem.MainHeader, 'title'); -bem.MainHeader__counter = makeBem(bem.MainHeader, 'counter'); interface MainHeaderBaseProps { children: React.ReactNode; diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss index 9999d3786f..a0a37e2655 100644 --- a/jsapp/scss/components/_kobo.navigation.scss +++ b/jsapp/scss/components/_kobo.navigation.scss @@ -247,7 +247,7 @@ // On smaller screens we hide both of them .main-header .main-header__icon, -.main-header .main-header__counter { +.main-header { display: none; } @@ -304,20 +304,13 @@ } } - .main-header__counter { - font-size: variables.$base-font-size; - margin-right: 20px; - color: colors.$kobo-gray-500; - } -} - .git-rev { display: none; } @include breakpoints.breakpoint(mediumAndUp) { .main-header .main-header__icon, - .main-header .main-header__counter { + .main-header { display: initial; } From ec34c6a68afd4c301a934a1c7433d401af787771 Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Tue, 29 Oct 2024 18:53:26 -0400 Subject: [PATCH 2/6] Missing brance and basic component --- jsapp/js/components/header/mainHeader.component.tsx | 3 +++ .../js/components/header/organizationBadge.component.tsx | 8 ++++++++ jsapp/scss/components/_kobo.navigation.scss | 2 +- 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 jsapp/js/components/header/organizationBadge.component.tsx diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx index 30d63085c5..de0da88a45 100644 --- a/jsapp/js/components/header/mainHeader.component.tsx +++ b/jsapp/js/components/header/mainHeader.component.tsx @@ -27,6 +27,7 @@ import GitRev from './gitRev.component'; import pageState from 'js/pageState.store'; import styles from './mainHeader.module.scss'; import Button from 'js/components/common/button'; +import OrganizationBadge from './organizationBadge.component'; interface MainHeaderProps extends WithRouterProps { assetUid: string | null; @@ -156,6 +157,8 @@ const MainHeader = class MainHeader extends React.Component { )} + + )} diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx new file mode 100644 index 0000000000..5709118504 --- /dev/null +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +export default function OrganizationBadge() { + + return ( +

UNHCR Turkey

+ ); +} diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss index a0a37e2655..50e0010ed9 100644 --- a/jsapp/scss/components/_kobo.navigation.scss +++ b/jsapp/scss/components/_kobo.navigation.scss @@ -303,7 +303,7 @@ } } } - +} .git-rev { display: none; } From c735fb614c84ccaee557eb5e21a2de78e9b7a706 Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Wed, 30 Oct 2024 14:20:12 -0400 Subject: [PATCH 3/6] Basic CSS --- .../header/organizationBadge.component.tsx | 4 ++-- .../components/header/organizationBadge.module.scss | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 jsapp/js/components/header/organizationBadge.module.scss diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx index 5709118504..ead5f54b83 100644 --- a/jsapp/js/components/header/organizationBadge.component.tsx +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -1,8 +1,8 @@ import React from 'react'; +import styles from './organizationBadge.module.scss'; export default function OrganizationBadge() { - return ( -

UNHCR Turkey

+
UNHCR TURKEY
); } diff --git a/jsapp/js/components/header/organizationBadge.module.scss b/jsapp/js/components/header/organizationBadge.module.scss new file mode 100644 index 0000000000..c79bb8315b --- /dev/null +++ b/jsapp/js/components/header/organizationBadge.module.scss @@ -0,0 +1,12 @@ +@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: 1em; + line-height: 12px; + margin-right: 20px; +} From e548597d84a8e62951d7e572b6019ea1256d8219 Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Wed, 30 Oct 2024 14:47:28 -0400 Subject: [PATCH 4/6] Hooking up mock backend --- .../js/components/header/mainHeader.component.tsx | 4 ++-- .../header/organizationBadge.component.tsx | 14 ++++++++++---- .../header/organizationBadge.module.scss | 2 +- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx index de0da88a45..0345744578 100644 --- a/jsapp/js/components/header/mainHeader.component.tsx +++ b/jsapp/js/components/header/mainHeader.component.tsx @@ -157,11 +157,11 @@ const MainHeader = class MainHeader extends React.Component { )} - - )} + + {!isLoggedIn && this.renderLoginButton()} diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx index ead5f54b83..3c2e32c6f5 100644 --- a/jsapp/js/components/header/organizationBadge.component.tsx +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -1,8 +1,14 @@ -import React from 'react'; import styles from './organizationBadge.module.scss'; +import {useOrganizationQuery} from 'jsapp/js/account/stripe.api'; export default function OrganizationBadge() { - return ( -
UNHCR TURKEY
- ); + const orgQuery = useOrganizationQuery(); + + if (orgQuery.data?.is_mmo) { + return ( +
{orgQuery.data.name.toUpperCase()}
+ ); + } else { + return null; + } } diff --git a/jsapp/js/components/header/organizationBadge.module.scss b/jsapp/js/components/header/organizationBadge.module.scss index c79bb8315b..3bfd60dc1b 100644 --- a/jsapp/js/components/header/organizationBadge.module.scss +++ b/jsapp/js/components/header/organizationBadge.module.scss @@ -6,7 +6,7 @@ padding: 6px 10px; border-radius: 48px; font-weight: 600; - font-size: 1em; + font-size: .85em; line-height: 12px; margin-right: 20px; } From d0dfb7f44c7370f596c1efb4abff04eb2c7f4aaa Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Wed, 30 Oct 2024 15:01:12 -0400 Subject: [PATCH 5/6] Cleanup --- jsapp/js/components/header/mainHeader.component.tsx | 2 +- jsapp/js/components/header/organizationBadge.component.tsx | 2 +- jsapp/scss/components/_kobo.navigation.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx index 0345744578..0402382025 100644 --- a/jsapp/js/components/header/mainHeader.component.tsx +++ b/jsapp/js/components/header/mainHeader.component.tsx @@ -27,7 +27,7 @@ import GitRev from './gitRev.component'; import pageState from 'js/pageState.store'; import styles from './mainHeader.module.scss'; import Button from 'js/components/common/button'; -import OrganizationBadge from './organizationBadge.component'; +import OrganizationBadge from 'js/components/header/organizationBadge.component'; interface MainHeaderProps extends WithRouterProps { assetUid: string | null; diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx index 3c2e32c6f5..6247492547 100644 --- a/jsapp/js/components/header/organizationBadge.component.tsx +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -1,5 +1,5 @@ -import styles from './organizationBadge.module.scss'; import {useOrganizationQuery} from 'jsapp/js/account/stripe.api'; +import styles from './organizationBadge.module.scss'; export default function OrganizationBadge() { const orgQuery = useOrganizationQuery(); diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss index 50e0010ed9..89e7a5dfc6 100644 --- a/jsapp/scss/components/_kobo.navigation.scss +++ b/jsapp/scss/components/_kobo.navigation.scss @@ -304,6 +304,7 @@ } } } + .git-rev { display: none; } From dffed1efd2fa614f521d8ece2cd4abf6eeee042d Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Thu, 31 Oct 2024 14:58:14 -0400 Subject: [PATCH 6/6] Add todo comment --- jsapp/js/components/header/organizationBadge.component.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx index 6247492547..b7fd7e6512 100644 --- a/jsapp/js/components/header/organizationBadge.component.tsx +++ b/jsapp/js/components/header/organizationBadge.component.tsx @@ -2,6 +2,9 @@ import {useOrganizationQuery} from 'jsapp/js/account/stripe.api'; import styles from './organizationBadge.module.scss'; export default function OrganizationBadge() { + // 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) {