fix: reduce hub header panel contrast color button and badge

richiesh · Jan 11, 2024 · c64d003 · c64d003
1 parent 4a70b8a
commit c64d003
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
@@ -6,6 +6,7 @@ const badgeVariants = cva('badge', {
   variants: {
     themes: {
       primary: 'badge-primary',
+      warning: 'badge-warning',
       success: 'badge-success',
       secondary: 'badge-secondary',
       danger: 'badge-danger',

diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
@@ -21,6 +21,10 @@
     @apply border-transparent bg-red-100 text-red-700;
   }
 
+  &-warning {
+    @apply border-transparent bg-yellow-100 text-yellow-700;
+  }
+
   &-outline {
     @apply text-foreground border-border border;
   }

diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
@@ -8,7 +8,7 @@
   }
 
   &-secondary-blue {
-    @apply bg-blue-200 text-blue-900 hover:bg-blue-500/80;
+    @apply bg-blue-200 text-blue-600 hover:bg-blue-500/80;
   }
 
   &-danger {

diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -71,7 +71,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
   if (isDownloaded) {
     downloadButton = (
       <Button
-        themes="success"
+        themes="secondaryBlue"
         className="min-w-[98px]"
         onClick={onUseModelClick}
       >
@@ -92,21 +92,21 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
 
     if (minimumRamModel > totalRam) {
       return (
-        <Badge className="rounded-md bg-red-500 text-white">
+        <Badge className="rounded-md" themes="danger">
           Not enough RAM
         </Badge>
       )
     }
     if (minimumRamModel < availableRam) {
       return (
-        <Badge className="rounded-md bg-green-500 text-white">
+        <Badge className="rounded-md" themes="success">
           Recommended
         </Badge>
       )
     }
     if (minimumRamModel < totalRam && minimumRamModel > availableRam) {
       return (
-        <Badge className="rounded-md bg-yellow-500 text-white">
+        <Badge className="rounded-md" themes="warning">
           Slow on your device
         </Badge>
       )