diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx index 2fcdc3051..830de33ea 100644 --- a/packages/webapp/src/components/Card/index.tsx +++ b/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 ( {children} diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss index 79a1f2ee9..c904e21b7 100644 --- a/packages/webapp/src/style/App.scss +++ b/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 { diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss index bbf9fcecb..b28c20f6f 100644 --- a/packages/webapp/src/style/_variables.scss +++ b/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 diff --git a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss index a4a200151..7dc0d9dcd 100644 --- a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss +++ b/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;