feat: sidebar items darkmode

packages/webapp/src/components/Card/index.tsx

@@ -1,8 +1,13 @@
-// @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
 
-export function Card({ className, style, children }) {
+interface CardProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function Card({ className, style, children }: CardProps) {
   return (
     <CardRoot className={className} style={style}>
       {children}

packages/webapp/src/style/App.scss

@@ -44,13 +44,16 @@
 @import 'pages/fonts';
 @import "section";
 
+body {
+  background-color: var(--color-app-body);
+  overflow: hidden;
+}
 // App
 .App {
   min-width: 1100px;
   min-height: 100vh;
   background-color: var(--color-app-background);
 }
-
 // =======
 
 body.hide-scrollbar .Pane2 {

packages/webapp/src/style/_variables.scss

@@ -60,6 +60,7 @@ $ns: bp4;
   --color-ui-menu-select-item-hover-background: #edeff2;
   --color-ui-menu-select-item-active-background: var(--color-primary);
 
+  --color-app-body: #fff;
   --color-app-background: #fff;
 
   // Splash screen.
@@ -114,6 +115,7 @@ $ns: bp4;
   --color-sidebar-background: #01115e;
   --color-sidebar-text: #fff;
   --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
+  
 
   // Sidebar - Items  
   --color-sidebar-menu-item-text: rgb(255, 255, 255);
@@ -345,6 +347,7 @@ body.bp4-dark  {
   --color-ui-menu-select-item-active-background: var(--color-primary);
 
   // App
+  --color-app-body: var(--color-dark-gray1);
   --color-app-background: var(--color-dark-gray1);
 
   // Splash screen.
@@ -406,11 +409,11 @@ body.bp4-dark  {
 
   // Sidebar - Items  
   --color-sidebar-menu-item-text: #ffff;
-  --color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-hover-background: var(--color-dark-gray4);
   --color-sidebar-menu-item-text-hover: #fff;
-  --color-sidebar-menu-item-active-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-active-background: var(--color-dark-gray4);
   --color-sidebar-menu-item-active-text: #fff;
-  --color-sidebar-menu-item-focus-background: #01143e;
+  --color-sidebar-menu-item-focus-background: var(--color-dark-gray5);
   --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
 
   // Sidebar overlay

packages/webapp/src/style/containers/Dashboard/Sidebar.scss

@@ -50,7 +50,6 @@
         opacity: $sidebar-logo-opacity;
       }
     }
-
     &-organization {
       .title {
         background: transparent;
@@ -148,8 +147,7 @@
       font-size: 15px;
       font-weight: 400;
 
-      &:hover,
-      &.bp4-active {
+      &:hover {
         background: var(--color-sidebar-menu-item-hover-background);
         color: var(--color-sidebar-menu-item-text-hover);
       }
@@ -157,7 +155,10 @@
       &:active {
         background: var(--color-sidebar-menu-item-focus-background);
       }
-
+      &.bp4-active.bp4-intent-primary {
+        background: var(--color-sidebar-menu-item-active-background);
+        color: var(--color-sidebar-menu-item-active-text);
+      }
       >.#{$ns}-icon {
         color: #767b9b;
         margin-right: 16px;