From a3db1f71773cf6179bb2a4aed0d9cf7667cf7b93 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 31 Jan 2024 16:22:17 +0800
Subject: [PATCH] fix(console): protected app form field should have layer-1
 background (#5358)

fix(console): protected app form field should have layer-1 background color
---
 .../components/ProtectedAppForm/index.module.scss             | 4 ++++
 .../pages/Applications/components/ProtectedAppForm/index.tsx  | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
index 44fa0a8bc..44893cfe4 100644
--- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
+++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
@@ -42,6 +42,10 @@ form {
   }
 }
 
+.input {
+  background: var(--color-layer-1);
+}
+
 .domainFieldWrapper {
   display: flex;
   width: 100%;
diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
index f65ba1ffc..4ecf166b7 100644
--- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
@@ -122,6 +122,7 @@ function ProtectedAppForm({
           tip={conditional(!hasDetailedInstructions && t('protected_app.form.url_field_tooltip'))}
         >
           <TextInput
+            className={styles.input}
             {...register('origin', {
               required: true,
               validate: (value) =>
@@ -153,7 +154,7 @@ function ProtectedAppForm({
         >
           <div className={styles.domainFieldWrapper}>
             <TextInput
-              className={styles.subdomain}
+              className={classNames(styles.input, styles.subdomain)}
               {...register('subDomain', {
                 required: true,
                 validate: (value) =>