isom-1687 update site identifier logos (#909)

* fix - use logo URL instead

* replace with common method

* change objectFit to contain

* add 1rem padding for image

Author: adriangohjw

apps/studio/src/features/dashboard/SiteList.tsx

@@ -15,6 +15,7 @@ import { Link } from "@opengovsg/design-system-react"
 
 import { NoResultIcon } from "~/components/Svg/NoResultIcon"
 import { withSuspense } from "~/hocs/withSuspense"
+import { generateAssetUrl } from "~/utils/generateAssetUrl"
 import { trpc } from "~/utils/trpc"
 
 const Site = ({
@@ -39,10 +40,11 @@ const Site = ({
               borderColor="base.divider.medium"
               width="100%"
               height="100%"
-              objectFit="cover"
+              objectFit="contain"
               aspectRatio="1/1"
               backgroundColor="white"
               fallbackSrc="/isomer-sites-placeholder.png"
+              padding="1rem" // Leave some space so that logo won't be flush with the border
             />
             <Box
               position="absolute"
@@ -134,7 +136,7 @@ const SuspendableSiteList = (): JSX.Element => {
         <Site
           siteId={site.id}
           siteName={site.name}
-          siteLogoUrl={site.config.logoUrl}
+          siteLogoUrl={generateAssetUrl(site.config.logoUrl)}
         />
       ))}
     </SiteListSection>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsImageControl.tsx

@@ -13,8 +13,8 @@ import {
 import type { ModifiedAsset } from "~/types/assets"
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
 import { useEditorDrawerContext } from "~/contexts/EditorDrawerContext"
-import { useEnv } from "~/hooks/useEnv"
 import { getPresignedPutUrlSchema } from "~/schemas/asset"
+import { generateAssetUrl } from "~/utils/generateAssetUrl"
 import {
   IMAGE_UPLOAD_ACCEPTED_MIME_TYPES,
   MAX_IMG_FILE_SIZE_BYTES,
@@ -37,9 +37,6 @@ export function JsonFormsImageControl({
   errors,
   data,
 }: ControlProps) {
-  const {
-    env: { NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME },
-  } = useEnv()
   const toast = useToast()
   const { modifiedAssets, setModifiedAssets } = useEditorDrawerContext()
   const [pendingAsset, setPendingAsset] = useState<ModifiedAsset | undefined>()
@@ -77,9 +74,7 @@ export function JsonFormsImageControl({
     async function convertImage(url: string) {
       const fileName = url.split("/").pop()
       const fileType = `image/${url.split(".").pop()}`
-      const imageUrl = url.startsWith("/")
-        ? `https://${NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME}${url}`
-        : url
+      const imageUrl = generateAssetUrl(url)
       const file = await urlToFile(imageUrl, fileName || "", fileType)
       setPendingAsset({ path, src: url, file })
     }

apps/studio/src/utils/generateAssetUrl.ts

@@ -0,0 +1,7 @@
+import { env } from "~/env.mjs"
+
+export const generateAssetUrl = (url: string): string => {
+  return url.startsWith("/")
+    ? `https://${env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME}${url}`
+    : url
+}