🪟 🎨 Update favicon and table row image styles

airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss

@@ -0,0 +1,41 @@
+@use "../../scss/colors";
+
+.iconContainer {
+  height: 25px;
+  width: 25px;
+  text-align: center;
+  overflow: hidden;
+  margin-right: 6px;
+}
+
+.circle {
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  border-radius: 50%;
+  text-align: center;
+  margin-right: 6px;
+  overflow: hidden;
+
+  &.darkBlue {
+    background: colors.$dark-blue-100;
+  }
+}
+
+.small {
+  border-radius: 0%;
+}
+
+.icon {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.number {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  color: colors.$white;
+  padding: 3px 0 3px;
+}

airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx

@@ -1,39 +1,29 @@
+import classnames from "classnames";
 import React from "react";
-import styled from "styled-components";
 
 import { getIcon } from "utils/imageUtils";
 
-interface IProps {
+import styles from "./ImageBlock.module.scss";
+
+interface ImageBlockProps {
   img?: string;
-  className?: string;
   num?: number;
   small?: boolean;
 }
 
-export const Content = styled.div<{ small?: boolean }>`
-  height: 25px;
-  width: 25px;
-  min-width: 25px;
-  background: ${({ theme, small }) => (small ? "none" : theme.brightColor)};
-  box-shadow: ${({ theme, small }) => (small ? "none" : `0 1px 2px 0 ${theme.shadowColor}`)};
-  border-radius: ${({ small }) => (small ? 0 : 50)}%;
-  text-align: center;
-
-  overflow: hidden;
-`;
-
-export const Number = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  color: ${({ theme }) => theme.primaryColor};
-  padding: 4px 0 3px;
-`;
-
-const ImageBlock: React.FC<IProps> = ({ img, className, num, small }) => (
-  <Content className={className} small={small && !num}>
-    {num ? <Number>{num}</Number> : <>{getIcon(img)}</>}
-  </Content>
-);
+const ImageBlock: React.FC<ImageBlockProps> = ({ img, num, small }) => {
+  const imageCircleClassnames = classnames({
+    [styles.circle]: num,
+    [styles.iconContainer]: !num || num === undefined,
+    [styles.small]: small && !num,
+    [styles.darkBlue]: !small && num,
+  });
+  return (
+    <div className={imageCircleClassnames}>
+      {num ? <div className={styles.number}>{num}</div> : <div className={styles.icon}>{getIcon(img)}</div>}
+    </div>
+  );
+};
 
 export default ImageBlock;
 export { ImageBlock };