Fix custom domain trust center design

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/trust/src/components/AuditRow.tsx

@@ -15,7 +15,7 @@ import {
 import { useTranslate } from "@probo/i18n";
 import type { AuditRowDownloadMutation } from "./__generated__/AuditRowDownloadMutation.graphql";
 import { useMutationWithToasts } from "/hooks/useMutationWithToast";
-import { downloadFile } from "@probo/helpers";
+import { downloadFile, getLogoUrl } from "@probo/helpers";
 import { type PropsWithChildren, useState } from "react";
 import { useLocation } from "react-router";
 import { RequestAccessDialog } from "/components/RequestAccessDialog.tsx";
@@ -103,15 +103,16 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
   );
 }
 
-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);
+
+  const logos = {
+    "ISO 27001 (2022)": getLogoUrl("iso27001.svg"),
+    "SOC 2": getLogoUrl("soc2.svg"),
+    HIPAA: getLogoUrl("hipaa.svg"),
+    GDPR: getLogoUrl("gdpr.svg"),
+  };
+
   return (
     <>
       <AuditDialog
@@ -130,7 +131,7 @@ export function AuditRowAvatar(props: { audit: AuditRowFragment$key }) {
           ) : (
             <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" }}
+              style={{ background: `url(${getLogoUrl("blank.svg")}) no-repeat` }}
             >
               <span className="line-clamp-2 overflow-hidden">
                 {" "}

apps/trust/src/components/Skeletons/MainSkeleton.tsx

@@ -1,20 +1,18 @@
 import { Skeleton, TabLink, Tabs } from "@probo/ui";
 import { TabSkeleton } from "./TabSkeleton";
-import { useParams } from "react-router";
 import { useTranslate } from "@probo/i18n";
+import { getTrustCenterUrl } from "@probo/helpers";
 
 export function MainSkeleton() {
-  const { slug } = useParams<{ slug: string }>();
-  const baseTabUrl = `/trust/${slug}`;
   const { __ } = useTranslate();
   return (
     <div className="grid grid-cols-1 max-w-[1280px] mx-4 pt-6 gap-4 lg:mx-auto lg:gap-10 lg:pt-20 lg:grid-cols-[400px_1fr] ">
       <Skeleton className="w-full h-300" />
       <main>
         <Tabs className="mb-8">
-          <TabLink to={`${baseTabUrl}/overview`}>{__("Overview")}</TabLink>
-          <TabLink to={`${baseTabUrl}/documents`}>{__("Documents")}</TabLink>
-          <TabLink to={`${baseTabUrl}/subprocessors`}>
+          <TabLink to={getTrustCenterUrl("overview")}>{__("Overview")}</TabLink>
+          <TabLink to={getTrustCenterUrl("documents")}>{__("Documents")}</TabLink>
+          <TabLink to={getTrustCenterUrl("subprocessors")}>
             {__("Subprocessors")}
           </TabLink>
         </Tabs>

apps/trust/src/components/VendorRow.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "relay-runtime";
 import type { VendorRowFragment$key } from "./__generated__/VendorRowFragment.graphql";
 import { useFragment } from "react-relay";
-import { IconPin } from "@probo/ui";
+import { IconPin, IconShield } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { faviconUrl, getCountryName } from "@probo/helpers";
 
@@ -16,11 +16,13 @@ const vendorRowFragment = graphql`
   }
 `;
 
-export function VendorRow(props: { vendor: VendorRowFragment$key }) {
+export function VendorRow(props: { vendor: VendorRowFragment$key; hasAnyCountries?: boolean }) {
   const vendor = useFragment(vendorRowFragment, props.vendor);
   const logo = faviconUrl(vendor.websiteUrl);
   const { __ } = useTranslate();
 
+  const gridCols = props.hasAnyCountries ? "grid-cols-[1fr_1fr_1fr]" : "grid-cols-[1fr_1fr]";
+
   return (
     <div className="flex text-sm leading-tight gap-3 md:items-center">
       {logo ? (
@@ -32,19 +34,22 @@ export function VendorRow(props: { vendor: VendorRowFragment$key }) {
       ) : (
         <div className="size-8 md:size-6 flex-none rounded-lg" />
       )}
-      <div className="flex flex-col md:grid grid-cols-[1fr_1fr_1fr] flex-1 gap-0.5">
+      <div className={`flex flex-col md:grid ${gridCols} flex-1 gap-0.5`}>
         <div>{vendor.name}</div>
-        {vendor.privacyPolicyUrl && (
+        {vendor.privacyPolicyUrl ? (
           <a
             href={vendor.privacyPolicyUrl}
             target="_blank"
-            className="text-txt-info"
+            className={`flex gap-1 text-txt-info items-center hover:underline ${!props.hasAnyCountries ? 'md:justify-end' : ''}`}
           >
-            {vendor.privacyPolicyUrl.split("//").at(-1)}
+            <IconShield size={16} className="flex-none" />
+            <span>{__("Privacy")}</span>
           </a>
+        ) : (
+          <div></div>
         )}
         {vendor.countries.length > 0 && (
-          <div className="flex gap-1 text-txt-secondary items-center md:justify-end">
+          <div className={`flex gap-1 text-txt-secondary items-center ${props.hasAnyCountries ? 'md:justify-end' : ''}`}>
             <IconPin size={16} className="flex-none" />
             <span>
               {vendor.countries