From c9a8f8051d5681e00ad0990f861c8b4bb364f902 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Thu, 12 Oct 2023 10:56:21 +0700
Subject: [PATCH] feat(dialog): revise FingerprintDialog styles

refs:
- 2023-09-produce-02#PL-0012
---
 public/static/icons/16px/copy.svg             |   5 +-
 public/static/icons/16px/external-link.svg    |   6 +-
 .../FingerprintDialog/ArticleSecret.tsx       |  30 ++--
 .../Dialogs/FingerprintDialog/Content.tsx     | 145 ++++++++++--------
 .../SectionCard/styles.module.css             |   4 +
 .../FingerprintDialog/styles.module.css       |  27 +++-
 .../Dialogs/RssFeedDialog/Content.tsx         |   2 +-
 7 files changed, 116 insertions(+), 103 deletions(-)

diff --git a/public/static/icons/16px/copy.svg b/public/static/icons/16px/copy.svg
index 6b2e06f9a0..f59ac3b1f7 100644
--- a/public/static/icons/16px/copy.svg
+++ b/public/static/icons/16px/copy.svg
@@ -1,4 +1,3 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
-<path d="M12.6674 15.0014H12.3608H2.00049C1.4482 15.0014 1.00049 14.5537 1.00049 14.0014V3.64114V3.33386" stroke="currentColor" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.49905 11.0019V1.49756C4.49905 1.22142 4.72291 1.00085 4.99905 1.00085L14.499 1.00085C14.7752 1.00085 14.999 1.22471 14.999 1.50085V11.0008C14.999 11.277 14.7752 11.5008 14.499 11.5008H4.99905C4.72291 11.5008 4.49905 11.2781 4.49905 11.0019Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 5.5V4C5 3.17157 5.67157 2.5 6.5 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V9.5C13.5 10.3284 12.8284 11 12 11H10.5M5 5.5H4C3.17157 5.5 2.5 6.17157 2.5 7V12C2.5 12.8284 3.17157 13.5 4 13.5H9C9.82843 13.5 10.5 12.8284 10.5 12V11M5 5.5H9C9.82843 5.5 10.5 6.17157 10.5 7V11" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/public/static/icons/16px/external-link.svg b/public/static/icons/16px/external-link.svg
index 9f49631360..707176e3d4 100644
--- a/public/static/icons/16px/external-link.svg
+++ b/public/static/icons/16px/external-link.svg
@@ -1,5 +1,3 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
-<path d="M6.41968 9.57898L13.9994 1.99921" stroke="currentColor" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.0001 6.42074V1.99921H9.57861" stroke="currentColor" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.7368 9.63164V14.0006H1.99878V3.26263H6.36778" stroke="currentColor" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13L13 3M13 3L5.5 3M13 3V10.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx b/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx
index 4f08d27c33..d369db1fae 100644
--- a/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx
+++ b/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx
@@ -2,14 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { useIntl } from 'react-intl'
 
