From 6e27c1780d0d25b60b7d3a2e5c20f09cd76a9b23 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 9 May 2022 15:42:48 +0800
Subject: [PATCH] refactor(ui): refactor ui style foundations (#761)

refactor ui style foundations
`
---
 .../components/AppContent/index.module.scss   | 74 +++++--------------
 .../ui/src/components/AppContent/index.tsx    | 10 ++-
 .../ui/src/components/ConfirmModal/index.tsx  |  3 +-
 .../src/components/Drawer/index.module.scss   | 29 ++++++++
 packages/ui/src/components/Drawer/index.tsx   |  5 +-
 packages/ui/src/scss/_basic.scss              | 22 ++++++
 packages/ui/src/scss/_colors.scss             | 35 +++++++++
 packages/ui/src/scss/modal.module.scss        | 33 ---------
 8 files changed, 115 insertions(+), 96 deletions(-)
 create mode 100644 packages/ui/src/scss/_basic.scss
 create mode 100644 packages/ui/src/scss/_colors.scss

diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss
index 07e98cb90..b28d9b9b6 100644
--- a/packages/ui/src/components/AppContent/index.module.scss
+++ b/packages/ui/src/components/AppContent/index.module.scss
@@ -1,15 +1,24 @@
 @use '@/scss/underscore' as _;
+@use '@/scss/colors' as colors;
+@use '@/scss/basic' as basic;
 
 /* Foundation */
-$font-family: -apple-system,
-  system-ui,
-  'BlinkMacSystemFont',
-  'Segoe UI',
-  'Roboto',
-  'Helvetica Neue',
-  'Helvetica',
-  'Arial',
-  sans-serif;
+.light {
+  @include colors.light-theme;
+}
+
+.dark {
+  @include colors.dark-theme;
+}
+
+body {
+  @include colors.universal;
+  @include basic.fonts;
+  @include basic.layout;
+  background: var(--color-base);
+  color: var(--color-text);
+  font: var(--font-body);
+}
 
 .content {
   position: absolute;
@@ -18,51 +27,4 @@ $font-family: -apple-system,
   right: 0;
   min-height: 100%;
   background: var(--color-base);
-  color: var(--color-text);
-  font: var(--font-body);
-}
-
-.universal {
-  --radius: 8px;
-  --color-primary-button-text: #fff;
-}
-
-.light {
-  --color-text: #191c1d;
-  --color-icon: #747778;
-  --color-caption: #747778;
-  --color-outline: #78767f;
-  --color-border: #e0e3e3;
-  --color-disabled: #c4c7c7;
-  --color-primary: #5d34f2;
-  --color-layer: #eff1f1;
-  --color-error: #ba1b1b;
-  --color-toast: rgba(25, 28, 29, 80%);
-  --color-overlay: rgba(25, 28, 29, 16%);
-  --color-base: #fff;
-  --color-dialogue: #fff;
-}
-
-.dark {
-  --color-text: #f7f8f8;
-  --color-icon: #a9acac;
-  --color-caption: #a9acac;
-  --color-outline: #928f9a;
-  --color-border: #444748;
-  --color-disabled: #5c5f60;
-  --color-primary: #7958ff;
-  --color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
-  --color-error: #dd3730;
-  --color-toast: rgba(247, 248, 248, 80%);
-  --color-overlay: rgba(25, 28, 29, 40%);
-  --color-base: #191c1d;
-  --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
-}
-
-.mobile {
-  --font-title: 600 32px/40px #{$font-family};
-  --font-body-bold: 500 16px/20px #{$font-family};
-  --font-body: 400 16px/20px #{$font-family};
-  --font-body-small: 500 14px/18px #{$font-family};
-  --font-caption: 400 14px/18px #{$font-family};
 }
diff --git a/packages/ui/src/components/AppContent/index.tsx b/packages/ui/src/components/AppContent/index.tsx
index 7be394a02..877ab17d2 100644
--- a/packages/ui/src/components/AppContent/index.tsx
+++ b/packages/ui/src/components/AppContent/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactNode, useCallback, useContext } from 'react';
+import React, { ReactNode, useEffect, useCallback, useContext } from 'react';
 import { useDebouncedLoader } from 'use-debounced-loader';
 
 import LoadingLayer from '@/components/LoadingLayer';
@@ -23,8 +23,14 @@ const AppContent = ({ children }: Props) => {
     setToast('');
   }, [setToast]);
 
+  useEffect(() => {
+    document.body.classList.remove(styles.light ?? '');
+    document.body.classList.remove(styles.dark ?? '');
+    document.body.classList.add(styles[theme] ?? '');
+  }, [theme]);
+
   return (
-    <main className={classNames(styles.content, styles.universal, styles.mobile, styles[theme])}>
+    <main className={classNames(styles.content, styles[theme])}>
       {children}
       <Toast message={toast} isVisible={Boolean(toast)} callback={hideToast} />
       {debouncedLoading && <LoadingLayer />}
diff --git a/packages/ui/src/components/ConfirmModal/index.tsx b/packages/ui/src/components/ConfirmModal/index.tsx
index 09d731e49..16426f8e3 100644
--- a/packages/ui/src/components/ConfirmModal/index.tsx
+++ b/packages/ui/src/components/ConfirmModal/index.tsx
@@ -35,8 +35,7 @@ const ConfirmModal = ({
       isOpen={isOpen}
       className={classNames(modalStyles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      parentSelector={() => document.querySelector('main') ?? document.body}
-      ariaHideApp={false}
+      appElement={document.querySelector('main') ?? undefined}
       onAfterOpen={() => {
         document.body.classList.add('static');
       }}
diff --git a/packages/ui/src/components/Drawer/index.module.scss b/packages/ui/src/components/Drawer/index.module.scss
index c3bdbddd4..1c0ed4958 100644
--- a/packages/ui/src/components/Drawer/index.module.scss
+++ b/packages/ui/src/components/Drawer/index.module.scss
@@ -17,3 +17,32 @@
 .closeIcon {
   fill: var(--color-icon);
 }
+
+.drawer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 411px;
+  outline: none;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+:global {
+  .ReactModal__Content[role='popup'] {
+    transform: translateY(100%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .ReactModal__Content--after-open[role='popup'] {
+    transform: translateY(0);
+  }
+
+  .ReactModal__Content--before-close[role='popup'] {
+    transform: translateY(100%);
+  }
+}
+/* stylelint-enable selector-class-pattern */
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
index d77b9333b..31ab3a368 100644
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@@ -20,10 +20,9 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
       shouldCloseOnOverlayClick
       role="popup"
       isOpen={isOpen}
-      className={classNames(modalStyles.drawer, className)}
+      className={classNames(styles.drawer, className)}
       overlayClassName={modalStyles.overlay}
-      parentSelector={() => document.querySelector('main') ?? document.body}
-      appElement={document.querySelector('main') ?? document.body}
+      appElement={document.querySelector('main') ?? undefined}
       closeTimeoutMS={300}
       onRequestClose={onClose}
       onAfterOpen={() => {
diff --git a/packages/ui/src/scss/_basic.scss b/packages/ui/src/scss/_basic.scss
new file mode 100644
index 000000000..aed87afde
--- /dev/null
+++ b/packages/ui/src/scss/_basic.scss
@@ -0,0 +1,22 @@
+/* Foundation */
+$font-family: -apple-system,
+  system-ui,
+  'BlinkMacSystemFont',
+  'Segoe UI',
+  'Roboto',
+  'Helvetica Neue',
+  'Helvetica',
+  'Arial',
+  sans-serif;
+
+@mixin fonts {
+  --font-title: 600 32px/40px #{$font-family};
+  --font-body-bold: 500 16px/20px #{$font-family};
+  --font-body: 400 16px/20px #{$font-family};
+  --font-body-small: 500 14px/18px #{$font-family};
+  --font-caption: 400 14px/18px #{$font-family};
+}
+
+@mixin layout {
+  --radius: 8px;
+}
diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss
new file mode 100644
index 000000000..dd04da37f
--- /dev/null
+++ b/packages/ui/src/scss/_colors.scss
@@ -0,0 +1,35 @@
+@mixin light-theme {
+  --color-text: #191c1d;
+  --color-icon: #747778;
+  --color-caption: #747778;
+  --color-outline: #78767f;
+  --color-border: #e0e3e3;
+  --color-disabled: #c4c7c7;
+  --color-primary: #5d34f2;
+  --color-layer: #eff1f1;
+  --color-error: #ba1b1b;
+  --color-toast: rgba(25, 28, 29, 80%);
+  --color-overlay: rgba(25, 28, 29, 16%);
+  --color-base: #fff;
+  --color-dialogue: #fff;
+}
+
+@mixin dark-theme {
+  --color-text: #f7f8f8;
+  --color-icon: #a9acac;
+  --color-caption: #a9acac;
+  --color-outline: #928f9a;
+  --color-border: #444748;
+  --color-disabled: #5c5f60;
+  --color-primary: #7958ff;
+  --color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
+  --color-error: #dd3730;
+  --color-toast: rgba(247, 248, 248, 80%);
+  --color-overlay: rgba(25, 28, 29, 40%);
+  --color-base: #191c1d;
+  --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
+}
+
+@mixin universal {
+  --color-primary-button-text: #fff;
+}
diff --git a/packages/ui/src/scss/modal.module.scss b/packages/ui/src/scss/modal.module.scss
index 9d51b2cfa..139e89ea3 100644
--- a/packages/ui/src/scss/modal.module.scss
+++ b/packages/ui/src/scss/modal.module.scss
@@ -7,41 +7,8 @@
   outline: none;
 }
 
-.drawer {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  max-height: 411px;
-  outline: none;
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
 .overlay {
   position: fixed;
   background: var(--color-overlay);
   inset: 0;
 }
-
-/* stylelint-disable selector-class-pattern */
-/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-:global {
-  .static {
-    overflow: hidden;
-  }
-
-  .ReactModal__Content[role='popup'] {
-    transform: translateY(100%);
-    transition: transform 0.3s ease-in-out;
-  }
-
-  .ReactModal__Content--after-open[role='popup'] {
-    transform: translateY(0);
-  }
-
-  .ReactModal__Content--before-close[role='popup'] {
-    transform: translateY(100%);
-  }
-}
-
-/* stylelint-enable selector-class-pattern */