Merge pull request #704 from pcwadarong/main

Theme Picker UI Update

Author: pcwadarong

packages/view/src/components/ThemeSelector/ThemeSelector.scss

@@ -9,21 +9,21 @@
 
 .selector__container {
   position: absolute;
-  top: 30px;
+  top: 2.5rem;
   left: 0;
-  padding: 24px;
-  background-color: var(--color-darkgray);
-  border-radius: 5px 40px 40px 40px;
+  padding: 20px;
+  background-color: var(--color-dark-gray);
+  border-radius: 0.3rem 1.5rem 1.5rem 1.5rem;
   z-index: 10;
 
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 
   > div {
     display: flex;
     justify-content: space-between;
-    gap: 4px;
+    gap: 2px;
     &:nth-child(1) {
       font-size: $font-size-title;
       font-weight: $font-weight-semibold;
@@ -39,14 +39,15 @@
   flex-direction: column;
   align-items: center;
   justify-items: center;
-  gap: 24px;
+  gap: 1rem;
   padding: 10px;
   box-sizing: border-box;
 
+
   &:hover,
   &--selected {
     @extend .theme-icon;
-    background-color: #363636;
+    background-color: #4f5662;
     border-radius: 10px;
     cursor: pointer;
   }

packages/view/src/components/ThemeSelector/ThemeSelector.tsx

@@ -8,27 +8,27 @@ const themes = [
     title: "Githru",
     value: "githru",
     colors: {
-      primary: "#f14f8c",
-      secondary: "#8421c9",
-      tertiary: "#ffcb7d",
+      primary: "#e06091",
+      secondary: "#8840bb",
+      tertiary: "#ffd08a",
     },
   },
   {
     title: "Hacker Blue",
     value: "hacker-blue",
     colors: {
       primary: "#456cf7",
-      secondary: "#0c216f",
+      secondary: "#3f4c73",
       tertiary: "#6c60f0",
     },
   },
   {
     title: "Aqua",
     value: "aqua",
     colors: {
-      primary: "#25d4bf",
+      primary: "#51decd",
       secondary: "#0687a3",
-      tertiary: "#35ffff",
+      tertiary: "#a7ffff",
     },
   },
   {
@@ -37,17 +37,17 @@ const themes = [
     colors: {
       primary: "#ffcccb",
       secondary: "#feffd1",
-      tertiary: "#8979ca",
+      tertiary: "#a39aeb",
     },
   },
 
   {
     title: "Mono",
     value: "mono",
     colors: {
-      primary: "#5f6f86",
+      primary: "#68788f",
       secondary: "#3a4776",
-      tertiary: "#9499c3",
+      tertiary: "#9aaed1",
     },
   },
 ];

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -94,9 +94,9 @@
 
           a {
             text-decoration: none;
-            color: var(--color-lightgray);
+            color: var(--color-light-gray);
             &:visited {
-              color: var(--color-lightgray);
+              color: var(--color-light-gray);
             }
             &:hover {
               color: var(--color-primary);

packages/view/src/fake-assets/cluster-nodes.json

@@ -1622,7 +1622,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },
@@ -1648,7 +1648,7 @@
               }
             }
           },
-          "message": "Merge pull request #20 from jeonghye-choi/feat/styles/n/nfeat: add style pallete"
+          "message": "Merge pull request #20 from jeonghye-choi/feat/styles/n/nfeat: add style pallette"
         },
         "clusterId": 10
       },
@@ -1882,13 +1882,13 @@
             "insertions": 295,
             "deletions": 0,
             "files": {
-              "packages/view/src/styles/_pallete.scss": {
+              "packages/view/src/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               }
             }
           },
-          "message": "feat: add color palletes with levels"
+          "message": "feat: add color pallettes with levels"
         },
         "clusterId": 10
       }
@@ -2047,7 +2047,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },
@@ -2493,7 +2493,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },

packages/view/src/styles/_colors.scss

@@ -1,4 +1,4 @@
-@import "pallete";
+@import "pallette";
 
 $color--dark: $white;
 $color--light: $black;

packages/view/src/styles/_customTheme.scss

@@ -1,47 +1,48 @@
 :root {
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --color-lightgray: #bdbdbd;
-  --color-darkgray: #3e3e3e;
+  --color-black: #010b13;
+  --color-white: #f8f8f8;
+  --color-light-gray: #b4bac6;
+  --color-medium-gray: #757880;
+  --color-dark-gray: #363a41;
   --color-text-white: #f8f8f8;
 }
 
+html[custom-type="githru"] {
+  --color-primary: #e06091;
+  --color-secondary: #8840bb;
+  --color-tertiary: #ffd08a;
+  --color-success: #07bebe;
+  --color-failed: #ee2479;
+}
+
 html[custom-type="hacker-blue"] {
   --color-primary: #456cf7;
-  --color-secondary: #465070;
+  --color-secondary: #3f4c73;
   --color-tertiary: #6c60f0;
   --color-success: #1fc7a9;
   --color-failed: #ee2479;
 }
 
 html[custom-type="aqua"] {
-  --color-primary: #25d4bf;
+  --color-primary: #51decd;
   --color-secondary: #0687a3;
-  --color-tertiary: #35ffff;
-  --color-success: #0373b2;
+  --color-tertiary: #a7ffff;
+  --color-success: #008cde;
   --color-failed: #ee2479;
 }
 
 html[custom-type="cotton-candy"] {
   --color-primary: #ffcccb;
   --color-secondary: #feffd1;
-  --color-tertiary: #8979ca;
+  --color-tertiary: #a39aeb;
   --color-success: #7ad5c4;
   --color-failed: #ff8bbc;
 }
 
-html[custom-type="githru"] {
-  --color-primary: #f14f8c;
-  --color-secondary: #8421c9;
-  --color-tertiary: #ffcb7d;
-  --color-success: #07bebe;
-  --color-failed: #ee2479;
-}
-
 html[custom-type="mono"] {
-  --color-primary: #5f6f86;
+  --color-primary: #68788f;
   --color-secondary: #3a4776;
-  --color-tertiary: #9499c3;
-  --color-success: #42b8b8;
-  --color-failed: #ee2479;
+  --color-tertiary: #9aaed1;
+  --color-success: #6cafaf;
+  --color-failed: #aa4b72;
 }

packages/view/src/styles/_pallete.scss renamed to packages/view/src/styles/_pallette.scss

@@ -1,4 +1,4 @@
-//pallete from Bootstrap
+//pallette from Bootstrap
 // red
 $red-50: #ffebee;
 $red-100: #ffcdd2;

packages/view/src/styles/_theme.scss

@@ -1,7 +1,6 @@
 @import "customTheme";
 @import "colors";
 @import "font";
-@import "pallete";
+@import "pallette";
 @import "reset";
-@import "theme";
 @import "utils";