From bfececcfe572261e919ab1087dd44a07e169c4da Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 22 Apr 2022 17:12:42 +0800
Subject: [PATCH] fix(console): detail top card spacing (#598)

---
 .../src/pages/ApiResourceDetails/index.module.scss  |  8 ++++++++
 .../console/src/pages/ApiResourceDetails/index.tsx  |  6 ++++--
 .../src/pages/ApplicationDetails/index.module.scss  |  9 ++++++---
 .../console/src/pages/ApplicationDetails/index.tsx  |  4 +++-
 .../src/pages/ConnectorDetails/index.module.scss    | 13 +++++++++----
 .../console/src/pages/ConnectorDetails/index.tsx    | 12 +++++++-----
 .../console/src/pages/UserDetails/index.module.scss | 12 ++++++------
 packages/console/src/pages/UserDetails/index.tsx    |  4 +++-
 8 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/console/src/pages/ApiResourceDetails/index.module.scss b/packages/console/src/pages/ApiResourceDetails/index.module.scss
index 4758d530c..89541220d 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.module.scss
+++ b/packages/console/src/pages/ApiResourceDetails/index.module.scss
@@ -12,6 +12,10 @@
   .info {
     display: flex;
 
+    .imagePlaceholder {
+      margin-left: _.unit(2);
+    }
+
     .meta {
       margin-left: _.unit(6);
       display: flex;
@@ -22,6 +26,10 @@
         font: var(--font-title-large);
         color: var(--color-text);
       }
+
+      .copy {
+        padding: _.unit(1) _.unit(2);
+      }
     }
   }
 
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 936f532b0..99b92f416 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -87,10 +87,12 @@ const ApiResourceDetails = () => {
         <>
           <Card className={styles.header}>
             <div className={styles.info}>
-              <ImagePlaceholder size={76} borderRadius={16} />
+              <div className={styles.imagePlaceholder}>
+                <ImagePlaceholder size={60} borderRadius={16} />
+              </div>
               <div className={styles.meta}>
                 <div className={styles.name}>{data.name}</div>
-                <CopyToClipboard value={data.indicator} />
+                <CopyToClipboard value={data.indicator} className={styles.copy} />
               </div>
             </div>
             <div className={styles.operations}>
diff --git a/packages/console/src/pages/ApplicationDetails/index.module.scss b/packages/console/src/pages/ApplicationDetails/index.module.scss
index 178e9d208..b276ab19e 100644
--- a/packages/console/src/pages/ApplicationDetails/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/index.module.scss
@@ -29,7 +29,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: _.unit(8);
+  padding: _.unit(6);
+
+  .imagePlaceholder {
+    margin-left: _.unit(2);
+  }
 
   > *:not(:first-child) {
     margin-left: _.unit(6);
@@ -55,7 +59,6 @@
     .details {
       display: flex;
       align-items: center;
-      margin-top: _.unit(2);
 
       > :not(:first-child) {
         margin-left: _.unit(2);
@@ -81,7 +84,7 @@
     }
 
     .copy {
-      padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
+      padding: _.unit(1) _.unit(2);
     }
   }
 }
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index 46c9a70c6..ea6d0e39a 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -188,7 +188,9 @@ const ApplicationDetails = () => {
       {data && oidcConfig && (
         <>
           <Card className={styles.header}>
-            <ImagePlaceholder size={76} borderRadius={16} />
+            <div className={styles.imagePlaceholder}>
+              <ImagePlaceholder size={60} borderRadius={16} />
+            </div>
             <div className={styles.metadata}>
               <div className={styles.name}>{data.name}</div>
               <div className={styles.details}>
diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss
index 117c41e73..15b4ccd12 100644
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@@ -5,7 +5,7 @@
 }
 
 .header {
-  padding: _.unit(8);
+  padding: _.unit(6);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14,10 +14,15 @@
     margin-left: _.unit(6);
   }
 
+  .imagePlaceholder {
+    margin-left: _.unit(2);
+  }
+
   .logo {
-    width: _.unit(19);
-    height: _.unit(19);
-    border-radius: _.unit(4);
+    display: block;
+    width: 60px;
+    height: 60px;
+    border-radius: 16px;
   }
 
   .operations {
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 9a268d51e..ab7b66d43 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -108,11 +108,13 @@ const ConnectorDetails = () => {
       {error && <div>{`error occurred: ${error.body.message}`}</div>}
       {data && (
         <Card className={styles.header}>
-          {data.metadata.logo.startsWith('http') ? (
-            <img src={data.metadata.logo} className={styles.logo} />
-          ) : (
-            <ImagePlaceholder size={76} borderRadius={16} />
-          )}
+          <div className={styles.imagePlaceholder}>
+            {data.metadata.logo.startsWith('http') ? (
+              <img src={data.metadata.logo} className={styles.logo} />
+            ) : (
+              <ImagePlaceholder size={60} borderRadius={16} />
+            )}
+          </div>
           <div className={styles.metadata}>
             <div>
               <div className={styles.name}>
diff --git a/packages/console/src/pages/UserDetails/index.module.scss b/packages/console/src/pages/UserDetails/index.module.scss
index 06146172e..119706279 100644
--- a/packages/console/src/pages/UserDetails/index.module.scss
+++ b/packages/console/src/pages/UserDetails/index.module.scss
@@ -5,7 +5,7 @@
 }
 
 .header {
-  padding: _.unit(8);
+  padding: _.unit(6);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14,6 +14,10 @@
     margin-left: _.unit(6);
   }
 
+  .imagePlaceholder {
+    margin-left: _.unit(2);
+  }
+
   .metadata {
     flex: 1;
 
@@ -21,10 +25,6 @@
       display: flex;
       align-items: center;
 
-      &:not(:first-child) {
-        margin-top: _.unit(2);
-      }
-
       > *:not(:first-child) {
         margin-left: _.unit(2);
       }
@@ -51,7 +51,7 @@
     }
 
     .copy {
-      padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
+      padding: _.unit(1) _.unit(2);
     }
   }
 }
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 44ea36294..7e40d42e3 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -115,7 +115,9 @@ const UserDetails = () => {
       {id && data && (
         <>
           <Card className={styles.header}>
-            <ImagePlaceholder size={76} borderRadius={16} />
+            <div className={styles.imagePlaceholder}>
+              <ImagePlaceholder size={60} borderRadius={16} />
+            </div>
             <div className={styles.metadata}>
               <div className={styles.name}>{data.name ?? '-'}</div>
               <div>