From 8f94a0d76bcfd82dda064e85b784cf8f40bf7c1e Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Wed, 9 Mar 2022 15:32:11 +0800
Subject: [PATCH] feat(console): default button style (#349)

---
 .../components/AppContent/index.module.scss   |  1 +
 .../src/components/Button/index.module.scss   | 21 +++++++++++++++++++
 .../console/src/components/Button/index.tsx   |  4 ++--
 .../components/CreateForm/index.tsx           |  7 ++++++-
 .../console/src/pages/ApiResources/index.tsx  |  1 +
 .../components/CreateForm/index.tsx           |  7 ++++++-
 .../console/src/pages/Applications/index.tsx  |  1 +
 .../Connectors/components/ConnectorRow.tsx    |  2 +-
 .../console/src/pages/Connectors/index.tsx    |  4 ++--
 9 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index 59a056911..731230c56 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -31,6 +31,7 @@
   --color-inverse-on-surface: #eff1f1;
   --color-neutral-70: #a9acac;
   --color-neutral-90: #e0e3e3;
+  --color-neutral-95: #eff1f1;
   --color-on-secondary-container: #201c00;
   --color-component-border: #c4c7c7;
   --color-component-caption: #747778;
diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index 2c34cd488..9df984eed 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -27,6 +27,27 @@
     padding: 0 _.unit(6);
   }
 
+  &.default {
+    background: var(--color-card-background);
+    color: var(--color-text-default);
+    border-color: var(--color-outline);
+    border-width: 1px;
+    border-style: solid;
+
+    &:disabled {
+      background: var(--color-neutral-95);
+      border-color: var(--color-neutral-95);
+    }
+
+    &:focus {
+      outline: 3px solid var(--color-neutral-90);
+    }
+
+    &:not(:disabled):hover {
+      background: var(--color-neutral-95);
+    }
+  }
+
   &.primary {
     background: var(--color-primary);
     color: var(--color-on-primary);
diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx
index 9459936c4..fb23376c7 100644
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@@ -8,13 +8,13 @@ import * as styles from './index.module.scss';
 type Props = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
   htmlType?: 'button' | 'submit' | 'reset';
   title: I18nKey;
-  type?: 'primary' | 'danger';
+  type?: 'primary' | 'danger' | 'default';
   size?: 'small' | 'medium' | 'large';
 };
 
 const Button = ({
   htmlType = 'button',
-  type = 'primary',
+  type = 'default',
   size = 'medium',
   title,
   ...rest
diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
index 913df0a70..fbda8ecfb 100644
--- a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
@@ -55,7 +55,12 @@ const CreateForm = ({ onClose }: Props) => {
           <TextInput {...register('indicator', { required: true })} />
         </FormField>
         <div className={styles.submit}>
-          <Button htmlType="submit" title="admin_console.api_resources.create" size="large" />
+          <Button
+            htmlType="submit"
+            title="admin_console.api_resources.create"
+            size="large"
+            type="primary"
+          />
         </div>
       </form>
     </Card>
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 81996024b..3dbe4e0c4 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -29,6 +29,7 @@ const ApiResources = () => {
         <CardTitle title="api_resources.title" subtitle="api_resources.subtitle" />
         <Button
           title="admin_console.api_resources.create"
+          type="primary"
           onClick={() => {
             setIsCreateFormOpen(true);
           }}
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index 978d92039..e97abe5bd 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -84,7 +84,12 @@ const CreateForm = ({ onClose }: Props) => {
           <TextInput />
         </FormField>
         <div className={styles.submit} {...register('description')}>
-          <Button htmlType="submit" title="admin_console.applications.create" size="large" />
+          <Button
+            htmlType="submit"
+            title="admin_console.applications.create"
+            size="large"
+            type="primary"
+          />
         </div>
       </form>
     </Card>
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 459a79136..9c669efe8 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -32,6 +32,7 @@ const Applications = () => {
         <CardTitle title="applications.title" subtitle="applications.subtitle" />
         <Button
           title="admin_console.applications.create"
+          type="primary"
           onClick={() => {
             setIsCreateFormOpen(true);
           }}
diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
index fa2f69da5..4615cb344 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
@@ -47,7 +47,7 @@ const ConnectorRow = ({ type, connector }: Props) => {
           <Status status="operational">{t('connectors.connector_status_enabled')}</Status>
         )}
         {type !== ConnectorType.Social && !connector && (
-          <Button title="admin_console.connectors.set_up" />
+          <Button title="admin_console.connectors.set_up" type="primary" />
         )}
       </td>
     </tr>
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index c2bedbd3a..8ef635585 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -43,7 +43,7 @@ const Connectors = () => {
     <Card>
       <div className={styles.headline}>
         <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
-        {isSocial && <Button disabled title="admin_console.connectors.create" />}
+        {isSocial && <Button disabled title="admin_console.connectors.create" type="primary" />}
       </div>
       <TabNav>
         <TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink>
@@ -77,7 +77,7 @@ const Connectors = () => {
                   </div>
                   <div className={styles.emptyLine}>{t('connectors.type.social')}</div>
                   <div className={styles.emptyLine}>{t('connectors.social_connector_eg')}</div>
-                  <Button disabled title="admin_console.connectors.create" />
+                  <Button disabled title="admin_console.connectors.create" type="primary" />
                 </div>
               </td>
             </tr>