From 890028d937d740e63fb23b8e2b81a1fa44b0731c Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Fri, 6 May 2022 11:42:39 +0800
Subject: [PATCH] fix(console): text field style in settings (#739)

---
 .../src/components/Dropdown/index.module.scss        |  4 ++--
 .../console/src/pages/Settings/index.module.scss     |  6 ++++++
 packages/console/src/pages/Settings/index.tsx        | 12 ++++++++++--
 packages/console/src/scss/_colors.scss               |  2 ++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/console/src/components/Dropdown/index.module.scss b/packages/console/src/components/Dropdown/index.module.scss
index 71ab437df..7e1eb30e2 100644
--- a/packages/console/src/components/Dropdown/index.module.scss
+++ b/packages/console/src/components/Dropdown/index.module.scss
@@ -2,12 +2,12 @@
 
 .content {
   background: var(--color-layer-1);
-  box-shadow: var(--shadow-light-s2);
+  box-shadow: var(--shadow-2);
   border-radius: _.unit(2);
   position: absolute;
 
   &.onTop {
-    box-shadow: var(--shadow-light-s2-reversed);
+    box-shadow: var(--shadow-2-reversed);
   }
 
   &:focus {
diff --git a/packages/console/src/pages/Settings/index.module.scss b/packages/console/src/pages/Settings/index.module.scss
index cbc59fe9e..36e2ee00b 100644
--- a/packages/console/src/pages/Settings/index.module.scss
+++ b/packages/console/src/pages/Settings/index.module.scss
@@ -1,7 +1,13 @@
+@use '@/scss/underscore' as _;
+
 .container {
   padding-bottom: 0;
 
   .fields {
     flex: 1;
   }
+
+  .textField {
+    @include _.form-text-field;
+  }
 }
diff --git a/packages/console/src/pages/Settings/index.tsx b/packages/console/src/pages/Settings/index.tsx
index 59eb59c54..977a2724e 100644
--- a/packages/console/src/pages/Settings/index.tsx
+++ b/packages/console/src/pages/Settings/index.tsx
@@ -64,7 +64,11 @@ const Settings = () => {
       {data && (
         <form className={detailsStyles.body} onSubmit={onSubmit}>
           <div className={styles.fields}>
-            <FormField isRequired title="admin_console.settings.language">
+            <FormField
+              isRequired
+              title="admin_console.settings.language"
+              className={styles.textField}
+            >
               <Controller
                 name="adminConsole.language"
                 control={control}
@@ -86,7 +90,11 @@ const Settings = () => {
                 )}
               />
             </FormField>
-            <FormField isRequired title="admin_console.settings.appearance">
+            <FormField
+              isRequired
+              title="admin_console.settings.appearance"
+              className={styles.textField}
+            >
               <Controller
                 name="adminConsole.appearanceMode"
                 control={control}
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index 98f302a5d..9a3105d4f 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -144,6 +144,7 @@
   // Shadows
   --shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
   --shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
   --shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
 
   // Client specific variables (not available in design system)
@@ -296,6 +297,7 @@
   // Shadows
   --shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
   --shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
   --shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
 
   // Client specific variables (not available in design system)