Update title for sidebar

care.config.ts

@@ -27,11 +27,11 @@ const careConfig = {
   },
 
   headerLogo: logo(env.REACT_HEADER_LOGO, {
-    light: "https://cdn.ohc.network/header_logo.png",
+    light: "/images/care_logo.svg",
     dark: "https://cdn.ohc.network/header_logo.png",
   }),
   mainLogo: logo(env.REACT_MAIN_LOGO, {
-    light: "https://cdn.ohc.network/light-logo.svg",
+    light: "/images/care_logo.svg",
     dark: "https://cdn.ohc.network/black-logo.svg",
   }),
   stateLogo: logo(env.REACT_STATE_LOGO),

src/Components/Common/Avatar.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+
+const colors: [string, boolean][] = [
+  ["#ff4040", false],
+  ["#7f2020", false],
+  ["#cc5c33", false],
+  ["#734939", false],
+  ["#bf9c8f", false],
+  ["#995200", false],
+  ["#4c2900", false],
+  ["#f2a200", false],
+  ["#ffd580", true],
+  ["#332b1a", false],
+  ["#4c3d00", false],
+  ["#ffee00", true],
+  ["#b0b386", false],
+  ["#64664d", false],
+  ["#6c8020", false],
+  ["#c3d96c", true],
+  ["#143300", false],
+  ["#19bf00", false],
+  ["#53a669", false],
+  ["#bfffd9", true],
+  ["#40ffbf", true],
+  ["#1a332e", false],
+  ["#00b3a7", false],
+  ["#165955", false],
+  ["#00b8e6", false],
+  ["#69818c", false],
+  ["#005ce6", false],
+  ["#6086bf", false],
+  ["#000e66", false],
+  ["#202440", false],
+  ["#393973", false],
+  ["#4700b3", false],
+  ["#2b0d33", false],
+  ["#aa86b3", false],
+  ["#ee00ff", false],
+  ["#bf60b9", false],
+  ["#4d3949", false],
+  ["#ff00aa", false],
+  ["#7f0044", false],
+  ["#f20061", false],
+  ["#330007", false],
+  ["#d96c7b", false],
+];
+
+const stringToInt = (name: string): number => {
+  const aux = (sum: number, remains: string): number => {
+    if (remains === "") return sum;
+    const firstCharacter = remains.slice(0, 1);
+    const newRemains = remains.slice(1);
+    return aux(sum + firstCharacter.charCodeAt(0), newRemains);
+  };
+
+  return Math.floor(aux(0, name));
+};
+
+const toColor = (name: string): [string, string] => {
+  const index = stringToInt(name) % 42;
+  const [backgroundColor, blackText] = colors[index];
+  return [backgroundColor, blackText ? "#000000" : "#FFFFFF"];
+};
+
+const initials = (name: string): string => {
+  return name
+    .split(" ")
+    .slice(0, 2)
+    .map((word) => word.slice(0, 1))
+    .join("")
+    .toUpperCase(); // Ensure initials are uppercase
+};
+
+interface AvatarProps {
+  colors?: [string, string];
+  name: string;
+  className?: string;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  colors: propColors,
+  name,
+  className,
+}) => {
+  const [bgColor, fgColor] = propColors || toColor(name);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      viewBox="0 0 100 100"
+      className={className}
+    >
+      <circle cx="50" cy="50" r="50" fill={bgColor} />
+      <text
+        fill={fgColor}
+        fontSize="42"
+        fontFamily="sans-serif"
+        x="50"
+        y="54"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        alignmentBaseline="middle"
+      >
+        {initials(name)}
+      </text>
+    </svg>
+  );
+};
+
+export { Avatar };

src/Components/Common/Loading.tsx

