From c64d0038f30efde1249c598ef3c1f66b7c97b5ae Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 11 Jan 2024 11:36:17 +0700
Subject: [PATCH] fix: reduce hub header panel contrast color button and badge

---
 uikit/src/badge/index.tsx                                 | 1 +
 uikit/src/badge/styles.scss                               | 4 ++++
 uikit/src/button/styles.scss                              | 2 +-
 .../ExploreModels/ExploreModelItemHeader/index.tsx        | 8 ++++----
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
index 387932ff00..2b904432d9 100644
--- 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
index 77feb0769d..b777892d74 100644
--- 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
index 2b1e239a5a..9c634e67e2 100644
--- 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
index c35e480f22..2ec57183fe 100644
--- 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>
       )