wip

packages/webapp/src/components/PageForm/PageFormBigNumber.tsx

@@ -1,23 +1,19 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 import { CLASSES } from '@/constants/classes';
-
-import '@/style/components/BigAmount.scss';
+import styles from '@/style/components/BigAmount.module.scss';
 
 interface PageFormBigNumberProps {
   label: string;
   amount: string | number;
 }
-export function PageFormBigNumber({
-  label,
-  amount,
-}: PageFormBigNumberProps) {
+export function PageFormBigNumber({ label, amount }: PageFormBigNumberProps) {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-      <div class="big-amount">
-        <span class="big-amount__label">{label}</span>
-        <h1 class="big-amount__number">{amount}</h1>
+    <div className={clsx(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+      <div className={clsx(styles.root)}>
+        <span className={clsx(styles.label)}>{label}</span>
+        <h1 className={clsx(styles.number)}>{amount}</h1>
       </div>
     </div>
   );

packages/webapp/src/style/_variables.scss

@@ -103,6 +103,7 @@ $ns: bp4;
   --color-datatable-no-results-text: #777;
   --color-datatable-caret: #b5b5b5;
   --color-datatable-caret-hover: #7d8593;
+  --color-datatable-checkbox-border: #C5CBD3;
 
   // Datatable - Empty status
   --color-datatable-empty-status-title: #2c3a5d;
@@ -391,6 +392,7 @@ body.bp4-dark  {
   --color-datatable-no-results-text: rgba(255, 255, 255, 0.5);
   --color-datatable-caret: rgba(255, 255, 255, 0.25);
   --color-datatable-caret-hover: rgba(255, 255, 255, 0.25);
+  --color-datatable-checkbox-border: rgba(255, 255, 255, 0.3);
 
   // Datatable - Empty status
   --color-datatable-empty-status-title: var(--color-light-gray4);

packages/webapp/src/style/components/BigAmount.module.scss

@@ -0,0 +1,29 @@
+
+.root{
+  --x-color-amount-text: #343463;
+  --x-color-label-text: #5d6f90;
+
+  :global(.bp4-dark) & {
+    --x-color-label-text: rgba(255, 255, 255, 0.7);
+    --x-color-amount-text: rgba(255, 255, 255, 0.9);
+  }
+  text-align: right;
+}
+
+.label{
+  color: var(--x-color-label-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.number{
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  margin-top: 6px;
+  color: var(--x-color-amount-text);
+  line-height: 1;
+  font-size: 34px;
+}

packages/webapp/src/style/components/BigAmount.scss

@@ -1,28 +0,0 @@
-
-.big-amount{
-  --x-color-amount-text: #343463;
-  --x-color-label-text: #5d6f90;
-
-  :global(.bp4-dark) & {
-    --x-color-label-text: var(--color-light-gray1);
-    --x-color-amount-text: var(--color-light-gray2);
-  }
-  text-align: right;
-
-  &__label{
-    color: var(--x-color-label-text);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 14px;
-  }
-  &__number{
-    margin: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 500;
-    margin-top: 6px;
-    color: var(--x-color-amount-text);
-    line-height: 1;
-    font-size: 34px;
-  }
-}

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -100,7 +100,6 @@
       .bp4-control {
         margin-bottom: 0;
       }
-
       .resizer {
         display: inline-block;
         background: transparent;
@@ -134,11 +133,8 @@
           width: 15px;
         }
       }
-
-      .bp4-control.bp4-checkbox
-        input:not(:checked):not(:indeterminate)
-        ~ .bp4-control-indicator {
-        // box-shadow: inset 0 0 0 1px #c5cbd3;
+      .bp4-control.bp4-checkbox input:not(:checked):not(:indeterminate) ~ .bp4-control-indicator{
+        box-shadow: inset 0 0 0 1px var(--color-datatable-checkbox-border);
       }
 
       .skeleton {

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

@@ -126,6 +126,14 @@
     flex-direction: column;
   }
 
+  &__head-organization {
+    .bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal) {
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: 0 0 0
+    }
+  }
+
   &-menu {
     background: transparent;
     padding: 0;
@@ -269,7 +277,6 @@
       .ScrollbarsCustom-Scroller {
         overflow: hidden !important;
       }
-
       &:hover {
         min-width: 190px;