Skip to content

[AI] What to change: The sync between color chosen at the Branding page under Sett... #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
burkongla wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[AI] What to change: The sync between color chosen at the Branding page under Sett... #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/app/projects/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/support/chat/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion src/app/support/get-support/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/app/support/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 13 additions & 2 deletions src/components/layout/top-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]"
Expand All @@ -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>
Expand Down Expand Up @@ -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"}
Expand Down Expand Up @@ -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
Expand Down