@@ -1,4 +1,4 @@
-const img = "https://cdn.ohc.network/light-logo.svg";
+const img = "/images/care_logo_gray.svg";
 
 const Loading = () => {
   return (

src/Components/Common/Sidebar/Sidebar.tsx

@@ -12,7 +12,7 @@ import careConfig from "@careConfig";
 
 export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference";
 
-const LOGO_COLLAPSE = "/images/logo_collapsed.svg";
+const LOGO_COLLAPSE = "/images/care_logo_mark.svg";
 
 type StatelessSidebarProps =
   | {
@@ -29,7 +29,6 @@ type StatelessSidebarProps =
     };
 
 const StatelessSidebar = ({
-  shrinkable = false,
   shrinked = false,
   setShrinked,
   onItemClick,
@@ -111,24 +110,44 @@ const StatelessSidebar = ({
 
   return (
     <nav
-      className={`group flex h-full flex-col bg-primary-800 py-3 md:py-5 ${
+      className={`group flex h-full flex-col bg-gray-100 py-3 md:py-5 ${
         shrinked ? "w-14" : "w-60"
       } transition-all duration-300 ease-in-out ${
         isOverflowVisible && shrinked
           ? "overflow-visible"
           : "overflow-y-auto overflow-x-hidden"
       }`}
     >
+      {shrinked && (
+        <div className="ml-1">
+          <ToggleShrink
+            shrinked={shrinked}
+            toggle={() => setShrinked && setShrinked(!shrinked)}
+          />
+        </div>
+      )}
       <div className="h-3" /> {/* flexible spacing */}
-      <Link href="/">
-        <img
-          className={`${
-            shrinked ? "mx-auto" : "ml-5"
-          } mb-2 h-5 self-start transition md:mb-5 md:h-8`}
-          src={shrinked ? LOGO_COLLAPSE : careConfig.mainLogo?.light}
-        />
-      </Link>
-      <div className="h-3" /> {/* flexible spacing */}
+      <div
+        className={`flex items-center ${shrinked ? "justify-center" : "justify-between"}`}
+      >
+        <Link href="/" className="flex items-center justify-between">
+          <img
+            className={`${
+              shrinked ? "mx-auto" : "ml-5"
+            } h-5 self-start transition md:h-8`}
+            src={shrinked ? LOGO_COLLAPSE : careConfig.mainLogo?.light}
+          />
+        </Link>
+        {!shrinked && (
+          <div className="ml-1">
+            <ToggleShrink
+              shrinked={shrinked}
+              toggle={() => setShrinked && setShrinked(!shrinked)}
+            />
+          </div>
+        )}
+      </div>
+      <div className="h-4" /> {/* flexible spacing */}
       <div className="relative flex h-full flex-col">
         <div className="relative flex flex-1 flex-col md:flex-none">
           <div
@@ -170,20 +189,6 @@ const StatelessSidebar = ({
         </div>
         <div className="hidden md:block md:flex-1" />
 
-        <div className="relative flex justify-end">
-          {shrinkable && (
-            <div
-              className={`${
-                shrinked ? "mx-auto" : "self-end"
-              } flex h-12 translate-y-4 self-end opacity-0 transition-all duration-200 ease-in-out group-hover:translate-y-0 group-hover:opacity-100`}
-            >
-              <ToggleShrink
-                shrinked={shrinked}
-                toggle={() => setShrinked && setShrinked(!shrinked)}
-              />
-            </div>
-          )}
-        </div>
         <SidebarUserCard shrinked={shrinked} />
       </div>
     </nav>
@@ -230,7 +235,7 @@ interface ToggleShrinkProps {
 
 const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
   <div
-    className={`flex h-10 w-10 cursor-pointer items-center justify-center self-end rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
+    className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
       shrinked ? "mx-auto" : "mr-4"
     } transition-all duration-200 ease-in-out`}
     onClick={toggle}

src/Components/Common/Sidebar/SidebarItem.tsx

@@ -32,10 +32,10 @@ const SidebarItemBase = forwardRef(
     return (
       <Link
         ref={ref}
-        className={`tooltip relative ml-1 mr-3 h-full min-h-[40px] flex-1 cursor-pointer rounded-lg text-white transition-all duration-200 ease-in-out md:h-11 md:flex-none ${
+        className={`tooltip relative ml-1 mr-3 h-full min-h-[40px] flex-1 cursor-pointer rounded-lg text-gray-900 transition-all duration-200 ease-in-out md:h-11 md:flex-none ${
           props.selected
-            ? "bg-primary-900 font-bold"
-            : "bg-primary-800 font-normal hover:bg-primary-700"
+            ? "bg-gray-200 font-bold"
+            : "font-normal hover:bg-gray-200"
         }`}
         target={external && "_blank"}
         rel={external && "noreferrer"}