refactor code

odigos-io · Jul 16, 2023 · a0e224c · a0e224c
1 parent 31d2949
commit a0e224c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { KeyvalCard, KeyvalImage, KeyvalText } from "@/design.system";
 import { TapList } from "../tap.list/tap.list";
-import { MONITORING_OPTIONS, MonitoringOption } from "../utils";
+import { MONITORING_OPTIONS } from "../utils";
 import {
   ApplicationNameWrapper,
   DestinationCardWrapper,
@@ -12,17 +12,16 @@ const TEXT_STYLE = {
   whiteSpace: "nowrap",
   overflow: "hidden",
 };
+const LOGO_STYLE = { padding: 4, backgroundColor: "#fff" };
 
 type Destination = {
   supported_signals: {
     [key: string]: {
       supported: boolean;
-      // other properties
     };
   };
   image_url: string;
   display_name: string;
-  // other properties
 };
 
 type DestinationCardProps = {
@@ -53,7 +52,12 @@ export function DestinationCard({
   return (
     <KeyvalCard focus={focus}>
       <DestinationCardWrapper onClick={onClick}>
-        <KeyvalImage src={image_url} width={56} height={56} />
+        <KeyvalImage
+          src={image_url}
+          width={56}
+          height={56}
+          style={LOGO_STYLE}
+        />
         <ApplicationNameWrapper>
           <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
             {display_name}

diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx
@@ -6,6 +6,7 @@ interface KeyvalImageProps {
   alt?: string;
   width?: number;
   height?: number;
+  style?: React.CSSProperties;
 }
 
 const StyledImage = styled.img`
@@ -17,6 +18,15 @@ export function KeyvalImage({
   alt,
   width = 200,
   height = 200,
+  style = {},
 }: KeyvalImageProps) {
-  return <StyledImage src={src} alt={alt} width={width} height={height} />;
+  return (
+    <StyledImage
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      style={{ ...style }}
+    />
+  );
 }