refactor(console): application detail header (#376)

packages/console/src/components/AppContent/index.module.scss

@@ -60,4 +60,5 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
   --font-caption-bold: 600 14px/20px #{$font-family};
   --font-button: 500 14px/20px #{$font-family};
   --font-subhead-2: 500 14px/20px #{$font-family};
+  --font-label-medium: 500 12px/16px #{$font-family};
 }

packages/console/src/components/CopyToClipboard/index.tsx

@@ -7,6 +7,7 @@ import * as styles from './index.module.scss';
 
 type Props = {
   value: string;
+  className?: string;
 };
 
 const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
@@ -26,7 +27,7 @@ const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
 
 type CopyState = TFuncKey<'translation', 'admin_console.copy'>;
 
-const CopyToClipboard = ({ value }: Props) => {
+const CopyToClipboard = ({ value, className }: Props) => {
   const copyIconReference = useRef<SVGSVGElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('pending');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.copy' });
@@ -45,7 +46,7 @@ const CopyToClipboard = ({ value }: Props) => {
 
   return (
     <div
-      className={styles.container}
+      className={classNames(styles.container, className)}
       onClick={(event) => {
         event.stopPropagation();
       }}

packages/console/src/components/Topbar/index.module.scss

@@ -12,10 +12,8 @@
   }
 
   .line {
-    border: 1px solid #c4c7c7;
+    @include _.vertical-bar;
     height: 24px;
-    width: 0;
-    flex: 0 0 0;
     margin: 0 _.unit(3);
   }
 

packages/console/src/pages/ApplicationDetails/index.module.scss

@@ -38,8 +38,24 @@
     }
 
     .type {
+      background-color: var(--color-neutral-90);
+      padding: _.unit(0.5) _.unit(2);
+      border-radius: 10px;
+      font: var(--font-label-medium);
+    }
+
+    .text {
       font: var(--font-subhead-2);
       color: var(--color-component-caption);
     }
+
+    .verticalBar {
+      @include _.vertical-bar;
+      height: 12px;
+    }
+
+    .copy {
+      padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
+    }
   }
 }

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
 import BackLink from '@/components/BackLink';
+import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
@@ -28,16 +29,17 @@ const ApplicationDetails = () => {
         <Card className={styles.header}>
           <ImagePlaceholder size={76} borderRadius={16} />
           <div className={styles.metadata}>
+            <div className={styles.name}>{data.name}</div>
             <div>
-              <div className={styles.name}>{data.name}</div>
               <div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div>
-            </div>
-            <div>
-              <div className={styles.type}>ID</div>
-              <CopyToClipboard value={data.id} />
+              <div className={styles.verticalBar} />
+              <div className={styles.text}>App ID</div>
+              <CopyToClipboard value={data.id} className={styles.copy} />
             </div>
           </div>
-          <div>action</div>
+          <div>
+            <Button title="admin_console.application_details.check_help_guide" />
+          </div>
         </Card>
       )}
     </div>

packages/console/src/scss/_underscore.scss

@@ -18,3 +18,8 @@
 @mixin form-text-field {
   width: 556px;
 }
+
+@mixin vertical-bar {
+  border: 1px solid #c4c7c7;
+  width: 0;
+}

packages/phrases/src/locales/en.ts

@@ -61,7 +61,7 @@ const translation = {
       client_id: 'Client ID',
       type: {
         native: {
-          title: 'Native',
+          title: 'Native App',
           subtitle: 'Mobile, desktop, CLI and smart device apps running natively.',
           description: 'E.g.: iOS, Electron, Apple TV apps',
         },
@@ -79,6 +79,7 @@ const translation = {
     },
     application_details: {
       back_to_applications: 'Back to Applications',
+      check_help_guide: 'Check Help Guide',
     },
     api_resources: {
       title: 'API Resources',

packages/phrases/src/locales/zh-cn.ts

@@ -63,7 +63,7 @@ const translation = {
       client_id: 'Client ID',
       type: {
         native: {
-          title: 'Native',
+          title: 'Native App',
           subtitle: 'Mobile, desktop, CLI and smart device apps running natively.',
           description: 'E.g.: iOS, Electron, Apple TV apps',
         },
@@ -81,6 +81,7 @@ const translation = {
     },
     application_details: {
       back_to_applications: '返回应用集',
+      check_help_guide: 'Check Help Guide',
     },
     api_resources: {
       title: 'API Resources',