fix(console): ac iterations fixes (#650)

* fix: pagination margin * fix: copytoclipboard style in table * fix: large button in check readme * fix: contact us ui
2025-01-20 21:32:31 -05:00 · 2022-04-24 13:54:17 +08:00 · 2022-04-24 13:54:17 +08:00 · ac3f9ced58
commit ac3f9ced58
parent f846872dc5
15 changed files with 34 additions and 14 deletions
--- 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;
+    }
  }
 }
--- 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>
          ))}
--- 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;
--- 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();
      }}
--- 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;
--- 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
--- 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 {
--- 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>
            ))}
--- 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
--- 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 {
--- 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>
            ))}
--- 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 && (
--- 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={() => {
--- 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 {
--- 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);