From 94cb1f4a2f4dbf668ca9f5f06944b178c6bde864 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 21 Nov 2022 15:48:44 +0800
Subject: [PATCH] refactor(console): settings (#2466)

---
 .../components/ChangePassword.module.scss     |  3 +-
 .../src/pages/Settings/index.module.scss      | 10 +----
 packages/console/src/pages/Settings/index.tsx | 42 +++++++------------
 .../de/translation/admin-console/settings.ts  |  5 +--
 .../en/translation/admin-console/settings.ts  |  5 +--
 .../fr/translation/admin-console/settings.ts  |  5 +--
 .../ko/translation/admin-console/settings.ts  |  5 +--
 .../translation/admin-console/settings.ts     |  5 +--
 .../translation/admin-console/settings.ts     |  5 +--
 .../translation/admin-console/settings.ts     |  5 +--
 10 files changed, 34 insertions(+), 56 deletions(-)

diff --git a/packages/console/src/pages/Settings/components/ChangePassword.module.scss b/packages/console/src/pages/Settings/components/ChangePassword.module.scss
index 3e6b81ffa..e5a6dd1ac 100644
--- a/packages/console/src/pages/Settings/components/ChangePassword.module.scss
+++ b/packages/console/src/pages/Settings/components/ChangePassword.module.scss
@@ -6,7 +6,8 @@
   padding: _.unit(4);
   display: flex;
   align-items: center;
-  width: 554px;
+  justify-content: space-between;
+  width: 100%;
 
   .description {
     font: var(--font-body-medium);
diff --git a/packages/console/src/pages/Settings/index.module.scss b/packages/console/src/pages/Settings/index.module.scss
index 36e2ee00b..9db36fc88 100644
--- a/packages/console/src/pages/Settings/index.module.scss
+++ b/packages/console/src/pages/Settings/index.module.scss
@@ -1,13 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  padding-bottom: 0;
-
-  .fields {
-    flex: 1;
-  }
-
-  .textField {
-    @include _.form-text-field;
+  >:not(:first-child) {
+    margin-top: _.unit(4);
   }
 }
diff --git a/packages/console/src/pages/Settings/index.tsx b/packages/console/src/pages/Settings/index.tsx
index 4431cdd6a..b006193d2 100644
--- a/packages/console/src/pages/Settings/index.tsx
+++ b/packages/console/src/pages/Settings/index.tsx
@@ -8,16 +8,15 @@ import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@/components/Button';
-import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
+import DetailsForm from '@/components/DetailsForm';
+import FormCard from '@/components/FormCard';
 import FormField from '@/components/FormField';
 import Select from '@/components/Select';
-import TabNav, { TabNavItem } from '@/components/TabNav';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import type { UserPreferences } from '@/hooks/use-user-preferences';
 import useUserPreferences from '@/hooks/use-user-preferences';
-import * as detailsStyles from '@/scss/details.module.scss';
+import * as resourcesStyles from '@/scss/resources.module.scss';
 
 import ChangePassword from './components/ChangePassword';
 import * as styles from './index.module.scss';
@@ -49,17 +48,19 @@ const Settings = () => {
   });
 
   return (
-    <Card className={classNames(detailsStyles.container, styles.container)}>
+    <div className={classNames(resourcesStyles.container, styles.container)}>
       <CardTitle title="settings.title" subtitle="settings.description" />
-      <TabNav>
-        <TabNavItem href="/settings">{t('settings.tabs.general')}</TabNavItem>
-      </TabNav>
       {isLoading && <div>loading</div>}
       {error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
       {isLoaded && (
-        <form className={detailsStyles.body} onSubmit={onSubmit}>
-          <div className={styles.fields}>
-            <FormField title="settings.language" className={styles.textField}>
+        <DetailsForm
+          isSubmitting={isSubmitting}
+          isDirty={isDirty}
+          onSubmit={onSubmit}
+          onDiscard={reset}
+        >
+          <FormCard title="settings.settings" description="settings.settings_description">
+            <FormField title="settings.language">
               <Controller
                 name="language"
                 control={control}
@@ -72,7 +73,7 @@ const Settings = () => {
                 )}
               />
             </FormField>
-            <FormField title="settings.appearance" className={styles.textField}>
+            <FormField title="settings.appearance">
               <Controller
                 name="appearanceMode"
                 control={control}
@@ -99,22 +100,11 @@ const Settings = () => {
               />
             </FormField>
             <ChangePassword />
-          </div>
-          <div className={detailsStyles.footer}>
-            <div className={detailsStyles.footerMain}>
-              <Button
-                isLoading={isSubmitting}
-                type="primary"
-                htmlType="submit"
-                size="large"
-                title="general.save_changes"
-              />
-            </div>
-          </div>
-        </form>
+          </FormCard>
+        </DetailsForm>
       )}
       <UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />
-    </Card>
+    </div>
   );
 };
 
diff --git a/packages/phrases/src/locales/de/translation/admin-console/settings.ts b/packages/phrases/src/locales/de/translation/admin-console/settings.ts
index e20d8050e..69cd694de 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: 'Einstellungen',
   description: 'Verwalte die globalen Einstellungen',
-  tabs: {
-    general: 'Allgemein',
-  },
+  settings: 'Einstellungen',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: 'Benutzerdefinierte Domain',
   language: 'Sprache',
   appearance: 'Darstellung',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/settings.ts b/packages/phrases/src/locales/en/translation/admin-console/settings.ts
index 967c8a542..7ad214a3d 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: 'Settings',
   description: 'Manage the global settings',
-  tabs: {
-    general: 'General',
-  },
+  settings: 'Settings',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: 'Custom domain',
   language: 'Language',
   appearance: 'Appearance',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/settings.ts b/packages/phrases/src/locales/fr/translation/admin-console/settings.ts
index f18ce705a..67b697833 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: 'Paramètres',
   description: 'Gérer les paramètres globaux',
-  tabs: {
-    general: 'Général',
-  },
+  settings: 'Paramètres',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: 'Domaine personnalisé',
   language: 'Langue',
   appearance: 'Apparence',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/settings.ts b/packages/phrases/src/locales/ko/translation/admin-console/settings.ts
index 4d00e0010..9f8b2d493 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: '설정',
   description: '전체 설정을 관리해보세요.',
-  tabs: {
-    general: '일반',
-  },
+  settings: '설정',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: '커스텀 도메인',
   language: '언어',
   appearance: '모습',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/settings.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/settings.ts
index 7f86eb2a6..42d585565 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: 'Definições',
   description: 'Gerenciar as configurações globais',
-  tabs: {
-    general: 'Geral',
-  },
+  settings: 'Definições',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: 'Domínio personalizado',
   language: 'Linguagem',
   appearance: 'Aparência',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/settings.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/settings.ts
index bc6ff96cb..f94ce442c 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: 'Ayarlar',
   description: 'Genel ayarları yönet',
-  tabs: {
-    general: 'Genel',
-  },
+  settings: 'Ayarlar',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: 'Özel alan',
   language: 'Dil',
   appearance: 'Görünüm',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/settings.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/settings.ts
index fbb8e77f6..38e5ef199 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/settings.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/settings.ts
@@ -1,9 +1,8 @@
 const settings = {
   title: '设置',
   description: '管理全局设置',
-  tabs: {
-    general: '通用',
-  },
+  settings: '设置',
+  settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
   custom_domain: '自定义域名',
   language: '语言',
   appearance: '外观',