From 88bfc1758086d3e8f622562ac73d919a6f6efe3c Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 10 Mar 2026 16:25:01 +0100
Subject: [PATCH] fix: use correct space gradient in settings overview panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Space icon in Settings → Overview was using the user Avatar component
(wrong palette + hashed on name), now uses getSpaceGradient(id, name)
to match the sidebar.
---
 .../modals/spaceSettingsPanels/OverviewPanel.tsx         | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
index 07524c7c..875608a2 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ImageCropModal } from '../../ui/ImageCropModal';
-import { Avatar } from '../../ui/Avatar';
+import { getSpaceGradient } from '../../../utils/gradients';
 import { useSpaceStore } from '../../../stores/spaceStore';
 import { useAuthStore } from '../../../stores/authStore';
 import { useUIStore } from '../../../stores/uiStore';
@@ -256,7 +256,12 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
                   )}
                 </>
               ) : (
-                <Avatar name={displayIconName} size={64} />
+                <div
+                  className="w-full h-full rounded-full flex items-center justify-center text-white text-xl font-bold"
+                  style={{ background: getSpaceGradient(space.id, space.name).gradient }}
+                >
+                  {space.name.charAt(0).toUpperCase()}
+                </div>
               )}
               {uploadingIcon && (
                 <div className="absolute inset-0 bg-black/50 flex items-center justify-center">