From ac3f9ced587243bc5029db82065fc5edc5ac6158 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Sun, 24 Apr 2022 13:54:17 +0800
Subject: [PATCH] fix(console): ac iterations fixes (#650)

* fix: pagination margin

* fix: copytoclipboard style in table

* fix: large button in check readme

* fix: contact us ui
---
 .../components/Sidebar/components/Contact/index.module.scss | 6 +++++-
 .../components/Sidebar/components/Contact/index.tsx         | 2 +-
 .../src/components/CopyToClipboard/index.module.scss        | 5 ++++-
 packages/console/src/components/CopyToClipboard/index.tsx   | 5 +++--
 .../console/src/components/Pagination/index.module.scss     | 1 +
 packages/console/src/pages/ApiResourceDetails/index.tsx     | 3 ++-
 packages/console/src/pages/ApiResources/index.module.scss   | 3 ++-
 packages/console/src/pages/ApiResources/index.tsx           | 2 +-
 packages/console/src/pages/ApplicationDetails/index.tsx     | 3 ++-
 packages/console/src/pages/Applications/index.module.scss   | 3 ++-
 packages/console/src/pages/Applications/index.tsx           | 2 +-
 packages/console/src/pages/ConnectorDetails/index.tsx       | 3 ++-
 packages/console/src/pages/UserDetails/index.tsx            | 5 ++++-
 packages/console/src/pages/Users/index.module.scss          | 3 ++-
 packages/console/src/scss/_colors.scss                      | 2 ++
 15 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
index e3db506de..fc8d799bd 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
@@ -4,7 +4,7 @@
   .row {
     display: flex;
     align-items: center;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-divider);
     border-radius: _.unit(2);
     padding: _.unit(3) _.unit(4);
 
@@ -29,5 +29,9 @@
         color: var(--color-caption);
       }
     }
+
+    .button {
+      width: 90px;
+    }
   }
 }
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
index 36eeeedaf..a6848674f 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
@@ -35,7 +35,7 @@ const Contact = ({ isOpen, onCancel }: Props) => {
                 <div className={styles.description}>{t(description)}</div>
               </div>
               <div>
-                <Button type="outline" title={label} />
+                <Button type="outline" title={label} className={styles.button} />
               </div>
             </div>
           ))}
diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index 110427a81..6e9cb7021 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -4,11 +4,14 @@
   display: inline-block;
   padding: _.unit(2) _.unit(3);
   border-radius: 6px;
-  background: var(--color-inverse-on-surface);
   color: var(--color-on-secondary-container);
   font: var(--font-body-medium);
   cursor: default;
 
