From 75f4341e177d1e29817726ea57f27a507a7a8621 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 31 Jan 2024 14:41:09 +0800
Subject: [PATCH] fix(console): improve "try it" button style in protected app
 details page (#5351)

fix(console): "try it" button style
---
 .../ProtectedAppSettings/index.module.scss      | 17 +++++++++++++++--
 .../toolkit/core-kit/scss/_console-themes.scss  |  4 +++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
index 8e6db3937..e8a0a31c2 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
@@ -6,7 +6,7 @@
   justify-content: space-between;
   padding: _.unit(3) _.unit(4);
   background: var(--color-success-container);
-  border: 1px solid var(--color-on-success-container);
+  border: 1px solid var(--color-success-60);
   border-radius: 8px;
   font: var(--font-body-2);
   gap: _.unit(4);
@@ -16,10 +16,23 @@
   }
 
   .button {
-    background: var(--color-on-success-container);
+    background: var(--color-success-60);
     color: var(--color-static-white);
     border: none;
     flex-shrink: 0;
+    gap: _.unit(1.5);
+
+    svg {
+      color: rgba(#fff, 0.6);
+    }
+
+    &:active {
+      background: var(--color-success-50);
+    }
+
+    &:not(:disabled):not(:active):hover {
+      background: var(--color-success-70);
+    }
   }
 }
 
diff --git a/packages/toolkit/core-kit/scss/_console-themes.scss b/packages/toolkit/core-kit/scss/_console-themes.scss
index 0540c6de5..c6ed2d039 100644
--- a/packages/toolkit/core-kit/scss/_console-themes.scss
+++ b/packages/toolkit/core-kit/scss/_console-themes.scss
@@ -92,6 +92,7 @@
   --color-alert-99: #fff5eb;
 
   // color aliases
+  --color-static-white: #fff;
   --color-primary: var(--color-primary-40);
   --color-on-primary: var(--color-all-100);
   --color-primary-container: var(--color-primary-90);
@@ -189,7 +190,7 @@
   // Background
   --color-bg-body-base: var(--color-neutral-95);
   --color-bg-body: var(--color-neutral-100);
-  --color-bg-layer-1: var(--color-static-white);
+  --color-bg-layer-1: var(--color-all-100);
   --color-bg-layer-2: var(--color-neutral-95);
   --color-bg-body-overlay: var(--color-neutral-100);
   --color-bg-float-base: var(--color-neutral-variant-90);
@@ -296,6 +297,7 @@
   --color-alert-99: #2b1700;
 
   // color aliases
+  --color-static-white: #fff;
   --color-primary: var(--color-primary-70);
   --color-on-primary: var(--color-all-0);
   --color-primary-container: var(--color-primary-30);