explicit themes

spiffworkflow-frontend/src/App.tsx

@@ -46,6 +46,7 @@ export default function App() {
   }
 
   return (
+    <div className="cds--white">
       <ErrorContext.Provider value={errorContextValueArray}>
         <BrowserRouter>
           <NavigationBar />
@@ -69,5 +70,6 @@ export default function App() {
           </Content>
         </BrowserRouter>
       </ErrorContext.Provider>
+    </div>
   );
 }

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -124,7 +124,6 @@ export default function NavigationBar() {
   };
 
   if (activeKey) {
-    // TODO: apply theme g100 to the header
     return (
       <HeaderContainer
         render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (

spiffworkflow-frontend/src/index.scss

@@ -5,6 +5,11 @@
 // @include grid.flex-grid();
 
 // @use '@carbon/react/scss/colors';
-// .cds--header, a.cds--header__menu-item {
-//   background-color: colors.$gray-100;
-// }
+
+// site is mainly using white theme.
+// header is mainly using g100
+// mockup wanted white, not grey, text
+.cds--header, a.cds--header__menu-item {
+  // background-color: colors.$gray-100;
+  color: white;
+}