From bc7194d5b0b8233b067ff54760daa9643c3aa737 Mon Sep 17 00:00:00 2001
From: Githelp AI Aagent <stian@githelp.app>
Date: Tue, 25 Aug 2026 18:56:26 +0000
Subject: [PATCH] feat: What to change: The sync between color chosen at the
 Branding page under Sett...

Task: a1a4a7dd
Source: slack
Requested by: U04E9DZ5ELF
---
 src/app/projects/[id]/page.tsx       |  6 +++++-
 src/app/support/chat/page.tsx        |  2 +-
 src/app/support/get-support/page.tsx |  6 +++++-
 src/app/support/page.tsx             |  6 +++---
 src/components/layout/top-bar.tsx    | 15 +++++++++++++--
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 51b811d..5df5fa6 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -13,6 +13,7 @@ import { toast } from "sonner"
 import Image from "next/image"
 import Link from "next/link"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { cn } from "@/lib/utils"
 
 const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
@@ -154,7 +155,10 @@ export default function ProjectLandingPage() {
                                     />
                                 ) : (
                                     <Avatar className="w-24 h-24">
-                                        <AvatarFallback className="bg-[#3c2ec5] text-white text-3xl">
+                                        <AvatarFallback
+                                            className={cn("text-white text-3xl", !branding?.primary_color && "bg-[#3c2ec5]")}
+                                            style={branding?.primary_color ? { backgroundColor: branding.primary_color } : undefined}
+                                        >
                                             {projectName?.[0]?.toUpperCase() || "?"}
                                         </AvatarFallback>
                                     </Avatar>
diff --git a/src/app/support/chat/page.tsx b/src/app/support/chat/page.tsx
index c27745e..4f2c022 100644
--- a/src/app/support/chat/page.tsx
+++ b/src/app/support/chat/page.tsx
@@ -644,7 +644,7 @@ export default function UserSupportChatPage() {
             ) : (
               <div
                 className="w-8 h-8 rounded-[11px] flex items-center justify-center text-sm font-medium text-foreground shrink-0"
-                style={{ backgroundColor: getAvatarColorHexForId(effectiveProjectId) }}
+                style={{ backgroundColor: brandingData?.primary_color || getAvatarColorHexForId(effectiveProjectId) }}
               >
                 {projectName?.[0]?.toUpperCase() || "A"}
               </div>
diff --git a/src/app/support/get-support/page.tsx b/src/app/support/get-support/page.tsx
index 055ee87..7147026 100644
--- a/src/app/support/get-support/page.tsx
+++ b/src/app/support/get-support/page.tsx
@@ -10,6 +10,7 @@ import { useSearchParams } from "next/navigation"
 import { useProject, useProjectBySlug, useProjectBranding } from "@/hooks/useProject"
 import { useUser } from "@/contexts/user-context"
 import { useProjectRole } from "@/hooks/useProjectRole"
+import { cn } from "@/lib/utils"
 
 export default function GetSupportPage() {
   const searchParams = useSearchParams()
@@ -67,7 +68,10 @@ export default function GetSupportPage() {
           <div className="w-20 h-20 bg-white rounded-lg shadow-sm flex items-center justify-center overflow-hidden">
             <Avatar className="w-20 h-20">
               <AvatarImage src={projectLogo} alt={projectName} />
-              <AvatarFallback className="bg-brand-primary text-white text-xs">
+              <AvatarFallback
+                className={cn("text-white text-xs", !brandingData?.primary_color && "bg-brand-primary")}
+                style={brandingData?.primary_color ? { backgroundColor: brandingData.primary_color } : undefined}
+              >
                 {projectName?.[0]?.toUpperCase() || "?"}
               </AvatarFallback>
             </Avatar>
diff --git a/src/app/support/page.tsx b/src/app/support/page.tsx
index 8458636..3abce0f 100644
--- a/src/app/support/page.tsx
+++ b/src/app/support/page.tsx
@@ -366,7 +366,7 @@ export default function SupportPage() {
       ) : (
         <div
           className="w-8 h-8 rounded-[11px] flex items-center justify-center text-sm font-medium text-foreground shrink-0"
-          style={{ backgroundColor: getAvatarColorHexForId(projectId) }}
+          style={{ backgroundColor: brandingData?.primary_color || getAvatarColorHexForId(projectId) }}
         >
           {projectName?.[0]?.toUpperCase() || "A"}
         </div>
@@ -477,7 +477,7 @@ export default function SupportPage() {
                 ) : (
                   <div
                     className="w-20 h-20 rounded-[12px] flex items-center justify-center text-2xl font-medium text-foreground border border-[#E1E4EA]"
-                    style={{ backgroundColor: getAvatarColorHexForId(projectId) }}
+                    style={{ backgroundColor: brandingData?.primary_color || getAvatarColorHexForId(projectId) }}
                   >
                     {projectName?.[0]?.toUpperCase() || "A"}
                   </div>
@@ -529,7 +529,7 @@ export default function SupportPage() {
                   // header — only on this icon, not on any other avatar icon in
                   // the chat.
                   className="w-11 h-11 rounded-[12px] flex items-center justify-center text-base font-medium text-foreground border border-[#E1E4EA]"
-                  style={{ backgroundColor: getAvatarColorHexForId(projectId) }}
+                  style={{ backgroundColor: brandingData?.primary_color || getAvatarColorHexForId(projectId) }}
                 >
                   {projectName?.[0]?.toUpperCase() || "A"}
                 </div>
diff --git a/src/components/layout/top-bar.tsx b/src/components/layout/top-bar.tsx
index 6a06826..6ec1c83 100644
--- a/src/components/layout/top-bar.tsx
+++ b/src/components/layout/top-bar.tsx
@@ -45,10 +45,12 @@ const ProjectLogo = ({
   logoUrl,
   projectName,
   size = "w-6 h-6",
+  primaryColor,
 }: {
   logoUrl: string | null | undefined
   projectName: string
   size?: string
+  primaryColor?: string | null
 }) => {
   const firstLetter = projectName?.[0]?.toUpperCase() || "?"
   const radius = sizeRadiusMap[size] || "rounded-[9px]"
@@ -57,7 +59,10 @@ const ProjectLogo = ({
   return (
     <Avatar key={`${logoUrl ?? ""}|${projectName}`} className={`${size} ${radius}`}>
       {hasLogo ? <AvatarImage src={logoUrl as string} alt={projectName} /> : null}
-      <AvatarFallback className={`bg-brand-primary text-white text-xs ${radius} font-[family-name:var(--font-outfit)]`}>
+      <AvatarFallback
+        className={`${primaryColor ? "" : "bg-brand-primary"} text-white text-xs ${radius} font-[family-name:var(--font-outfit)]`}
+        style={primaryColor ? { backgroundColor: primaryColor } : undefined}
+      >
         {firstLetter}
       </AvatarFallback>
     </Avatar>
@@ -240,6 +245,7 @@ export function TopBar() {
                       logoUrl={getProjectLogo(selectedProject, selectedProjectBranding)}
                       projectName={selectedProject?.name || ""}
                       size="w-[22px] h-[22px]"
+                      primaryColor={selectedProjectBranding?.primary_color}
                     />
                     <span className="font-sans text-[14px] font-[550] text-sidebar-foreground truncate">
                       {selectedProject?.name || "Select Project"}
@@ -339,7 +345,12 @@ function ProjectLogoWithBranding({
       onClick={() => onSelect(project)}
       className={`group gap-2 ${isSelected ? "bg-brand-primary/10 text-brand-primary focus:bg-brand-primary/15 focus:text-brand-primary" : ""}`}
     >
-      <ProjectLogo logoUrl={logoUrl} projectName={project.name} size="w-5 h-5" />
+      <ProjectLogo
+        logoUrl={logoUrl}
+        projectName={project.name}
+        size="w-5 h-5"
+        primaryColor={branding?.primary_color}
+      />
       <span
         className={`font-sans truncate text-[14px] ${
           isSelected