refactor: add avatar's colors to globals

chingu-x · Aug 1, 2024 · 52a4300 · 52a4300
1 parent dc73c49
commit 52a4300
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -29,6 +29,10 @@
         --base-300: 22 23 26; /* #16171A */
         --base-content: 238 239 240; /* #EEEFF0 */
         --overlay: rgba(22,23,26,0.25); /* #16171A @ 25%  */
+        --avatar-1: 254 106 166; /* #FE6AA6 */
+        --avatar-2: 72 254 144; /* #48FE90 */
+        --avatar-3: 80 219 254; /* #50DBFE */
+        --avatar-4: 208 145 223; /* #D091DF */
   }
 
   [data-theme='dark'] {
@@ -56,7 +60,12 @@
     --base-200: 22 23 26; /* #16171A */
     --base-300: 245 245 245; /* #F5F5F5 */
     --base-content: 45 48 54; /* #2D3036 */
-     --overlay: rgba(245,245,245,0.25); /* #F5F5F5 @ 25%  */
+    --overlay: rgba(245,245,245,0.25); /* #F5F5F5 @ 25%  */
+    --avatar-1: 254 106 166; /* #FE6AA6 */
+    --avatar-2: 72 254 144; /* #48FE90 */
+    --avatar-3: 80 219 254; /* #50DBFE */
+    --avatar-4: 208 145 223; /* #D091DF */
+
 }
 }
 

diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
@@ -2,13 +2,12 @@ import { cva, type VariantProps } from "class-variance-authority";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 
-// TODO: Move colors to globals
 const getBackroundColor = (initials: string) => {
   const charCode = initials.toUpperCase().charCodeAt(initials.length - 1);
-  if (charCode < 71) return "bg-[#FE6AA6]";
-  if (charCode >= 71 && charCode < 77) return "bg-[#48FE90]";
-  if (charCode >= 77 && charCode < 84) return "bg-[#50DBFE]";
-  if (charCode >= 84) return "bg-[#D091DF]";
+  if (charCode < 71) return "bg-avatar-1";
+  if (charCode >= 71 && charCode < 77) return "bg-avatar-2";
+  if (charCode >= 77 && charCode < 84) return "bg-avatar-3";
+  if (charCode >= 84) return "bg-avatar-4";
 };
 
 const imageSize = {
@@ -53,22 +52,6 @@ export default function Avatar({
   size,
   ...props
 }: AvatarProps) {
-  if (avatarUrl) {
-    return (
-      <div className={cn(avatar({ size, className }))} {...props}>
-        <Image
-          alt={
-            firstName && lastName ? `${firstName} ${lastName}` : "User's Avatar"
-          }
-          src={avatarUrl}
-          style={{ objectFit: "cover" }}
-          height={size ? imageSize[size] : 34}
-          width={size ? imageSize[size] : 34}
-        />
-      </div>
-    );
-  }
-
   if (firstName || lastName) {
     let initials = "";
     if (firstName) initials += firstName.trimStart()[0];
@@ -85,6 +68,22 @@ export default function Avatar({
     );
   }
 
+  if (avatarUrl) {
+    return (
+      <div className={cn(avatar({ size, className }))} {...props}>
+        <Image
+          alt={
+            firstName && lastName ? `${firstName} ${lastName}` : "User's Avatar"
+          }
+          src={avatarUrl}
+          style={{ objectFit: "cover" }}
+          height={size ? imageSize[size] : 34}
+          width={size ? imageSize[size] : 34}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={cn(avatar({ size, className }))} {...props}>
       <Image

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,6 +36,10 @@ module.exports = {
         "base-300": "rgb(var(--base-300) / <alpha-value>)",
         "base-content": "rgb(var(--base-content) / <alpha-value>)",
         overlay: "var(--overlay)",
+        "avatar-1": "rgb(var(--avatar-1) / <alpha-value>)",
+        "avatar-2": "rgb(var(--avatar-2) / <alpha-value>)",
+        "avatar-3": "rgb(var(--avatar-3) / <alpha-value>)",
+        "avatar-4": "rgb(var(--avatar-4) / <alpha-value>)",
       },
       boxShadow: {
         sm: "0 2px 4px 0 rgb(var(--neutral-focus) / 0.05)",