make images smaller

PostHog · Dec 22, 2023 · eef7928 · eef7928
1 parent 98d7352
commit eef7928
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/frontend/src/scenes/billing/ExportsUnsubscribeTable/exportsUnsubscribeTableLogic.tsx b/frontend/src/scenes/billing/ExportsUnsubscribeTable/exportsUnsubscribeTableLogic.tsx
@@ -95,7 +95,7 @@ export const exportsUnsubscribeTableLogic = kea<exportsUnsubscribeTableLogicType
                         team_id: pluginConfig.team_id,
                         name: pluginConfig.name,
                         description: pluginConfig.description,
-                        icon: <RenderApp plugin={plugins[pluginConfig.plugin]} />,
+                        icon: <RenderApp plugin={plugins[pluginConfig.plugin]} imageSize="small" />,
                         disabled: !pluginConfig.enabled,
                     } as ItemToDisable
                 })
@@ -108,7 +108,7 @@ export const exportsUnsubscribeTableLogic = kea<exportsUnsubscribeTableLogicType
                         icon: (
                             <IconDatabase
                                 style={{
-                                    fontSize: 60,
+                                    fontSize: 30,
                                 }}
                             />
                         ),

diff --git a/frontend/src/scenes/pipeline/utils.tsx b/frontend/src/scenes/pipeline/utils.tsx
@@ -2,7 +2,7 @@ import api from 'lib/api'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import posthog from 'posthog-js'
-import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
+import { PluginImage, PluginImageSize } from 'scenes/plugins/plugin/PluginImage'
 
 import { PluginConfigTypeNew, PluginType } from '~/types'
 
@@ -34,9 +34,10 @@ export async function loadPaginatedResults(
 
 type RenderAppProps = {
     plugin: PluginType
+    imageSize?: PluginImageSize
 }
 
-export function RenderApp({ plugin }: RenderAppProps): JSX.Element {
+export function RenderApp({ plugin, imageSize }: RenderAppProps): JSX.Element {
     return (
         <div className="flex items-center gap-4">
             <Tooltip
@@ -52,10 +53,10 @@ export function RenderApp({ plugin }: RenderAppProps): JSX.Element {
             >
                 {plugin.url ? (
                     <Link to={plugin.url} target="_blank">
-                        <PluginImage plugin={plugin} />
+                        <PluginImage plugin={plugin} size={imageSize} />
                     </Link>
                 ) : (
-                    <PluginImage plugin={plugin} /> // TODO: tooltip doesn't work on this
+                    <PluginImage plugin={plugin} size={imageSize} /> // TODO: tooltip doesn't work on this
                 )}
             </Tooltip>
         </div>

diff --git a/frontend/src/scenes/plugins/plugin/PluginImage.tsx b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
@@ -5,18 +5,20 @@ import { useEffect, useState } from 'react'
 
 import { PluginType } from '~/types'
 
+export type PluginImageSize = 'medium' | 'large' | 'small'
+
 export function PluginImage({
     plugin,
     size = 'medium',
 }: {
     plugin: Partial<Pick<PluginType, 'plugin_type' | 'url' | 'icon'>>
-    size?: 'medium' | 'large' | 'small'
+    size?: PluginImageSize
 }): JSX.Element {
     const { plugin_type: pluginType, url, icon } = plugin
     const [state, setState] = useState({ image: imgPluginDefault })
     const pixelSize = {
-        medium: 60,
         large: 100,
+        medium: 60,
         small: 30,
     }[size]