-import {
-  Button,
-  CopyToClipboard,
-  IconCopy16,
-  IconLocked24,
-  TextIcon,
-  Translate,
-} from '~/components'
+import { CopyToClipboard, IconCopy16, TextIcon, Translate } from '~/components'
 import { ArticleSecretQuery } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -56,21 +49,18 @@ const ArticleSecretSection: React.FC<ArticleSecretSectionProps> = ({ id }) => {
 
       <section className={styles.key}>
         <CopyToClipboard text={secret}>
-          <Button
+          <button
             aria-label={intl.formatMessage({ defaultMessage: 'Copy' })}
-            spacing={['xtight', 'base']}
-            bgColor="yellowLighter"
+            className={styles.copyButton}
           >
-            <TextIcon icon={<IconLocked24 size="md" />} spacing="xxtight">
-              <TextIcon
-                icon={<IconCopy16 />}
-                textPlacement="left"
-                spacing="xtight"
-              >
-                {secret.slice(0, 3)}...{secret.slice(-2)}
-              </TextIcon>
+            <TextIcon
+              icon={<IconCopy16 />}
+              textPlacement="left"
+              spacing="xtight"
+            >
+              {secret.slice(0, 4)}...{secret.slice(-4)}
             </TextIcon>
-          </Button>
+          </button>
         </CopyToClipboard>
       </section>
     </section>
diff --git a/src/components/Dialogs/FingerprintDialog/Content.tsx b/src/components/Dialogs/FingerprintDialog/Content.tsx
index 77995913da..8fa3c68e85 100644
--- a/src/components/Dialogs/FingerprintDialog/Content.tsx
+++ b/src/components/Dialogs/FingerprintDialog/Content.tsx
@@ -120,9 +120,10 @@ const FingerprintDialogContent = ({
         <SectionCard
           title={
             <TextIcon
-              icon={<IconIPFSGreen24 size="md" />}
+              icon={<IconIPFSGreen24 size="mdXS" />}
               spacing="xtight"
-              size="lg"
+              size="xm"
+              weight="md"
             >
               IPFS
             </TextIcon>
@@ -135,7 +136,7 @@ const FingerprintDialogContent = ({
             />
           }
         >
-          <Spacer size="xtight" />
+          <Spacer size="base" />
           <hr />
           <Spacer size="base" />
 
@@ -157,7 +158,7 @@ const FingerprintDialogContent = ({
               />
             </p>
 
-            <ul>
+            <ul className={styles.gatewayUrls}>
               {(!data || loading) && <Spinner />}
 
               {gateways.slice(0, 4).map((url) => {
@@ -222,71 +223,79 @@ const FingerprintDialogContent = ({
 
         {/* iscnId */}
         {iscnPublish && (isAuthor || iscnId) && !timeCooling && (
-          <SectionCard
-            title={
-              <TextIcon
-                icon={<IconISCN24 size="md" />}
-                size="lg"
-                spacing="xtight"
-              >
-                ISCN
-              </TextIcon>
-            }
-            description={
-              iscnId ? (
-                <Translate
-                  zh_hant="已在 LikeCoin 鏈上註冊的元數據"
-                  zh_hans="已在 LikeCoin 鏈上註冊的元數據"
-                  en="The metadata registered on LikeCoin chain"
-                />
-              ) : (
-                <Translate
-                  zh_hant="ISCN 寫入未成功"
-                  zh_hans="ISCN 写入未成功"
-                  en="ISCN is failed to register on LikeCoin chain"
-                />
-              )
-            }
-            warning={!iscnId}
-            right={
-              iscnId ? (
-                <a href={iscnLinkUrl(iscnId)} target="_blank" rel="noreferrer">
-                  <IconExternalLink16 color="greyDarker" />
-                </a>
-              ) : isAuthor ? (
-                <Button
-                  spacing={[0, 'xtight']}
-                  size={[null, '1.5rem']}
-                  bgColor="green"
-                  textColor="white"
-                  aria-label={translate({ id: 'retry', lang })}
-                  disabled={!pending && (timeCooling || retryPublishing)}
-                  onClick={() => {
-                    editArticle({
-                      variables: {
-                        id: articleId,
-                        iscnPublish: true,
-                      },
-                    })
-                    setTimeCooling(true)
-                    pooling(Date.now())
-                  }}
+          <>
+            <Spacer size="base" />
+            <SectionCard
+              title={
+                <TextIcon
+                  icon={<IconISCN24 size="mdXS" />}
+                  spacing="xtight"
+                  size="xm"
+                  weight="md"
                 >
-                  <TextIcon size="smS">
-                    {timeCooling ? (
-                      <Translate id="publishing2" />
-                    ) : retryPublishing ? (
-                      <Translate id="retrying" />
-                    ) : (
-                      <Translate id="retry" />
-                    )}
-                  </TextIcon>
-                </Button>
-              ) : (
-                <></>
-              )
-            }
-          />
+                  ISCN
+                </TextIcon>
+              }
+              description={
+                iscnId ? (
+                  <Translate
+                    zh_hant="已在 LikeCoin 鏈上註冊的元數據"
+                    zh_hans="已在 LikeCoin 鏈上註冊的元數據"
+                    en="The metadata registered on LikeCoin chain"
+                  />
+                ) : (
+                  <Translate
+                    zh_hant="ISCN 寫入未成功"
+                    zh_hans="ISCN 写入未成功"
+                    en="ISCN is failed to register on LikeCoin chain"
+                  />
+                )
+              }
+              warning={!iscnId}
+              right={
+                iscnId ? (
+                  <a
+                    href={iscnLinkUrl(iscnId)}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <IconExternalLink16 color="greyDarker" />
+                  </a>
+                ) : isAuthor ? (
+                  <Button
+                    spacing={[0, 'xtight']}
+                    size={[null, '1.5rem']}
+                    bgColor="green"
+                    textColor="white"
+                    aria-label={translate({ id: 'retry', lang })}
+                    disabled={!pending && (timeCooling || retryPublishing)}
+                    onClick={() => {
+                      editArticle({
+                        variables: {
+                          id: articleId,
+                          iscnPublish: true,
+                        },
+                      })
+                      setTimeCooling(true)
+                      pooling(Date.now())
+                    }}
+                  >
+                    <TextIcon size="smS">
+                      {timeCooling ? (
+                        <Translate id="publishing2" />
+                      ) : retryPublishing ? (
+                        <Translate id="retrying" />
+                      ) : (
+                        <Translate id="retry" />
+                      )}
+                    </TextIcon>
+                  </Button>
+                ) : (
+                  <></>
+                )
+              }
+            />
+          </>
         )}
       </section>
     </Dialog.Content>
diff --git a/src/components/Dialogs/FingerprintDialog/SectionCard/styles.module.css b/src/components/Dialogs/FingerprintDialog/SectionCard/styles.module.css
index 876d9c2e23..22eed2b223 100644
--- a/src/components/Dialogs/FingerprintDialog/SectionCard/styles.module.css
+++ b/src/components/Dialogs/FingerprintDialog/SectionCard/styles.module.css
@@ -10,4 +10,8 @@
   & .description {
     margin-top: var(--spacing-xx-tight);
   }
+
+  & .error {
+    color: var(--color-red);
+  }
 }
diff --git a/src/components/Dialogs/FingerprintDialog/styles.module.css b/src/components/Dialogs/FingerprintDialog/styles.module.css
index 5fd503d664..1a448c0216 100644
--- a/src/components/Dialogs/FingerprintDialog/styles.module.css
+++ b/src/components/Dialogs/FingerprintDialog/styles.module.css
@@ -7,11 +7,11 @@
 }
 
 .gateways {
-  & ul {
+  & .gatewayUrls {
     @mixin hide-scrollbar;
 
     padding: var(--spacing-x-tight) var(--spacing-base) 0;
-    margin: 0 calc(var(--spacing-base) * -1);
+    margin: var(--spacing-x-tight) calc(var(--spacing-base) * -1);
 
     & li {
       @mixin flex-center-space-between;
@@ -31,9 +31,9 @@
         width: 100%;
         padding-left: var(--spacing-x-tight);
         margin-right: var(--spacing-x-tight);
-        font-size: var(--font-size-md);
-        line-height: 2.5rem;
-        color: var(--color-grey-darker);
+        font-size: var(--font-size-sm);
+        line-height: 2.375rem;
+        color: var(--color-grey-dark);
 
         &.disabled {
           opacity: 0.5;
@@ -57,14 +57,27 @@
     @mixin flex-center-space-between;
   }
 
+  & .copyButton {
+    height: 2.5rem;
+    padding: 0 var(--spacing-base);
+    background: var(--color-yellow-lighter);
+    border-radius: 0.5rem;
+  }
+
   & .description {
     color: var(--color-matters-gold);
   }
 }
 
+.title {
+  font-size: var(--font-size-sm);
+  line-height: 1.375rem;
+}
+
 .description {
-  font-size: var(--font-size-sm-s);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
+  line-height: 1.125rem;
   color: var(--color-grey);
 
   &.error {
@@ -78,7 +91,7 @@
 
     position: relative;
     padding: var(--spacing-tight) var(--spacing-x-tight);
-    margin-top: var(--spacing-x-tight);
+    margin-top: var(--spacing-base);
     color: var(--color-matters-green);
     background: var(--color-green-lighter);
     border-radius: 0.25rem;
diff --git a/src/components/Dialogs/RssFeedDialog/Content.tsx b/src/components/Dialogs/RssFeedDialog/Content.tsx
index c140e4273c..21b1b1f2a0 100644
--- a/src/components/Dialogs/RssFeedDialog/Content.tsx
+++ b/src/components/Dialogs/RssFeedDialog/Content.tsx
@@ -165,7 +165,7 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
                 />
               </p>
 
-              <ul>
+              <ul className={styles.gatewayUrls}>
                 {(!data || loading) && <Spinner />}
 
                 {/* FIXME: remove filebase.io and meson.network */}