fix(sidebar): refine return link style

Author: weareoutman

bricks/ai-portal/src/elevo-sidebar/SpaceNav.tsx

@@ -8,13 +8,17 @@ import { NavLink } from "./NavLink.js";
 import type { SidebarLink } from "./interfaces.js";
 import { ADD_ICON, MODEL_ICON } from "./constants.js";
 import { useNavLinkActive } from "./useNavLinkActive.js";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
 
 export interface SpaceNavProps {
   returnUrl: string;
   introUrl: string;
   spaceDetail: {
     instanceId: string;
     name: string;
+    icon?: GeneralIconProps & {
+      color?: string;
+    };
   };
   spaceObjects?: SidebarLink[];
   spaceServiceflows?: SidebarLink[];
@@ -39,14 +43,26 @@ export function SpaceNav({
   const [serviceflowsCollapsed, setServiceflowsCollapsed] = useState(false);
   const introActive = useNavLinkActive(introUrl);
 
+  const avatarIcon = spaceDetail?.icon;
+  const avatarColor = avatarIcon?.color || "gray";
+  const { color, ...iconProps } = avatarIcon || {};
+
   return (
     <>
       <WrappedLink url={returnUrl} className="return-link">
+        <WrappedIcon className="icon" lib="lucide" icon="chevron-left" />
+        <div
+          className="avatar"
+          style={{
+            color: `var(--theme-${avatarColor}-color)`,
+          }}
+        >
+          <WrappedIcon {...iconProps} />
+        </div>
         <div className="heading">
           <div className="title">{spaceDetail?.name}</div>
           <div className="sub-title">{t(K.COLLABORATION_SPACES)}</div>
         </div>
-        <WrappedIcon className="icon" lib="lucide" icon="arrow-left" />
       </WrappedLink>
       <div className="divider" />
       <div className="history" ref={rootRef}>

bricks/ai-portal/src/elevo-sidebar/styles.shadow.css

@@ -395,31 +395,40 @@
 
   .title {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 14px;
   }
 
   .sub-title {
     font-size: 12px;
-    color: #8c8c8c;
+    color: rgba(0, 0, 0, 0.45);
   }
 
   .icon {
     font-size: 16px;
-    color: #8c8c8c;
+    color: #646a73;
   }
 
-  &:not(:hover) .icon {
-    display: none;
+  .avatar {
+    background: #fff;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
   }
 }
 
 .return-link::part(link) {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   padding: 6px 8px;
   border-radius: 8px;
-  color: #000;
+  color: #262626;
 }
 
 .return-link::part(link):hover {