update: tag styles change

apache · Sep 26, 2024 · f8fd872 · f8fd872
1 parent 5ffa558
commit f8fd872
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 57 deletions.
diff --git a/ui/src/common/color.scss b/ui/src/common/color.scss
@@ -110,31 +110,19 @@
 
   /** tag **/
   .badge-tag {
-    background: rgba($blue-900, 0.5);
-    color: $blue-300;
-    &:hover {
-      color: $blue-300;
-      background: $blue-900;
-    }
-  }
-  .badge-tag-required {
     background: $gray-800;
-    color:$gray-300;
-    border: 1px solid $gray-600;
+    color: $gray-300;
     &:hover {
-      color: $gray-300;
-      background: $gray-700;
+      background: $gray-600;
     }
   }
+
   .badge-tag-reserved {
-    color: $orange-300;
-    background: rgba($orange-900, 0.5);
-    border: 1px solid $orange-900;
+    color: $orange-200;
+    background: $orange-800;
     &:hover {
-      color: $orange-300;
-      background: rgba($orange-900, 1);
+      background: $orange-700;
     }
   }
 
-
 }
diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx
@@ -143,31 +143,7 @@ const Index: FC = () => {
               .link-primary:hover, .link-primary:focus {
                 color: ${shadeColor(primaryColor, 0.8).hex()}!important;
               }
-              .badge-tag:not(.badge-tag-reserved, .badge-tag-required) {
-                background-color: rgba(${tintColor(primaryColor, 0.2)
-                  .rgb()
-                  .array()
-                  .join(',')}, .5);
-                color: ${shadeColor(primaryColor, 0.6).hex()}
-              }
-              .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) !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) !important;
-                color: ${tintColor(primaryColor, 0.6).hex()} !important;
-              }
             `}
         </style>
       )}

diff --git a/ui/src/index.scss b/ui/src/index.scss
@@ -87,33 +87,26 @@ img[src=""] {
 .badge-tag {
   display: inline-block;
   font-size: 14px;
-  background: rgba($blue-100, 0.5);
+  background: $gray-200;
   padding: 0 7px 1px;
-  color: $blue-700;
+  color: $gray-700;
+  font-weight: 400;
   border: 1px solid transparent;
   &:hover {
-    color: $blue-700;
-    background: $blue-100;
+    background: $gray-300;
   }
 }
 
 .badge-tag-required {
-  background: $gray-200;
-  color: $gray-700;
-  border: 1px solid $gray-400;
-  &:hover {
-    color: $gray-700;
-    background: $gray-300;
-  }
+  font-weight: 700;
 }
 
 .badge-tag-reserved {
-  background: rgba($orange-100, 0.5);
+  background: $orange-100;
   color: $orange-700;
-  border: 1px solid $orange-100;
+  border: 1px solid transparent;
   &:hover {
-    color: $orange-700;
-    background: rgba($orange-100, 1);
+    background: $orange-200;
   }
 }