From 2d663025ecbd08dc39878e2fd32cfb08b92e9b3a Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 27 Jun 2022 13:17:18 +0800
Subject: [PATCH] fix(console): icons in item preview should not be shrinked
 (#1234)

---
 .../src/pages/ApiResources/index.module.scss  |  4 ++
 .../console/src/pages/ApiResources/index.tsx  | 47 ++++++++++---------
 .../src/pages/Applications/index.module.scss  |  4 ++
 .../console/src/pages/Applications/index.tsx  |  2 +-
 .../ConnectorName/index.module.scss           |  1 +
 .../console/src/pages/Users/index.module.scss |  1 +
 6 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/console/src/pages/ApiResources/index.module.scss b/packages/console/src/pages/ApiResources/index.module.scss
index c66fbfa2b..ed7edbe09 100644
--- a/packages/console/src/pages/ApiResources/index.module.scss
+++ b/packages/console/src/pages/ApiResources/index.module.scss
@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.icon {
+  flex-shrink: 0;
+}
+
 .pagination {
   margin-top: _.unit(4);
   min-height: 32px;
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 5164cc11e..43ed512a0 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -108,28 +108,31 @@ const ApiResources = () => {
                 />
               </TableEmpty>
             )}
-            {apiResources?.map(({ id, name, indicator }) => (
-              <tr
-                key={id}
-                className={tableStyles.clickable}
-                onClick={() => {
-                  navigate(buildDetailsLink(id));
-                }}
-              >
-                <td>
-                  <ItemPreview
-                    title={name}
-                    icon={
-                      theme === AppearanceMode.LightMode ? <ApiResource /> : <ApiResourceDark />
-                    }
-                    to={buildDetailsLink(id)}
-                  />
-                </td>
-                <td>
-                  <CopyToClipboard value={indicator} variant="text" />
-                </td>
-              </tr>
-            ))}
+            {apiResources?.map(({ id, name, indicator }) => {
+              const ResourceIcon =
+                theme === AppearanceMode.LightMode ? ApiResource : ApiResourceDark;
+
+              return (
+                <tr
+                  key={id}
+                  className={tableStyles.clickable}
+                  onClick={() => {
+                    navigate(buildDetailsLink(id));
+                  }}
+                >
+                  <td>
+                    <ItemPreview
+                      title={name}
+                      icon={<ResourceIcon className={styles.icon} />}
+                      to={buildDetailsLink(id)}
+                    />
+                  </td>
+                  <td>
+                    <CopyToClipboard value={indicator} variant="text" />
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index cf44c13a5..34a50ba5d 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.icon {
+  flex-shrink: 0;
+}
+
 .pagination {
   margin-top: _.unit(4);
   min-height: 32px;
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 35330fa9a..fdc3ab7ec 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -115,7 +115,7 @@ const Applications = () => {
                   <ItemPreview
                     title={name}
                     subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
-                    icon={<ApplicationIcon type={type} />}
+                    icon={<ApplicationIcon className={styles.icon} type={type} />}
                     to={`/applications/${id}`}
                   />
                 </td>
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss b/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss
index 2f8727a94..2debcd2ff 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss
@@ -13,6 +13,7 @@ a.link {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .logo {
diff --git a/packages/console/src/pages/Users/index.module.scss b/packages/console/src/pages/Users/index.module.scss
index 5efe3b176..d065e09cb 100644
--- a/packages/console/src/pages/Users/index.module.scss
+++ b/packages/console/src/pages/Users/index.module.scss
@@ -38,6 +38,7 @@
   height: 28px;
   border-radius: 6px;
   object-fit: cover;
+  flex-shrink: 0;
 }
 
 .userName {