feat(console): default button style (#349)

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;

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);

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

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>

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);
           }}

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>

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);
           }}

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>

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>