Feat/1.2.5/UI (#756)

ui/src/components/CustomizeTheme/index.tsx

@@ -59,8 +59,18 @@ const Index: FC = () => {
                   .array()}
               }
               :root[data-bs-theme='dark'] {
-                --bs-link-hover-color: ${shiftColor(primaryColor, -0.8).hex()};
-                --bs-link-hover-color-rgb: ${shiftColor(primaryColor, -0.8)
+                --bs-link-color: ${tintColor(primaryColor, 0.6).hex()};
+                --bs-link-color-rgb: ${tintColor(primaryColor, 0.6)
+                  .round()
+                  .array()};
+                --bs-link-hover-color: ${shiftColor(
+                  tintColor(primaryColor, 0.6),
+                  -0.8,
+                ).hex()};
+                --bs-link-hover-color-rgb: ${shiftColor(
+                  tintColor(primaryColor, 0.6),
+                  -0.8,
+                )
                   .round()
                   .array()};
               }
@@ -115,6 +125,12 @@ const Index: FC = () => {
                   0.5,
                 )}%27/%3e%3c/svg%3e");
               }
+              .tag-selector-wrap--focus {
+                box-shadow: 0 0 0 0.25rem ${primaryColor
+                  .fade(0.75)
+                  .string()} !important;
+                border-color: ${tintColor(primaryColor, 0.5)} !important;
+              }
               .dropdown-menu {
                 --bs-dropdown-link-active-bg: rgb(var(--bs-primary-rgb));
               }
@@ -134,23 +150,20 @@ const Index: FC = () => {
               .badge-tag:not(.badge-tag-reserved, .badge-tag-required):hover {
                  background-color: ${tintColor(primaryColor, 0.2).hex()};
               }
+
               [data-bs-theme="dark"] .badge-tag:not(.badge-tag-reserved):not(.badge-tag-required) {
                 background-color: rgba(${shadeColor(primaryColor, 0.2)
                   .rgb()
                   .array()
-                  .join(',')}, .5);
-                color: ${tintColor(primaryColor, 0.4).hex()};
+                  .join(',')}, .5) !important;
+                color: ${tintColor(primaryColor, 0.4).hex()} !important;
               }
               [data-bs-theme="dark"] .badge-tag:not(.badge-tag-reserved, .badge-tag-required):hover {
                 background-color: rgba(${tintColor(
                   primaryColor,
                   0.4,
-                ).hex()}, 0.8);
-                color: ${tintColor(primaryColor, 0.6).hex()};
-              }
-              [data-bs-theme="dark"] .tag-selector-wrap--focus {
-                border-color: ${tintColor(primaryColor, 0.5)} !important;
-                box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .4) !important;
+                ).hex()}, 0.8) !important;
+                color: ${tintColor(primaryColor, 0.6).hex()} !important;
               }
             `}
         </style>

ui/src/components/Header/index.scss

@@ -22,7 +22,7 @@
 #header {
   transform: translate3d(0,0,0);
   --bs-navbar-padding-y: 0.75rem;
-  background: linear-gradient(180deg, rgb(var(--bs-primary-rgb)) 0%, rgba(var(--bs-primary-rgb), 0.95) 100%);
+  background: var(--bs-primary);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
   .logo {
     max-height: 2rem;
@@ -70,7 +70,7 @@
 
   // style for colored navbar
   &.theme-light {
-    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.95) 100%);
+    background: rgb(255, 255, 255);
     .nav-link {
       color: rgba(0, 0, 0, 0.65);
     }

ui/src/components/TagSelector/index.scss

@@ -66,7 +66,5 @@
 .tag-selector-wrap--focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  box-shadow: 0 0 0 0.25rem rgba(84, 125, 248, 0.25) !important;
-  border-color: rgb(170, 190, 252) !important;
   outline: 0;
 }