u

src/components/brand/BrandThumb.jsx

@@ -4,6 +4,7 @@ import ThumbHashImage from '../article/ThumbHashImage';
 import {
   SHADOW_THUMB_RING,
   TINT_ROW_HOVER,
+  WHITE,
 } from '../../colors';
 
 export default class BrandThumb extends PureComponent {
@@ -11,6 +12,7 @@ export default class BrandThumb extends PureComponent {
     const {
       brand,
       size = 40,
+      padding = 4,
       fallback = null,
       sx,
     } = this.props;
@@ -20,18 +22,21 @@ export default class BrandThumb extends PureComponent {
       return fallback;
     }
 
+    // Inner content area after padding (40px outer - 2 * 4px = 32x32 content).
+    const content = Math.max(1, size - padding * 2);
+
     const { thumbHash, fullHash, thumbW, thumbH } = pic;
     const ratio = thumbW && thumbH ? thumbW / thumbH : 1;
-    // Contain-fit inside a square `size x size` box, preserving aspect ratio.
+    // Contain-fit inside a square `content x content` box, preserving aspect ratio.
-    let innerW = size;
+    let innerW = content;
-    let innerH = size;
+    let innerH = content;
     if (Number.isFinite(ratio) && ratio > 0) {
       if (ratio >= 1) {
-        innerW = size;
+        innerW = content;
-        innerH = Math.max(1, Math.round(size / ratio));
+        innerH = Math.max(1, Math.round(content / ratio));
       } else {
-        innerH = size;
+        innerH = content;
-        innerW = Math.max(1, Math.round(size * ratio));
+        innerW = Math.max(1, Math.round(content * ratio));
       }
     }
 
@@ -46,11 +51,16 @@ export default class BrandThumb extends PureComponent {
           width: size,
           minWidth: size,
           maxWidth: size,
+          p: `${padding}px`,
           flexShrink: 0,
           verticalAlign: 'middle',
           lineHeight: 0,
           my: 0,
           boxSizing: 'border-box',
+          borderRadius: size >= 24 ? '6px' : '4px',
+          overflow: 'hidden',
+          bgcolor: WHITE,
+          boxShadow: SHADOW_THUMB_RING,
           ...sx,
         }}
       >
@@ -61,13 +71,12 @@ export default class BrandThumb extends PureComponent {
             position: 'relative',
             width: innerW,
             height: innerH,
-            borderRadius: size >= 24 ? '4px' : '3px',
+            borderRadius: size >= 24 ? '3px' : '2px',
             overflow: 'hidden',
             flexShrink: 0,
             lineHeight: 0,
             boxSizing: 'border-box',
             bgcolor: TINT_ROW_HOVER,
-            boxShadow: SHADOW_THUMB_RING,
           }}
         >
           {thumbHash ? (