From 8492b1c8e7a3243e3b1c881c08798ec3a9466e6f Mon Sep 17 00:00:00 2001
From: YH_hao_are_you <mlapenang1998@gmail.com>
Date: Tue, 19 Apr 2022 01:33:31 +0900
Subject: [PATCH] Feature: Timetable dark theme (#379)

* feat: Dark mode for pro tips and colors selector popup in Timetable

* feat: update theme colors dependency for all apps
---
 campus/package.json                           |   2 +-
 campus/pnpm-lock.yaml                         |   8 +-
 feeds/package.json                            |   2 +-
 feeds/pnpm-lock.yaml                          |  39 +-
 root/package.json                             |   2 +-
 root/pnpm-lock.yaml                           | 588 ++++++++++--------
 syllabus/package.json                         |   2 +-
 syllabus/pnpm-lock.yaml                       |   2 +-
 .../components/timetable/ColorSelector.tsx    |   1 -
 .../timetable/CourseAndPrefItem.tsx           |  20 +-
 .../src/components/timetable/Timetable.tsx    |  23 +-
 11 files changed, 380 insertions(+), 309 deletions(-)

diff --git a/campus/package.json b/campus/package.json
index 00c7359d9..f573f8471 100644
--- a/campus/package.json
+++ b/campus/package.json
@@ -58,7 +58,7 @@
   "dependencies": {
     "@aws-amplify/auth": "4.4.4",
     "@bit/wasedatime.core.assets.img.logo": "0.0.1",
-    "@bit/wasedatime.core.theme.colors": "0.0.4",
+    "@bit/wasedatime.core.theme.colors": "0.0.5",
     "@bit/wasedatime.core.ts.constants.langs": "0.0.5",
     "@bit/wasedatime.core.ts.ui.header": "0.2.17",
     "@bit/wasedatime.core.ts.ui.loading-spinner": "0.1.2",
diff --git a/campus/pnpm-lock.yaml b/campus/pnpm-lock.yaml
index 74b6e54f1..ff070fc3b 100644
--- a/campus/pnpm-lock.yaml
+++ b/campus/pnpm-lock.yaml
@@ -10,7 +10,7 @@ specifiers:
   '@babel/preset-typescript': 7.16.7
   '@babel/runtime': 7.17.2
   '@bit/wasedatime.core.assets.img.logo': 0.0.1
-  '@bit/wasedatime.core.theme.colors': 0.0.4
+  '@bit/wasedatime.core.theme.colors': 0.0.5
   '@bit/wasedatime.core.ts.constants.langs': 0.0.5
   '@bit/wasedatime.core.ts.ui.header': 0.2.17
   '@bit/wasedatime.core.ts.ui.loading-spinner': 0.1.2
@@ -71,7 +71,7 @@ specifiers:
 dependencies:
   '@aws-amplify/auth': 4.4.4
   '@bit/wasedatime.core.assets.img.logo': node.bit.dev/@bit/wasedatime.core.assets.img.logo/0.0.1_react-dom@17.0.2+react@17.0.2
-  '@bit/wasedatime.core.theme.colors': node.bit.dev/@bit/wasedatime.core.theme.colors/0.0.4
+  '@bit/wasedatime.core.theme.colors': 0.0.5
   '@bit/wasedatime.core.ts.constants.langs': node.bit.dev/@bit/wasedatime.core.ts.constants.langs/0.0.5_react-dom@17.0.2+react@17.0.2
   '@bit/wasedatime.core.ts.ui.header': node.bit.dev/@bit/wasedatime.core.ts.ui.header/0.2.17_b8fdba992ce7d797017dc07106486496
   '@bit/wasedatime.core.ts.ui.loading-spinner': node.bit.dev/@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2_react-dom@17.0.2+react@17.0.2
@@ -2032,6 +2032,10 @@ packages:
       '@babel/helper-validator-identifier': 7.16.7
       to-fast-properties: 2.0.0
 
+  /@bit/wasedatime.core.theme.colors/0.0.5:
+    resolution: {integrity: sha1-K7sD8kjDztzqeg0jgeHErLF4mYE=, tarball: wasedatime.core.theme.colors/-/wasedatime.core.theme.colors-0.0.5.tgz}
+    dev: false
+
   /@discoveryjs/json-ext/0.5.7:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
diff --git a/feeds/package.json b/feeds/package.json
index bb405bce4..a107d2a0f 100644
--- a/feeds/package.json
+++ b/feeds/package.json
@@ -13,7 +13,7 @@
     "format": "prettier --write \"./**\""
   },
   "dependencies": {
-    "@bit/wasedatime.core.theme.colors": "^0.0.3",
+    "@bit/wasedatime.core.theme.colors": "0.0.5",
     "@bit/wasedatime.core.ts.ui.loading-spinner": "0.1.2",
     "@bit/wasedatime.core.ts.utils.responsive-utils": "npm:wasedatime.core.ts.utils.responsive-utils@^0.0.1",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
diff --git a/feeds/pnpm-lock.yaml b/feeds/pnpm-lock.yaml
index 0ccaa9b3b..901340aaa 100644
--- a/feeds/pnpm-lock.yaml
+++ b/feeds/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@bit/wasedatime.core.theme.colors': ^0.0.3
+  '@bit/wasedatime.core.theme.colors': 0.0.5
   '@bit/wasedatime.core.ts.ui.loading-spinner': 0.1.2
   '@bit/wasedatime.core.ts.utils.responsive-utils': npm:wasedatime.core.ts.utils.responsive-utils@^0.0.1
   '@fortawesome/fontawesome-svg-core': 1.3.0
@@ -35,9 +35,9 @@ specifiers:
   typescript: 4.6.2
 
 dependencies:
-  '@bit/wasedatime.core.theme.colors': node.bit.dev/@bit/wasedatime.core.theme.colors/0.0.3
+  '@bit/wasedatime.core.theme.colors': 0.0.5
   '@bit/wasedatime.core.ts.ui.loading-spinner': node.bit.dev/@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2_react-dom@17.0.2+react@17.0.2
-  '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react-dom@17.0.2+react@17.0.2
+  '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react-dom@17.0.2+react@17.0.2
   '@fortawesome/fontawesome-svg-core': 1.3.0
   '@material-ui/core': 4.12.3_b8fdba992ce7d797017dc07106486496
   fs: 0.0.1-security
@@ -205,6 +205,23 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
+  /@bit/wasedatime.core.theme.colors/0.0.5:
+    resolution: {integrity: sha1-K7sD8kjDztzqeg0jgeHErLF4mYE=, tarball: wasedatime.core.theme.colors/-/wasedatime.core.theme.colors-0.0.5.tgz}
+    dev: false
+
+  /@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha1-5/QLjuULwrwyclYP8m96BV+Mnq8=, tarball: wasedatime.core.ts.utils.responsive-utils/-/wasedatime.core.ts.utils.responsive-utils-0.0.1.tgz}
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      styled-components: 5.3.3_react-dom@17.0.2+react@17.0.2
+    transitivePeerDependencies:
+      - react-is
+    dev: false
+
   /@emotion/hash/0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
     dev: false
@@ -5748,19 +5765,3 @@ packages:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
     dev: false
-
-  node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react-dom@17.0.2+react@17.0.2:
-    resolution: {integrity: sha1-5/QLjuULwrwyclYP8m96BV+Mnq8=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.utils.responsive-utils/-/wasedatime.core.ts.utils.responsive-utils-0.0.1.tgz}
-    id: node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1
-    name: wasedatime.core.ts.utils.responsive-utils
-    version: 0.0.1
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      styled-components: 5.3.3_react-dom@17.0.2+react@17.0.2
-    transitivePeerDependencies:
-      - react-is
-    dev: false
diff --git a/root/package.json b/root/package.json
index 3b9c9b3ed..5d10ba37f 100644
--- a/root/package.json
+++ b/root/package.json
@@ -63,7 +63,7 @@
     "@aws-amplify/auth": "4.5.0",
     "@aws-amplify/core": "4.5.0",
     "@bit/wasedatime.core.assets.text-logo": "0.0.1",
-    "@bit/wasedatime.core.theme.colors": "0.0.4",
+    "@bit/wasedatime.core.theme.colors": "0.0.5",
     "@bit/wasedatime.core.ts.constants.langs": "0.0.5",
     "@bit/wasedatime.core.ts.styles.overlay": "0.0.1",
     "@bit/wasedatime.core.ts.styles.wrapper": "0.0.1",
diff --git a/root/pnpm-lock.yaml b/root/pnpm-lock.yaml
index 94747dfc0..f17728168 100644
--- a/root/pnpm-lock.yaml
+++ b/root/pnpm-lock.yaml
@@ -10,7 +10,7 @@ specifiers:
   '@babel/preset-typescript': 7.16.7
   '@babel/runtime': 7.17.2
   '@bit/wasedatime.core.assets.text-logo': 0.0.1
-  '@bit/wasedatime.core.theme.colors': 0.0.4
+  '@bit/wasedatime.core.theme.colors': 0.0.5
   '@bit/wasedatime.core.ts.constants.langs': 0.0.5
   '@bit/wasedatime.core.ts.styles.overlay': 0.0.1
   '@bit/wasedatime.core.ts.styles.wrapper': 0.0.1
@@ -100,20 +100,20 @@ specifiers:
 dependencies:
   '@aws-amplify/auth': 4.5.0
   '@aws-amplify/core': 4.5.0
-  '@bit/wasedatime.core.assets.text-logo': 0.0.1_react@17.0.2
-  '@bit/wasedatime.core.theme.colors': 0.0.4
-  '@bit/wasedatime.core.ts.constants.langs': 0.0.5_react@17.0.2
-  '@bit/wasedatime.core.ts.styles.overlay': 0.0.1_react@17.0.2
-  '@bit/wasedatime.core.ts.styles.wrapper': 0.0.1_react@17.0.2
-  '@bit/wasedatime.core.ts.ui.header': 0.2.17_f5a915282880b6195cdb1046e80c5e3a
-  '@bit/wasedatime.core.ts.ui.language-menu': 0.1.2_f5a915282880b6195cdb1046e80c5e3a
-  '@bit/wasedatime.core.ts.ui.loading-spinner': 0.1.2_react@17.0.2
-  '@bit/wasedatime.core.ts.ui.logo': 0.0.9_react@17.0.2
-  '@bit/wasedatime.core.ts.ui.modal': 0.0.8
-  '@bit/wasedatime.core.ts.ui.sign-in-modal': 0.1.6_e46095638471543ba34100765238dc47
-  '@bit/wasedatime.core.ts.utils.i18n': 0.0.4_i18next@19.9.2+react@17.0.2
-  '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react@17.0.2
-  '@bit/wasedatime.core.ts.utils.user': 0.0.4_react@17.0.2
+  '@bit/wasedatime.core.assets.text-logo': node.bit.dev/@bit/wasedatime.core.assets.text-logo/0.0.1_react@17.0.2
+  '@bit/wasedatime.core.theme.colors': 0.0.5
+  '@bit/wasedatime.core.ts.constants.langs': node.bit.dev/@bit/wasedatime.core.ts.constants.langs/0.0.5_react@17.0.2
+  '@bit/wasedatime.core.ts.styles.overlay': node.bit.dev/@bit/wasedatime.core.ts.styles.overlay/0.0.1_react@17.0.2
+  '@bit/wasedatime.core.ts.styles.wrapper': node.bit.dev/@bit/wasedatime.core.ts.styles.wrapper/0.0.1_react@17.0.2
+  '@bit/wasedatime.core.ts.ui.header': node.bit.dev/@bit/wasedatime.core.ts.ui.header/0.2.17_f5a915282880b6195cdb1046e80c5e3a
+  '@bit/wasedatime.core.ts.ui.language-menu': node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.2_f5a915282880b6195cdb1046e80c5e3a
+  '@bit/wasedatime.core.ts.ui.loading-spinner': node.bit.dev/@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2_react@17.0.2
+  '@bit/wasedatime.core.ts.ui.logo': node.bit.dev/@bit/wasedatime.core.ts.ui.logo/0.0.9_react@17.0.2
+  '@bit/wasedatime.core.ts.ui.modal': node.bit.dev/@bit/wasedatime.core.ts.ui.modal/0.0.8
+  '@bit/wasedatime.core.ts.ui.sign-in-modal': node.bit.dev/@bit/wasedatime.core.ts.ui.sign-in-modal/0.1.6_e46095638471543ba34100765238dc47
+  '@bit/wasedatime.core.ts.utils.i18n': node.bit.dev/@bit/wasedatime.core.ts.utils.i18n/0.0.4_i18next@19.9.2+react@17.0.2
+  '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2
+  '@bit/wasedatime.core.ts.utils.user': node.bit.dev/@bit/wasedatime.core.ts.utils.user/0.0.4_react@17.0.2
   '@emotion/react': 11.9.0_7c3ecd89bd75b61b41f2029715ea2305
   '@emotion/styled': 11.8.1_aa14098c2ea011cbc634dc0640a5389f
   '@fortawesome/fontawesome-svg-core': 1.3.0
@@ -2094,51 +2094,6 @@ packages:
       '@babel/helper-validator-identifier': 7.16.7
       to-fast-properties: 2.0.0
 
-  /@bit/wasedatime.core.assets.img.logo-jp/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-ErN8Hkn1p/2XmutGVZXg1WZoJiE=, tarball: wasedatime.core.assets.img.logo-jp/-/wasedatime.core.assets.img.logo-jp-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.assets.img.logo/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-e0w8cLOvM8t9pildIQVoGODf1pA=, tarball: wasedatime.core.assets.img.logo/-/wasedatime.core.assets.img.logo-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.assets.locales.en/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-a2MtBzbhje+oHJ4Tz+L5B/2n2Qs=, tarball: wasedatime.core.assets.locales.en/-/wasedatime.core.assets.locales.en-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.assets.locales.ja/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-q3GVnjO0kmRflqwouUeS5dFCHHU=, tarball: wasedatime.core.assets.locales.ja/-/wasedatime.core.assets.locales.ja-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.assets.text-logo/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-9aboJrogohw+CJ1WfncuafecqYo=, tarball: wasedatime.core.assets.text-logo/-/wasedatime.core.assets.text-logo-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
   /@bit/wasedatime.core.theme.colors/0.0.2:
     resolution: {integrity: sha1-O0I7As2DSqrSnqY7AX/O43j09GI=, tarball: wasedatime.core.theme.colors/-/wasedatime.core.theme.colors-0.0.2.tgz}
     dev: false
@@ -2151,210 +2106,8 @@ packages:
     resolution: {integrity: sha1-YBl9+ScBcYb7Kohku9cb5zAfhDs=, tarball: wasedatime.core.theme.colors/-/wasedatime.core.theme.colors-0.0.4.tgz}
     dev: false
 
-  /@bit/wasedatime.core.ts.constants.langs/0.0.5_react@17.0.2:
-    resolution: {integrity: sha1-Bp87IFStXHsG1iyN/PONMyD5IyM=, tarball: wasedatime.core.ts.constants.langs/-/wasedatime.core.ts.constants.langs-0.0.5.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.ts.styles.overlay/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-eXYMnbkdhymg3EBNS9RBSuz1Wbk=, tarball: wasedatime.core.ts.styles.overlay/-/wasedatime.core.ts.styles.overlay-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-      styled-components: 5.3.3_react@17.0.2
-    transitivePeerDependencies:
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.styles.wrapper/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-cszBxS3eDqwoxe9Tl162+7hc9Og=, tarball: wasedatime.core.ts.styles.wrapper/-/wasedatime.core.ts.styles.wrapper-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-      styled-components: 5.3.3_react@17.0.2
-    transitivePeerDependencies:
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.header/0.2.17_f5a915282880b6195cdb1046e80c5e3a:
-    resolution: {integrity: sha1-N513f00u4H5uGJGt8r66gTuEmUY=, tarball: wasedatime.core.ts.ui.header/-/wasedatime.core.ts.ui.header-0.2.17.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.theme.colors': 0.0.4
-      '@bit/wasedatime.core.ts.ui.language-menu': 0.1.5_a0c521d4794c7ad97f5f4c1c4a7d5818
-      '@bit/wasedatime.core.ts.ui.logo': 0.0.9_react@17.0.2
-      '@bit/wasedatime.core.ts.ui.theme-toggle': 0.1.3_4bd8f766d7cd56ce339ee1b51a510026
-      '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react@17.0.2
-      react: 17.0.2
-      react-responsive: 8.2.0_react@17.0.2
-      react-router-dom: 6.3.0_react@17.0.2
-    transitivePeerDependencies:
-      - '@fortawesome/fontawesome-svg-core'
-      - '@types/react'
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.language-menu/0.1.2_f5a915282880b6195cdb1046e80c5e3a:
-    resolution: {integrity: sha1-MUvE8RKQdx5JD3r7R/OPTdMgZes=, tarball: wasedatime.core.ts.ui.language-menu/-/wasedatime.core.ts.ui.language-menu-0.1.2.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react@17.0.2
-      '@fortawesome/free-solid-svg-icons': 5.15.4
-      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
-      '@material-ui/core': 4.12.4_a0c521d4794c7ad97f5f4c1c4a7d5818
-      react: 17.0.2
-      react-responsive: 8.2.0_react@17.0.2
-    transitivePeerDependencies:
-      - '@fortawesome/fontawesome-svg-core'
-      - '@types/react'
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.language-menu/0.1.5_a0c521d4794c7ad97f5f4c1c4a7d5818:
-    resolution: {integrity: sha1-YpUkWulbAYIiEI0GiFiP+J7SfNk=, tarball: wasedatime.core.ts.ui.language-menu/-/wasedatime.core.ts.ui.language-menu-0.1.5.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.theme.colors': 0.0.4
-      '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react@17.0.2
-      '@fortawesome/fontawesome-svg-core': 1.3.0
-      '@fortawesome/free-solid-svg-icons': 5.15.4
-      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
-      '@material-ui/core': 4.12.4_a0c521d4794c7ad97f5f4c1c4a7d5818
-      react: 17.0.2
-      react-responsive: 8.2.0_react@17.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2_react@17.0.2:
-    resolution: {integrity: sha1-WqxofSQAwEMlFy7NVlh0RXm+0N0=, tarball: wasedatime.core.ts.ui.loading-spinner/-/wasedatime.core.ts.ui.loading-spinner-0.1.2.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.theme.colors': 0.0.3
-      '@bit/wasedatime.core.ts.styles.overlay': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.ts.styles.wrapper': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.ts.ui.logo': 0.0.9_react@17.0.2
-      react: 17.0.2
-    transitivePeerDependencies:
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.logo/0.0.9_react@17.0.2:
-    resolution: {integrity: sha1-3KGefQPP8se1Blx051dpau3Cmp0=, tarball: wasedatime.core.ts.ui.logo/-/wasedatime.core.ts.ui.logo-0.0.9.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.assets.img.logo': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.assets.img.logo-jp': 0.0.1_react@17.0.2
-      react: 17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.modal/0.0.8:
-    resolution: {integrity: sha1-xkKmBXxGPJmAXzBQAeIqi71+V1E=, tarball: wasedatime.core.ts.ui.modal/-/wasedatime.core.ts.ui.modal-0.0.8.tgz}
-    peerDependencies:
-      react-dom: ^17.0.1
-    dependencies:
-      no-scroll: 2.1.1
-      react: 17.0.2
-      react-modal: 3.14.4_react@17.0.2
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.sign-in-modal/0.1.6_e46095638471543ba34100765238dc47:
-    resolution: {integrity: sha1-2AsM/+8z11HHHjRVHuMy8YjmyVk=, tarball: wasedatime.core.ts.ui.sign-in-modal/-/wasedatime.core.ts.ui.sign-in-modal-0.1.6.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.ts.ui.modal': 0.0.8
-      '@bit/wasedatime.core.ts.utils.responsive-utils': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.ts.utils.user': 0.0.4_react@17.0.2
-      '@fortawesome/free-brands-svg-icons': 6.1.1
-      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
-      react: 17.0.2
-      react-i18next: 11.15.6_i18next@19.9.2+react@17.0.2
-      react-responsive: 8.2.0_react@17.0.2
-    transitivePeerDependencies:
-      - '@fortawesome/fontawesome-svg-core'
-      - encoding
-      - i18next
-      - react-is
-      - react-native
-    dev: false
-
-  /@bit/wasedatime.core.ts.ui.theme-toggle/0.1.3_4bd8f766d7cd56ce339ee1b51a510026:
-    resolution: {integrity: sha1-YTDn/Cp/YgdPYdeR4APo2mVmyXo=, tarball: wasedatime.core.ts.ui.theme-toggle/-/wasedatime.core.ts.ui.theme-toggle-0.1.3.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.theme.colors': 0.0.2
-      '@fortawesome/free-solid-svg-icons': 6.0.0
-      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
-      react: 17.0.2
-    transitivePeerDependencies:
-      - '@fortawesome/fontawesome-svg-core'
-    dev: false
-
-  /@bit/wasedatime.core.ts.utils.i18n/0.0.4_i18next@19.9.2+react@17.0.2:
-    resolution: {integrity: sha1-Mi/S9B83NRoFmQTS6EgSF8Ymqlo=, tarball: wasedatime.core.ts.utils.i18n/-/wasedatime.core.ts.utils.i18n-0.0.4.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@bit/wasedatime.core.assets.locales.en': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.assets.locales.ja': 0.0.1_react@17.0.2
-      '@bit/wasedatime.core.ts.constants.langs': 0.0.5_react@17.0.2
-      i18next-browser-languagedetector: 6.1.4
-      i18next-http-backend: 1.4.0
-      react: 17.0.2
-      react-i18next: 11.15.6_i18next@19.9.2+react@17.0.2
-    transitivePeerDependencies:
-      - encoding
-      - i18next
-      - react-native
-    dev: false
-
-  /@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2:
-    resolution: {integrity: sha1-5/QLjuULwrwyclYP8m96BV+Mnq8=, tarball: wasedatime.core.ts.utils.responsive-utils/-/wasedatime.core.ts.utils.responsive-utils-0.0.1.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      react: 17.0.2
-      styled-components: 5.3.3_react@17.0.2
-    transitivePeerDependencies:
-      - react-is
-    dev: false
-
-  /@bit/wasedatime.core.ts.utils.user/0.0.4_react@17.0.2:
-    resolution: {integrity: sha1-oXb9G56lFH2zi1fg1GCWAJpy1xU=, tarball: wasedatime.core.ts.utils.user/-/wasedatime.core.ts.utils.user-0.0.4.tgz}
-    peerDependencies:
-      react: ^17.0.1
-      react-dom: ^17.0.1
-    dependencies:
-      '@aws-amplify/auth': 4.5.0
-      react: 17.0.2
-    transitivePeerDependencies:
-      - encoding
-      - react-native
+  /@bit/wasedatime.core.theme.colors/0.0.5:
+    resolution: {integrity: sha1-K7sD8kjDztzqeg0jgeHErLF4mYE=, tarball: wasedatime.core.theme.colors/-/wasedatime.core.theme.colors-0.0.5.tgz}
     dev: false
 
   /@discoveryjs/json-ext/0.5.7:
@@ -10808,3 +10561,310 @@ packages:
   /zen-observable/0.8.15:
     resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==}
     dev: false
+
+  node.bit.dev/@bit/wasedatime.core.assets.img.logo-jp/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-ErN8Hkn1p/2XmutGVZXg1WZoJiE=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.assets.img.logo-jp/-/wasedatime.core.assets.img.logo-jp-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.assets.img.logo-jp/0.0.1
+    name: wasedatime.core.assets.img.logo-jp
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.assets.img.logo/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-e0w8cLOvM8t9pildIQVoGODf1pA=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.assets.img.logo/-/wasedatime.core.assets.img.logo-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.assets.img.logo/0.0.1
+    name: wasedatime.core.assets.img.logo
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.assets.locales.en/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-a2MtBzbhje+oHJ4Tz+L5B/2n2Qs=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.assets.locales.en/-/wasedatime.core.assets.locales.en-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.assets.locales.en/0.0.1
+    name: wasedatime.core.assets.locales.en
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.assets.locales.ja/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-q3GVnjO0kmRflqwouUeS5dFCHHU=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.assets.locales.ja/-/wasedatime.core.assets.locales.ja-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.assets.locales.ja/0.0.1
+    name: wasedatime.core.assets.locales.ja
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.assets.text-logo/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-9aboJrogohw+CJ1WfncuafecqYo=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.assets.text-logo/-/wasedatime.core.assets.text-logo-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.assets.text-logo/0.0.1
+    name: wasedatime.core.assets.text-logo
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.constants.langs/0.0.5_react@17.0.2:
+    resolution: {integrity: sha1-Bp87IFStXHsG1iyN/PONMyD5IyM=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.constants.langs/-/wasedatime.core.ts.constants.langs-0.0.5.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.constants.langs/0.0.5
+    name: wasedatime.core.ts.constants.langs
+    version: 0.0.5
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.styles.overlay/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-eXYMnbkdhymg3EBNS9RBSuz1Wbk=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.styles.overlay/-/wasedatime.core.ts.styles.overlay-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.styles.overlay/0.0.1
+    name: wasedatime.core.ts.styles.overlay
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+      styled-components: 5.3.3_react@17.0.2
+    transitivePeerDependencies:
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.styles.wrapper/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-cszBxS3eDqwoxe9Tl162+7hc9Og=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.styles.wrapper/-/wasedatime.core.ts.styles.wrapper-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.styles.wrapper/0.0.1
+    name: wasedatime.core.ts.styles.wrapper
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+      styled-components: 5.3.3_react@17.0.2
+    transitivePeerDependencies:
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.header/0.2.17_f5a915282880b6195cdb1046e80c5e3a:
+    resolution: {integrity: sha1-N513f00u4H5uGJGt8r66gTuEmUY=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.header/-/wasedatime.core.ts.ui.header-0.2.17.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.header/0.2.17
+    name: wasedatime.core.ts.ui.header
+    version: 0.2.17
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.theme.colors': 0.0.4
+      '@bit/wasedatime.core.ts.ui.language-menu': node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.5_a0c521d4794c7ad97f5f4c1c4a7d5818
+      '@bit/wasedatime.core.ts.ui.logo': node.bit.dev/@bit/wasedatime.core.ts.ui.logo/0.0.9_react@17.0.2
+      '@bit/wasedatime.core.ts.ui.theme-toggle': node.bit.dev/@bit/wasedatime.core.ts.ui.theme-toggle/0.1.3_4bd8f766d7cd56ce339ee1b51a510026
+      '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2
+      react: 17.0.2
+      react-responsive: 8.2.0_react@17.0.2
+      react-router-dom: 6.3.0_react@17.0.2
+    transitivePeerDependencies:
+      - '@fortawesome/fontawesome-svg-core'
+      - '@types/react'
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.2_f5a915282880b6195cdb1046e80c5e3a:
+    resolution: {integrity: sha1-MUvE8RKQdx5JD3r7R/OPTdMgZes=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.language-menu/-/wasedatime.core.ts.ui.language-menu-0.1.2.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.2
+    name: wasedatime.core.ts.ui.language-menu
+    version: 0.1.2
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2
+      '@fortawesome/free-solid-svg-icons': 5.15.4
+      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
+      '@material-ui/core': 4.12.4_a0c521d4794c7ad97f5f4c1c4a7d5818
+      react: 17.0.2
+      react-responsive: 8.2.0_react@17.0.2
+    transitivePeerDependencies:
+      - '@fortawesome/fontawesome-svg-core'
+      - '@types/react'
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.5_a0c521d4794c7ad97f5f4c1c4a7d5818:
+    resolution: {integrity: sha1-YpUkWulbAYIiEI0GiFiP+J7SfNk=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.language-menu/-/wasedatime.core.ts.ui.language-menu-0.1.5.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.language-menu/0.1.5
+    name: wasedatime.core.ts.ui.language-menu
+    version: 0.1.5
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.theme.colors': 0.0.4
+      '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2
+      '@fortawesome/fontawesome-svg-core': 1.3.0
+      '@fortawesome/free-solid-svg-icons': 5.15.4
+      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
+      '@material-ui/core': 4.12.4_a0c521d4794c7ad97f5f4c1c4a7d5818
+      react: 17.0.2
+      react-responsive: 8.2.0_react@17.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2_react@17.0.2:
+    resolution: {integrity: sha1-WqxofSQAwEMlFy7NVlh0RXm+0N0=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.loading-spinner/-/wasedatime.core.ts.ui.loading-spinner-0.1.2.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.loading-spinner/0.1.2
+    name: wasedatime.core.ts.ui.loading-spinner
+    version: 0.1.2
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.theme.colors': 0.0.3
+      '@bit/wasedatime.core.ts.styles.overlay': node.bit.dev/@bit/wasedatime.core.ts.styles.overlay/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.ts.styles.wrapper': node.bit.dev/@bit/wasedatime.core.ts.styles.wrapper/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.ts.ui.logo': node.bit.dev/@bit/wasedatime.core.ts.ui.logo/0.0.9_react@17.0.2
+      react: 17.0.2
+    transitivePeerDependencies:
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.logo/0.0.9_react@17.0.2:
+    resolution: {integrity: sha1-3KGefQPP8se1Blx051dpau3Cmp0=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.logo/-/wasedatime.core.ts.ui.logo-0.0.9.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.logo/0.0.9
+    name: wasedatime.core.ts.ui.logo
+    version: 0.0.9
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.assets.img.logo': node.bit.dev/@bit/wasedatime.core.assets.img.logo/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.assets.img.logo-jp': node.bit.dev/@bit/wasedatime.core.assets.img.logo-jp/0.0.1_react@17.0.2
+      react: 17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.modal/0.0.8:
+    resolution: {integrity: sha1-xkKmBXxGPJmAXzBQAeIqi71+V1E=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.modal/-/wasedatime.core.ts.ui.modal-0.0.8.tgz}
+    name: wasedatime.core.ts.ui.modal
+    version: 0.0.8
+    peerDependencies:
+      react-dom: ^17.0.1
+    dependencies:
+      no-scroll: 2.1.1
+      react: 17.0.2
+      react-modal: 3.14.4_react@17.0.2
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.sign-in-modal/0.1.6_e46095638471543ba34100765238dc47:
+    resolution: {integrity: sha1-2AsM/+8z11HHHjRVHuMy8YjmyVk=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.sign-in-modal/-/wasedatime.core.ts.ui.sign-in-modal-0.1.6.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.sign-in-modal/0.1.6
+    name: wasedatime.core.ts.ui.sign-in-modal
+    version: 0.1.6
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.ts.ui.modal': node.bit.dev/@bit/wasedatime.core.ts.ui.modal/0.0.8
+      '@bit/wasedatime.core.ts.utils.responsive-utils': node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.ts.utils.user': node.bit.dev/@bit/wasedatime.core.ts.utils.user/0.0.4_react@17.0.2
+      '@fortawesome/free-brands-svg-icons': 6.1.1
+      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
+      react: 17.0.2
+      react-i18next: 11.15.6_i18next@19.9.2+react@17.0.2
+      react-responsive: 8.2.0_react@17.0.2
+    transitivePeerDependencies:
+      - '@fortawesome/fontawesome-svg-core'
+      - encoding
+      - i18next
+      - react-is
+      - react-native
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.ui.theme-toggle/0.1.3_4bd8f766d7cd56ce339ee1b51a510026:
+    resolution: {integrity: sha1-YTDn/Cp/YgdPYdeR4APo2mVmyXo=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.ui.theme-toggle/-/wasedatime.core.ts.ui.theme-toggle-0.1.3.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.ui.theme-toggle/0.1.3
+    name: wasedatime.core.ts.ui.theme-toggle
+    version: 0.1.3
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.theme.colors': 0.0.2
+      '@fortawesome/free-solid-svg-icons': 6.0.0
+      '@fortawesome/react-fontawesome': 0.1.17_4bd8f766d7cd56ce339ee1b51a510026
+      react: 17.0.2
+    transitivePeerDependencies:
+      - '@fortawesome/fontawesome-svg-core'
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.utils.i18n/0.0.4_i18next@19.9.2+react@17.0.2:
+    resolution: {integrity: sha1-Mi/S9B83NRoFmQTS6EgSF8Ymqlo=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.utils.i18n/-/wasedatime.core.ts.utils.i18n-0.0.4.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.utils.i18n/0.0.4
+    name: wasedatime.core.ts.utils.i18n
+    version: 0.0.4
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@bit/wasedatime.core.assets.locales.en': node.bit.dev/@bit/wasedatime.core.assets.locales.en/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.assets.locales.ja': node.bit.dev/@bit/wasedatime.core.assets.locales.ja/0.0.1_react@17.0.2
+      '@bit/wasedatime.core.ts.constants.langs': node.bit.dev/@bit/wasedatime.core.ts.constants.langs/0.0.5_react@17.0.2
+      i18next-browser-languagedetector: 6.1.4
+      i18next-http-backend: 1.4.0
+      react: 17.0.2
+      react-i18next: 11.15.6_i18next@19.9.2+react@17.0.2
+    transitivePeerDependencies:
+      - encoding
+      - i18next
+      - react-native
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1_react@17.0.2:
+    resolution: {integrity: sha1-5/QLjuULwrwyclYP8m96BV+Mnq8=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.utils.responsive-utils/-/wasedatime.core.ts.utils.responsive-utils-0.0.1.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.utils.responsive-utils/0.0.1
+    name: wasedatime.core.ts.utils.responsive-utils
+    version: 0.0.1
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      react: 17.0.2
+      styled-components: 5.3.3_react@17.0.2
+    transitivePeerDependencies:
+      - react-is
+    dev: false
+
+  node.bit.dev/@bit/wasedatime.core.ts.utils.user/0.0.4_react@17.0.2:
+    resolution: {integrity: sha1-oXb9G56lFH2zi1fg1GCWAJpy1xU=, registry: https://node.bit.dev/, tarball: https://node.bit.dev/wasedatime.core.ts.utils.user/-/wasedatime.core.ts.utils.user-0.0.4.tgz}
+    id: node.bit.dev/@bit/wasedatime.core.ts.utils.user/0.0.4
+    name: wasedatime.core.ts.utils.user
+    version: 0.0.4
+    peerDependencies:
+      react: ^17.0.1
+      react-dom: ^17.0.1
+    dependencies:
+      '@aws-amplify/auth': 4.5.0
+      react: 17.0.2
+    transitivePeerDependencies:
+      - encoding
+      - react-native
+    dev: false
diff --git a/syllabus/package.json b/syllabus/package.json
index 9a2d3e17b..6f796262b 100644
--- a/syllabus/package.json
+++ b/syllabus/package.json
@@ -66,7 +66,7 @@
   "dependencies": {
     "@aws-amplify/api": "4.0.33",
     "@aws-amplify/auth": "4.5.0",
-    "@bit/wasedatime.core.theme.colors": "0.0.5",
+    "@bit/wasedatime.core.theme.colors": "npm:wasedatime.core.theme.colors@0.0.5",
     "@bit/wasedatime.core.ts.constants.langs": "0.0.5",
     "@bit/wasedatime.core.ts.constants.size-variables": "0.0.2",
     "@bit/wasedatime.core.ts.styles.wrapper": "0.0.1",
diff --git a/syllabus/pnpm-lock.yaml b/syllabus/pnpm-lock.yaml
index 143110b8d..a622230bf 100644
--- a/syllabus/pnpm-lock.yaml
+++ b/syllabus/pnpm-lock.yaml
@@ -10,7 +10,7 @@ specifiers:
   '@babel/preset-react': 7.16.7
   '@babel/preset-typescript': 7.16.7
   '@babel/runtime': 7.17.2
-  '@bit/wasedatime.core.theme.colors': 0.0.5
+  '@bit/wasedatime.core.theme.colors': npm:wasedatime.core.theme.colors@0.0.5
   '@bit/wasedatime.core.ts.constants.langs': 0.0.5
   '@bit/wasedatime.core.ts.constants.size-variables': 0.0.2
   '@bit/wasedatime.core.ts.styles.wrapper': 0.0.1
diff --git a/syllabus/src/components/timetable/ColorSelector.tsx b/syllabus/src/components/timetable/ColorSelector.tsx
index 765d46ad5..3471db621 100644
--- a/syllabus/src/components/timetable/ColorSelector.tsx
+++ b/syllabus/src/components/timetable/ColorSelector.tsx
@@ -23,7 +23,6 @@ const InvisibleButton = styled("button")`
 const ColorButton = styled(InvisibleButton)<ColorButtonProps>`
   width: 1.5em;
   height: 1.5em;
-  border: 1px solid ${(props) => timetableColors[props.theme][`color${props.colorCode}`]};
   border-radius: 0.3em;
   margin: 0 0.1em;
   background-color: ${(props) => timetableColors[props.theme][`bgColor${props.colorCode}`]};
diff --git a/syllabus/src/components/timetable/CourseAndPrefItem.tsx b/syllabus/src/components/timetable/CourseAndPrefItem.tsx
index 86a8afe4f..c54a6163c 100644
--- a/syllabus/src/components/timetable/CourseAndPrefItem.tsx
+++ b/syllabus/src/components/timetable/CourseAndPrefItem.tsx
@@ -17,8 +17,22 @@ import { SyllabusKey } from "@app/constants/syllabus-data";
 import Course from "@app/types/course";
 import { getCourseTitleAndInstructor } from "@app/utils/course-search";
 import { ThemeContext } from "@app/utils/theme-context";
+import colors from "@bit/wasedatime.core.theme.colors";
 import timetableColors from "@app/constants/timetable-colors";
 
+type StyledPopupProps = {
+  isDark: boolean;
+}
+
+const StyledPopup = styled(Popup)<StyledPopupProps>`
+  padding: 5px;
+  padding-bottom: 0px;
+  border-width: 1px;
+  border-radius: 5px;
+  border-color: ${props => props.isDark ? colors.dark.text2 : colors.light.text3};
+  background-color: ${props => props.isDark ? colors.dark.bgSide : colors.light.bgSide};
+`;
+
 const RowWrapper = styled("li")`
   display: flex;
   flex-direction: row;
@@ -108,20 +122,20 @@ const CourseAndPrefItem = ({
 
   return (
     <RowWrapper>
-      <Popup
+      <StyledPopup
         trigger={
           <ColorButton style={{
             color: timetableColors[theme][`color${color}`],
             backgroundColor: timetableColors[theme][`bgColor${color}`],
-            borderColor: timetableColors[theme][`color${color}`],
           }} />
         }
         on="click"
         pinned
         size="huge"
+        isDark={theme === "dark"}
       >
         <ColorSelector handleChangeColor={handleChangeColor} />
-      </Popup>
+      </StyledPopup>
 
       <CourseItemWrapper className="text-light-text1 dark:text-dark-text2">
         <StyledHeading>{title}</StyledHeading>
diff --git a/syllabus/src/components/timetable/Timetable.tsx b/syllabus/src/components/timetable/Timetable.tsx
index 6405d58fa..34b97f563 100644
--- a/syllabus/src/components/timetable/Timetable.tsx
+++ b/syllabus/src/components/timetable/Timetable.tsx
@@ -13,15 +13,12 @@ import TimeRowList from "@app/components/timetable/TimeRowList";
 import { SyllabusKey } from "@app/constants/syllabus-data";
 import Course from "@app/types/course";
 import { ThemeContext } from "@app/utils/theme-context";
+import timetableColors from "@app/constants/timetable-colors";
 
 type ColumnProps = {
   flexBasis: string;
 };
 
-type StyledMessageProps = {
-  isDark: boolean;
-};
-
 const ExtendedRowWrapper = styled(RowWrapper)`
   flex-wrap: wrap;
   padding: 0.2em;
@@ -52,10 +49,6 @@ const ScrollableTimetable = styled("div")`
   -webkit-overflow-scrolling: touch;
 `;
 
-const StyledMessage = styled(Message)<StyledMessageProps>`
-  ${(props) => props.isDark && "opacity: 0.6;"}
-`;
-
 interface Props extends WithTranslation {
   addedCoursesAndPrefs: {
     pref: {
@@ -121,28 +114,28 @@ const Timetable = ({ addedCoursesAndPrefs, t }: Props) => {
                 </h5>
                 <br />
                 <Section>
-                  <StyledMessage
+                  <Message
                     warning
                     header={
-                      <h5>
+                      <h5 style={theme === "dark" ? { color: timetableColors.light.lightBrown } : {}}>
                         <b>{t("timetable.You haven't added any courses")}</b>
                       </h5>
                     }
                     content={
-                      <p>
+                      <p style={theme === "dark" ? { color: timetableColors.light.lightBrown } : {}}>
                         {t("timetable.Go to")}{" "}
                         <a href="/syllabus">{t("timetable.Syllabus")} </a>{" "}
                         {t("timetable.and try adding one!")}
                       </p>
                     }
                     size="mini"
-                    isDark={theme === "dark"}
+                    style={theme === "dark" ? { backgroundColor: timetableColors.light.deepestBrown } : {}}
                   />
                 </Section>
                 <Section>
-                  <StyledMessage success size="mini" isDark={theme === "dark"}>
-                    <p>{t("timetable.SaveSpace")}</p>
-                  </StyledMessage>
+                  <Message success size="mini" style={theme === "dark" ? { backgroundColor: timetableColors.light.deepGreen } : {}}>
+                    <p style={theme === "dark" ? { color: timetableColors.light.lightGreen } : {}}>{t("timetable.SaveSpace")}</p>
+                  </Message>
                 </Section>
               </Article>
             </Wrapper>