Fix trust center design elements

Signed-off-by: Jonathan <contact@grafikart.fr>

apps/trust/src/components/AuditRow.tsx

@@ -92,25 +92,62 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
             </Button>
           </RequestAccessDialog>
         )
-      ) : (
-        <span className=" text-txt-secondary">{__("No report")}</span>
-      )}
+      ) : null}
     </div>
   );
 }
 
+const logos = {
+  "ISO 27001 (2022)": "/trust/logos/iso27001.svg",
+  "SOC 2": "/trust/logos/soc2.svg",
+  HIPAA: "/trust/logos/hipaa.svg",
+  GDPR: "/trust/logos/gdpr.svg",
+};
+
 export function AuditRowAvatar(props: { audit: AuditRowFragment$key }) {
   const audit = useFragment(auditRowFragment, props.audit);
   return (
-    <AuditDialog audit={props.audit}>
-      <button className="block cursor-pointer aspect-square">
-        <FrameworkLogo
-          alt={audit.framework.name}
-          name={audit.framework.name}
-          className="size-full"
-        />
-      </button>
-    </AuditDialog>
+    <>
+      <AuditDialog audit={props.audit}>
+        <button
+          className="block cursor-pointer aspect-square"
+          title={`Logo ${audit.framework.name}`}
+        >
+          <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(/trust/logos/blank.svg) no-repeat" }}
+          >
+            <span className="line-clamp-2 overflow-hidden">
+              {" "}
+              {audit.framework.name}
+            </span>
+          </div>
+        </button>
+      </AuditDialog>
+      <AuditDialog audit={props.audit}>
+        <button
+          className="block cursor-pointer aspect-square"
+          title={`Logo ${audit.framework.name}`}
+        >
+          {audit.framework.name in logos ? (
+            <img
+              className="block aspect-square w-full"
+              width={75}
+              height={75}
+              src={logos[audit.framework.name as keyof typeof logos]}
+              alt={`Logo ${audit.framework.name}`}
+            />
+          ) : (
+            <div
+              className="bg-[#F0F7E2] aspect-square w-full rounded-full text-xs text-[#000] font-bold flex items-center justify-center pb-4 px-2"
+              style={{ background: "url(/trust/logos/blank.png)" }}
+            >
+              {audit.framework.name}
+            </div>
+          )}
+        </button>
+      </AuditDialog>
+    </>
   );
 }
 

apps/trust/src/components/OrganizationSidebar.tsx

@@ -26,10 +26,10 @@ export function OrganizationSidebar({
         <img
           alt=""
           src={trustCenter.organization.logoUrl}
-          className="size-24 rounded-2xl border border-border-mid shadow-mid"
+          className="size-24 rounded-2xl border border-border-mid shadow-mid bg-level-1"
         />
       ) : (
-        <div className="size-24 rounded-2xl border border-border-mid bg-level-1 shadow-mid" />
+        <div className="size-24 rounded-2xl border border-border-mid shadow-mid bg-level-1" />
       )}
       <h1 className="text-2xl mt-6">{trustCenter.organization.name}</h1>
       <p className="text-sm text-txt-secondary mt-1">

apps/trust/src/components/VendorRow.tsx

@@ -24,23 +24,27 @@ export function VendorRow(props: { vendor: VendorRowFragment$key }) {
   return (
     <div className="flex text-sm leading-tight gap-3 md:items-center">
       {logo ? (
-        <img src={logo} className="size-8 md:size-6 flex-none" alt="" />
+        <img
+          src={logo}
+          className="size-8 md:size-6 flex-none rounded-lg"
+          alt=""
+        />
       ) : (
-        <div className="size-8 md:size-6 flex-none" />
+        <div className="size-8 md:size-6 flex-none rounded-lg" />
       )}
-      <div className="flex flex-col md:flex-row flex-1 gap-0.5">
+      <div className="flex flex-col md:grid grid-cols-[1fr_1fr_1fr] flex-1 gap-0.5">
         <div>{vendor.name}</div>
         {vendor.privacyPolicyUrl && (
           <a
             href={vendor.privacyPolicyUrl}
             target="_blank"
-            className="text-txt-info md:mx-auto"
+            className="text-txt-info"
           >
             {vendor.privacyPolicyUrl.split("//").at(-1)}
           </a>
         )}
         {vendor.countries.length > 0 && (
-          <div className="flex gap-1 text-txt-secondary items-center">
+          <div className="flex gap-1 text-txt-secondary items-center md:justify-end">
             <IconPin size={16} className="flex-none" />
             <span>
               {vendor.countries

apps/trust/src/pages/OverviewPage.tsx

@@ -59,6 +59,9 @@ export function OverviewPage() {
   );
   return (
     <div>
+      <References
+        references={fragment.references.edges.map((edge) => edge.node)}
+      />
       <h2 className="font-medium mb-1">{__("Documents")}</h2>
       <p className="text-sm text-txt-secondary mb-4">
         {__("Security and compliance documentation:")}
@@ -104,10 +107,6 @@ export function OverviewPage() {
           <IconChevronRight size={16} />
         </Link>
       </Rows>
-
-      <References
-        references={fragment.references.edges.map((edge) => edge.node)}
-      />
     </div>
   );
 }
@@ -121,8 +120,13 @@ type Reference = {
 
 function References({ references }: { references: Reference[] }) {
   const { __ } = useTranslate();
+
+  if (references.length === 0) {
+    return null;
+  }
+
   return (
-    <div>
+    <div className="mb-8">
       <h2 className="font-medium mb-4">{__("Trusted by")}</h2>
       <Card className="grid grid-cols-2 flex-wrap p-6 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
         {references.map((reference) => (