wip darkmode

packages/webapp/src/components/Drawer/DrawerActionBar.module.scss

@@ -0,0 +1,22 @@
+
+
+.root {
+  --x-color-background: var(--color-white);
+  --x-color-background: transparent;
+
+  --x-color-border: var(--color-dark-gray1);
+  --x-color-border: rgba(255, 255, 255, 0.2);
+
+  &:global(.bp4-navbar){
+    background-color: var(--x-color-background);
+    box-shadow: 0 1px 0 var(--x-color-border);
+  }
+  &:global(.bp4-navbar),
+  :global(.bp4-navbar-group){
+    height: 45px;
+  }
+  :global(.bp4-navbar-divider){
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+}

packages/webapp/src/components/Drawer/DrawerActionsBar.tsx

@@ -1,13 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+import styles from './DrawerActionBar.module.scss';
 
-import { DashboardActionsBar } from '../Dashboard';
-
-export function DrawerActionsBar({ ...props }) {
-  return <DrawerActionsBarRoot {...props} />;
+export function DrawerActionsBar({ children, ...props }) {
+  return <Navbar className={styles.root}>{children}</Navbar>;
 }
-
-const DrawerActionsBarRoot = styled(DashboardActionsBar)`
-  border-bottom: 1px solid #d9d9da;
-`;

packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx

@@ -64,7 +64,10 @@ function SubTitle({ children }) {
 }
 
 const SubTitleHead = styled.div`
-  color: #666;
+  --x-color-text: #666;
+  --x-color-text: rgba(255, 255, 255, 0.6);
+
+  color: var(--x-color-text);
   font-size: 12px;
   font-weight: 400;
   line-height: 1;

packages/webapp/src/components/Drawer/DrawerMainTabs.tsx

@@ -18,24 +18,36 @@ export function DrawerMainTabs({ children, ...restProps }) {
 
 const DrawerMainTabsRoot = styled.div`
   .bp4-tabs {
+    --x-tab-list-background: #fff;
+    --x-tab-list-border: #e1e2e8;
+    --x-tab-item-text: #7f8596;
+
+    --x-tab-list-background: transparent;
+    --x-tab-list-border: rgba(255, 255, 255, 0.2);
+    --x-tab-item-text: var(--color-light-gray1);
+
+    --x-tab-item-height: 36px;
+
     .bp4-tab-list {
       position: relative;
-      background-color: #fff;
+      background-color: var(--x-tab-list-background);
       padding: 0 15px;
-      border-bottom: 2px solid #e1e2e8;
+      border-bottom: 2px solid var(--x-tab-list-border);
 
       > *:not(:last-child) {
         margin-right: 25px;
       }
-
+      .bp4-tab {
+        color: var(--x-tab-item-text);
+        line-height: var(--x-tab-item-height);
+      }
       &.bp4-large > .bp4-tab {
         font-size: 15px;
-        color: #7f8596;
         margin: 0 1rem;
 
         &[aria-selected='true'],
         &:not([aria-disabled='true']):hover {
-          color: #0052cc;
+          color: var(--color-primary);
         }
       }
       .bp4-tab-indicator-wrapper .bp4-tab-indicator {