From ad769cd4a841cad8f2cbc1700e93c4eb572f091e Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Fri, 8 Apr 2022 11:20:34 +0800
Subject: [PATCH] fix(console): fix placeholder image padding (#512)

---
 .../console/src/components/ImagePlaceholder/index.module.scss | 3 +++
 packages/console/src/components/ImagePlaceholder/index.tsx    | 4 ++--
 .../Connectors/components/ConnectorName/index.module.scss     | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/console/src/components/ImagePlaceholder/index.module.scss b/packages/console/src/components/ImagePlaceholder/index.module.scss
index f4a42bfd7..0c3515f03 100644
--- a/packages/console/src/components/ImagePlaceholder/index.module.scss
+++ b/packages/console/src/components/ImagePlaceholder/index.module.scss
@@ -1,6 +1,9 @@
+@use '@/scss/underscore' as _;
+
 .container {
   background: rgba(#ffcc4d, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: _.unit(2);
 }
diff --git a/packages/console/src/components/ImagePlaceholder/index.tsx b/packages/console/src/components/ImagePlaceholder/index.tsx
index 875a51e80..e3eb7b8c0 100644
--- a/packages/console/src/components/ImagePlaceholder/index.tsx
+++ b/packages/console/src/components/ImagePlaceholder/index.tsx
@@ -14,11 +14,11 @@ const ImagePlaceholder = ({ size = 40, borderRadius = 8 }: Props) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.container} style={{ width: size, height: size, borderRadius }}>
+    <div className={styles.container} style={{ borderRadius }}>
       <img
         alt={t('general.placeholder')}
         src={defaultPlaceholder}
-        style={{ width: size, height: size }}
+        style={{ width: size - 16, height: size - 16 }}
       />
     </div>
   );
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 348f2c69e..163287bde 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss
@@ -4,7 +4,7 @@ a.link {
 }
 
 .logo {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   border-radius: 5px;
 }