+  &.contained {
+    background: var(--color-inverse-on-surface);
+  }
+
   .row {
     display: flex;
     align-items: center;
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
index e1ba3ce9c..ecf5edff9 100644
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -8,6 +8,7 @@ import * as styles from './index.module.scss';
 type Props = {
   value: string;
   className?: string;
+  variant?: 'text' | 'contained';
 };
 
 const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
@@ -27,7 +28,7 @@ const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
 
 type CopyState = TFuncKey<'translation', 'admin_console.copy'>;
 
-const CopyToClipboard = ({ value, className }: Props) => {
+const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) => {
   const copyIconReference = useRef<SVGSVGElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('pending');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.copy' });
@@ -46,7 +47,7 @@ const CopyToClipboard = ({ value, className }: Props) => {
 
   return (
     <div
-      className={classNames(styles.container, className)}
+      className={classNames(styles.container, styles[variant], className)}
       onClick={(event) => {
         event.stopPropagation();
       }}
diff --git a/packages/console/src/components/Pagination/index.module.scss b/packages/console/src/components/Pagination/index.module.scss
index bd399f4fe..b5c9b0bdc 100644
--- a/packages/console/src/components/Pagination/index.module.scss
+++ b/packages/console/src/components/Pagination/index.module.scss
@@ -3,6 +3,7 @@
 .pagination {
   display: flex;
   justify-content: right;
+  margin: 0;
 
   li {
     list-style: none;
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 99b92f416..0dfad8e0a 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -98,6 +98,7 @@ const ApiResourceDetails = () => {
             <div className={styles.operations}>
               <Button
                 title="admin_console.api_resource_details.check_help_guide"
+                size="large"
                 onClick={() => {
                   setIsReadmeOpen(true);
                 }}
@@ -112,7 +113,7 @@ const ApiResourceDetails = () => {
                 <div>TBD</div>
               </Drawer>
               <ActionMenu
-                buttonProps={{ icon: <More /> }}
+                buttonProps={{ icon: <More />, size: 'large' }}
                 title={t('api_resource_details.more_options')}
               >
                 <ActionMenuItem
diff --git a/packages/console/src/pages/ApiResources/index.module.scss b/packages/console/src/pages/ApiResources/index.module.scss
index 43664e39b..c66fbfa2b 100644
--- a/packages/console/src/pages/ApiResources/index.module.scss
+++ b/packages/console/src/pages/ApiResources/index.module.scss
@@ -15,7 +15,8 @@
 }
 
 .pagination {
-  min-height: 64px;
+  margin-top: _.unit(4);
+  min-height: 32px;
 }
 
 .apiResourceName {
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 2203fc537..ea6742420 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -116,7 +116,7 @@ const ApiResources = () => {
                   <ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} />
                 </td>
                 <td>
-                  <CopyToClipboard value={indicator} />
+                  <CopyToClipboard value={indicator} variant="text" />
                 </td>
               </tr>
             ))}
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index ea6d0e39a..5af9c41fb 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -203,6 +203,7 @@ const ApplicationDetails = () => {
             <div className={styles.operations}>
               <Button
                 title="admin_console.application_details.check_help_guide"
+                size="large"
                 onClick={() => {
                   setIsReadmeOpen(true);
                 }}
@@ -217,7 +218,7 @@ const ApplicationDetails = () => {
                 <div>TBD</div>
               </Drawer>
               <ActionMenu
-                buttonProps={{ icon: <More /> }}
+                buttonProps={{ icon: <More />, size: 'large' }}
                 title={t('application_details.more_options')}
               >
                 <ActionMenuItem
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index 3f0ea711c..cf44c13a5 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -15,7 +15,8 @@
 }
 
 .pagination {
-  min-height: 64px;
+  margin-top: _.unit(4);
+  min-height: 32px;
 }
 
 .applicationName {
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index a514d5c0f..af313fd15 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -118,7 +118,7 @@ const Applications = () => {
                   />
                 </td>
                 <td>
-                  <CopyToClipboard value={id} />
+                  <CopyToClipboard value={id} variant="text" />
                 </td>
               </tr>
             ))}
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index ab7b66d43..ab0cf244e 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -133,6 +133,7 @@ const ConnectorDetails = () => {
           <div className={styles.operations}>
             <Button
               title="admin_console.connector_details.check_readme"
+              size="large"
               onClick={() => {
                 setIsReadMeOpen(true);
               }}
@@ -146,7 +147,7 @@ const ConnectorDetails = () => {
               <Markdown>{data.metadata.readme}</Markdown>
             </Drawer>
             <ActionMenu
-              buttonProps={{ icon: <More /> }}
+              buttonProps={{ icon: <More />, size: 'large' }}
               title={t('connector_details.more_options')}
             >
               {data.metadata.type !== ConnectorType.Social && (
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 7e40d42e3..036750147 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -128,7 +128,10 @@ const UserDetails = () => {
               </div>
             </div>
             <div>
-              <ActionMenu buttonProps={{ icon: <More /> }} title={t('user_details.more_options')}>
+              <ActionMenu
+                buttonProps={{ icon: <More />, size: 'large' }}
+                title={t('user_details.more_options')}
+              >
                 <ActionMenuItem
                   icon={<Reset />}
                   onClick={() => {
diff --git a/packages/console/src/pages/Users/index.module.scss b/packages/console/src/pages/Users/index.module.scss
index 624b7236e..fd1fc94b5 100644
--- a/packages/console/src/pages/Users/index.module.scss
+++ b/packages/console/src/pages/Users/index.module.scss
@@ -18,7 +18,8 @@
 }
 
 .pagination {
-  min-height: 64px;
+  margin-top: _.unit(4);
+  min-height: 32px;
 }
 
 .userName {
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index 86cb3e05f..1291e3959 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -128,6 +128,7 @@
   --color-icon: var(--color-neutral-50);
   --color-caption: var(--color-neutral-50);
   --color-border: var(--color-neutral-80);
+  --color-divider: var(--color-neutral-90);
   --color-disabled: var(--color-neutral-80);
   --color-base: var(--color-surface-1);
   --color-layer-1: var(--color-all-100);
@@ -278,6 +279,7 @@
   --color-icon: var(--color-neutral-50);
   --color-caption: var(--color-neutral-50);
   --color-border: var(--color-neutral-80);
+  --color-divider: var(--color-neutral-90);
   --color-disabled: var(--color-neutral-80);
   --color-base: #1e2124; // N99 + 3% P40
   --color-layer-1: var(--color-surface-2);