style: header

boomerang-io · Aug 17, 2022 · 8226b75 · 8226b75
1 parent c390fa3
commit 8226b75
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 31 deletions.
diff --git a/src/components/AboutPlatform/AboutPlatform.jsx b/src/components/AboutPlatform/AboutPlatform.jsx
@@ -24,7 +24,7 @@ const AboutPlatformContainer = ({ version, organization, isFlowApp }) => {
           <>
             <ModalHeader
               closeModal={closeModal}
-              label={`${organization} ${" "} | ${" "} version ${version}`}
+              label={`${organization} ${" "} | ${" "} Version ${version}`}
               title="About the Platform"
             />
             <ModalBody>

diff --git a/src/components/AboutPlatform/_aboutPlatform.scss b/src/components/AboutPlatform/_aboutPlatform.scss
@@ -31,11 +31,11 @@
 
   .#{$prefix}--bmrg-aboutPlatform-images {
     display: flex;
+    gap: 2rem;
   }
 
   .#{$prefix}--bmrg-aboutPlatform-images__img {
     height: 2rem;
-    margin-right: 2rem;
     width: auto;
   }
 }
diff --git a/src/components/PlatformNotifications/_platformNotifications.scss b/src/components/PlatformNotifications/_platformNotifications.scss
@@ -94,29 +94,30 @@
 }
 
 .#{$prefix}--bmrg-notification-content__creator {
-  color: #b9bfc7;
+  color: theme.$text-on-color;
   font-size: 0.75rem;
   font-weight: 500;
   height: 2.375rem;
   line-height: 0.9375rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.6875rem;
-  text-transform: capitalize;
+  opacity: 0.8;
   overflow: hidden;
+  padding-bottom: 0.6875rem;
+  padding-top: 0.75rem;
   text-overflow: ellipsis;
+  text-transform: capitalize;
   white-space: nowrap;
 }
 
 .#{$prefix}--bmrg-notification-content__title {
-  color: #fbfcfc;
+  color: theme.$text-on-color;
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.125rem;
   margin-bottom: 0.5rem;
 }
 
 .#{$prefix}--bmrg-notification-content__desc {
-  color: #b9bfc7;
+  color: theme.$text-on-color;
   display: block;
   font-size: 0.75rem;
   min-height: 2rem;
@@ -125,12 +126,13 @@
 }
 
 .#{$prefix}--bmrg-notification-content__date {
-  color: #878d96;
+  color: theme.$text-on-color;
   display: block;
   font-size: 0.75rem;
   height: 0.9375rem;
   line-height: 0.9375rem;
   margin-top: utils.rem(10px);
+  opacity: 0.8;
 }
 .#{$prefix}--bmrg-notification-content__close {
   background: none;
@@ -178,9 +180,9 @@
 }
 
 .#{$prefix}--bmrg-notifications-empty__no-news {
-  color: #fbfcfc;
+  color: theme.$text-on-color;
   font-size: utils.rem(14px);
-  font-weight: 300;
+  font-weight: 400;
   line-height: utils.rem(18px);
   margin: 0rem;
   margin-bottom: 1rem;

diff --git a/src/components/UIShell/UIShell.stories.jsx b/src/components/UIShell/UIShell.stories.jsx
@@ -208,10 +208,10 @@ export const WithCarbonSidenavAndReactRouter = () => {
 };
 
 WithCarbonSidenavAndReactRouter.story = {
-  name: "with Carbon sidenav and React Router ",
+  name: "Carbon Sidenav + React Router ",
 };
 
-export const WithRightPanel = () => {
+export const RightPanel = () => {
   mock.onGet(`${BASE_URL}/users/consents`).reply(200, PRIVACY_DATA);
   mock.onPost(`${BASE_URL}/support/contact`).reply(200);
   return (
@@ -285,9 +285,6 @@ export const WithRightPanel = () => {
   );
 };
 
-WithRightPanel.story = {
-  name: "with right panel",
-};
 
 export const UserNotConsented = () => {
   mock.onGet(`${BASE_URL}/users/consents`).reply(200, PRIVACY_DATA);
@@ -341,10 +338,6 @@ export const UserNotConsented = () => {
   );
 };
 
-UserNotConsented.story = {
-  name: "user not consented",
-};
-
 export const UserPendingDeletion = () => {
   mock.onGet(`${BASE_URL}/users/consents`).reply(200, PRIVACY_DATA);
   return (
@@ -397,15 +390,8 @@ export const UserPendingDeletion = () => {
   );
 };
 
-UserPendingDeletion.story = {
-  name: "user pending deletion",
-};
 
-export const WithoutProps = () => {
+export const EmptyState = () => {
   mock.onGet(`${BASE_URL}/users/consents`).reply(200, PRIVACY_DATA);
   return <UIShell />;
 };
-
-WithoutProps.story = {
-  name: "without props",
-};
diff --git a/src/components/UserRequests/_userRequests.scss b/src/components/UserRequests/_userRequests.scss
@@ -1,21 +1,21 @@
 @use '@carbon/themes/scss/tokens' as theme;
+@use '../../styles/themes/shell-tokens' as shell;
 @use "../../styles/config" as *;
 
 .#{$prefix}--bmrg-requests__title {
-  color: theme.$text-on-color;
+  color: shell.$bmrg-header-active-text-color;
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.125rem;
   margin-left: 1rem;
 
   &.#{$prefix}--bmrg-requests-empty__title {
-    color: theme.$text-placeholder;
     font-weight: initial;
   }
 }
 
 .#{$prefix}--bmrg-requests__text {
-  color: theme.$text-on-color;
+  color: shell.$bmrg-header-active-text-color;
   font-size: 0.825rem;
   line-height: 1.125rem;
   margin-left: 1rem;