Use framework logo on console & trust

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/trust/src/components/AuditRow.tsx

@@ -6,6 +6,7 @@ import {
   Button,
   Dialog,
   DialogContent,
+  FrameworkLogo,
   IconArrowInbox,
   IconLock,
   IconMedal,
@@ -15,7 +16,7 @@ import {
 import { useTranslate } from "@probo/i18n";
 import type { AuditRowDownloadMutation } from "./__generated__/AuditRowDownloadMutation.graphql";
 import { useMutationWithToasts } from "/hooks/useMutationWithToast";
-import { downloadFile, getLogoUrl } from "@probo/helpers";
+import { downloadFile } from "@probo/helpers";
 import { type PropsWithChildren, useState } from "react";
 import { useLocation } from "react-router";
 import { RequestAccessDialog } from "/components/RequestAccessDialog.tsx";
@@ -39,6 +40,8 @@ const auditRowFragment = graphql`
     framework {
       id
       name
+      lightLogoURL
+      darkLogoURL
     }
   }
 `;
@@ -106,41 +109,19 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
 export function AuditRowAvatar(props: { audit: AuditRowFragment$key }) {
   const audit = useFragment(auditRowFragment, props.audit);
 
-  const logos = {
-    "ISO 27001 (2022)": getLogoUrl("iso27001.svg"),
-    "SOC 2": getLogoUrl("soc2.svg"),
-    HIPAA: getLogoUrl("hipaa.svg"),
-    GDPR: getLogoUrl("gdpr.svg"),
-  };
-
   return (
     <>
-      <AuditDialog
-        audit={props.audit}
-        logo={logos[audit.framework.name as keyof typeof logos]}
-      >
+      <AuditDialog audit={props.audit}>
         <button
           className="block cursor-pointer aspect-square"
           title={`Logo ${audit.framework.name}`}
         >
-          {audit.framework.name in logos ? (
-            <img
-              src={logos[audit.framework.name as keyof typeof logos]}
-              alt={`${audit.framework.name} Logo`}
-            />
-          ) : (
-            <div
-              className="bg-[#F0F7E2] aspect-square w-full rounded-full text-xs text-[#000] font-bold flex items-center justify-center pb-6 px-2"
-              style={{
-                background: `url(${getLogoUrl("blank.svg")}) no-repeat`,
-              }}
-            >
-              <span className="line-clamp-2 overflow-hidden">
-                {" "}
-                {audit.framework.name}
-              </span>
-            </div>
-          )}
+          <FrameworkLogo
+            className="size-19"
+            lightLogoURL={audit.framework.lightLogoURL}
+            darkLogoURL={audit.framework.darkLogoURL}
+            name={audit.framework.name}
+          />
         </button>
       </AuditDialog>
     </>
@@ -170,13 +151,12 @@ function AuditDialog(
       title={<Breadcrumb items={items} />}
     >
       <DialogContent className="p-4 lg:p-8 space-y-6">
-        {props.logo && (
-          <img
-            alt={audit.framework.name}
-            src={props.logo}
-            className="size-24 block mx-auto"
-          />
-        )}
+        <FrameworkLogo
+          className="size-24 mx-auto"
+          lightLogoURL={audit.framework.lightLogoURL}
+          darkLogoURL={audit.framework.darkLogoURL}
+          name={audit.framework.name}
+        />
         <h2 className="text-xl font-semibold mb-1">{audit.framework.name}</h2>
         <Table>
           <AuditRow audit={props.audit} />

apps/trust/src/components/OrganizationSidebar.tsx

@@ -90,7 +90,7 @@ export function OrganizationSidebar({
               </div>
             </div>
 
-            <hr className="my-6 -mx-6 h-[1px] bg-border-low border-none" />
+            <hr className="my-6 -mx-6 h-px bg-border-low border-none" />
           </>
         )}
 

apps/trust/src/components/__generated__/AuditRowFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2f595b4efd5e7b13207d433830a64c98>>
+ * @generated SignedSource<<3265a0991323eee4011c668b68d1b365>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,7 +12,9 @@ import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type AuditRowFragment$data = {
   readonly framework: {
+    readonly darkLogoURL: string | null | undefined;
     readonly id: string;
+    readonly lightLogoURL: string | null | undefined;
     readonly name: string;
   };
   readonly report: {
@@ -90,6 +92,20 @@ return {
           "kind": "ScalarField",
           "name": "name",
           "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "lightLogoURL",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "darkLogoURL",
+          "storageKey": null
         }
       ],
       "storageKey": null
@@ -100,6 +116,6 @@ return {
 };
 })();
 
-(node as any).hash = "3aabed006b65dc913c81a63f0f6f4523";
+(node as any).hash = "417e65b500df4b4cff874dab2bea90ee";
 
 export default node;