rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use compliance page logos for favicon and org sidebar

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-01-30 10:28:55 +04:00
parent 96391b4822
commit aa8bc15233
8 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/trust/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png" /> <!-- <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png" />
@@ -16,7 +16,9 @@
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicons/favicon-128.png" sizes="128x128" /> <link rel="icon" type="image/png" href="/favicons/favicon-128.png" sizes="128x128" /> -->
<link rel="icon" id="favicon" href="/favicons/favicon.ico">
<meta name="application-name" content="&nbsp;" /> <meta name="application-name" content="&nbsp;" />
<meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" /> <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />

8
apps/trust/src/components/OrganizationSidebar.tsx
View File

@@ -1,4 +1,5 @@
import { formatError } from "@probo/helpers"; import { formatError } from "@probo/helpers";
import { useSystemTheme } from "@probo/hooks";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { import {
Button, Button,
@@ -36,6 +37,9 @@ export function OrganizationSidebar({
const { __ } = useTranslate(); const { __ } = useTranslate();
const isAuthenticated = !!use(Viewer); const isAuthenticated = !!use(Viewer);
const { toast } = useToast(); const { toast } = useToast();
const theme = useSystemTheme();
const logoFileUrl = theme === "dark" ? (trustCenter?.darkLogoFileUrl ?? trustCenter?.logoFileUrl) : trustCenter?.logoFileUrl;
const [requestAllAccesses, isRequestingAccess] const [requestAllAccesses, isRequestingAccess]
= useMutation<OrganizationSidebar_requestAllAccessesMutation>( = useMutation<OrganizationSidebar_requestAllAccessesMutation>(
@@ -77,11 +81,11 @@ export function OrganizationSidebar({
return ( return (
<Card className="p-6 relative overflow-hidden border-b border-border-low isolate"> <Card className="p-6 relative overflow-hidden border-b border-border-low isolate">
<div className="h-21 bg-[#044E4114] absolute top-0 left-0 right-0 -z-1"></div> <div className="h-21 bg-[#044E4114] absolute top-0 left-0 right-0 -z-1"></div>
{trustCenter.logoFileUrl {logoFileUrl
? ( ? (
<img <img
alt="" alt=""
src={trustCenter.logoFileUrl} src={logoFileUrl}
className="size-24 rounded-2xl border border-border-mid shadow-mid bg-level-1" className="size-24 rounded-2xl border border-border-mid shadow-mid bg-level-1"
/> />
) )

6
apps/trust/src/layouts/MainLayout.tsx
View File

@@ -1,3 +1,4 @@
import { useFavicon, useSystemTheme } from "@probo/hooks";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { Logo, TabLink, Tabs } from "@probo/ui"; import { Logo, TabLink, Tabs } from "@probo/ui";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay"; import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
@@ -19,9 +20,14 @@ export function MainLayout(props: Props) {
const data = usePreloadedQuery(currentTrustGraphQuery, props.queryRef); const data = usePreloadedQuery(currentTrustGraphQuery, props.queryRef);
const trustCenter = data.currentTrustCenter; const trustCenter = data.currentTrustCenter;
const theme = useSystemTheme();
useFavicon(theme === "dark" ? (trustCenter?.darkLogoFileUrl ?? trustCenter?.logoFileUrl) : trustCenter?.logoFileUrl);
if (!trustCenter) { if (!trustCenter) {
return null; return null;
} }
const showNDADialog const showNDADialog
= trustCenter.isViewerMember = trustCenter.isViewerMember
&& !trustCenter.hasAcceptedNonDisclosureAgreement && !trustCenter.hasAcceptedNonDisclosureAgreement

2
packages/hooks/src/index.ts
View File

@@ -5,3 +5,5 @@ export { useList } from "./useList";
export { useStateWithRef } from "./useStateWithRef"; export { useStateWithRef } from "./useStateWithRef";
export { useCleanup } from "./useCleanup"; export { useCleanup } from "./useCleanup";
export { useCopy } from "./useCopy"; export { useCopy } from "./useCopy";
export { useFavicon } from "./useFavicon";
export { useSystemTheme } from "./useSystemTheme";

25
packages/hooks/src/useFavicon.ts Normal file
View File

@@ -0,0 +1,25 @@
import { useEffect } from "react";
export function useFavicon(faviconUrl?: string | null) {
useEffect(() => {
if (!faviconUrl) return;
let favicon: HTMLLinkElement;
const existingFavicon = document.getElementById("favicon") as (HTMLLinkElement | null);
if (existingFavicon) {
favicon = existingFavicon
favicon.href = faviconUrl;
} else {
favicon = document.createElement("link");
favicon.id = "favicon";
favicon.rel = "icon";
favicon.href = faviconUrl;
document.head.appendChild(favicon);
}
return () => {
favicon.href = "/favicons/favicon.ico";
}
});
}

31
packages/hooks/src/useSystemTheme.ts Normal file
View File

@@ -0,0 +1,31 @@
import { useEffect, useState } from "react";
export function useSystemTheme(): "light" | "dark" {
const getSystemTheme = () => {
if (typeof window !== "undefined" && window.matchMedia) {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" as const;
}
return "light" as const;
};
const [theme, setTheme] = useState<"light" | "dark">(getSystemTheme());
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) {
return;
}
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const handleChange = (event: MediaQueryListEvent) => {
setTheme(event.matches ? "dark" : "light");
};
mediaQuery.addEventListener("change", handleChange);
return () => {
mediaQuery.removeEventListener("change", handleChange);
};
}, []);
return theme;
};

2
pkg/server/api/trust/v1/v1_resolver.go
View File

@@ -882,7 +882,7 @@ func (r *trustCenterResolver) LogoFileURL(ctx context.Context, obj *types.TrustC
func (r *trustCenterResolver) DarkLogoFileURL(ctx context.Context, obj *types.TrustCenter) (*string, error) { func (r *trustCenterResolver) DarkLogoFileURL(ctx context.Context, obj *types.TrustCenter) (*string, error) {
trustService := r.TrustService(ctx, obj.ID.TenantID()) trustService := r.TrustService(ctx, obj.ID.TenantID())
return trustService.TrustCenters.GenerateLogoURL(ctx, obj.ID, 1*time.Hour) return trustService.TrustCenters.GenerateDarkLogoURL(ctx, obj.ID, 1*time.Hour)
} }
// NdaFileURL is the resolver for the ndaFileUrl field. // NdaFileURL is the resolver for the ndaFileUrl field.

2
pkg/trust/trust_center_service.go
View File

@@ -201,7 +201,7 @@ func (s TrustCenterService) GenerateDarkLogoURL(
return nil, err return nil, err
} }
if compliancePage.LogoFileID == nil { if compliancePage.DarkLogoFileID == nil {
return nil, nil return nil, nil
} }