From b1edb5ce4acaa1320b54a3a974555baab4e5cccf Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 23 Aug 2024 13:36:54 +0100
Subject: [PATCH] Update streak ui

---
 .../AccountStreak/AccountStreak.tsx           | 14 ++++++-------
 src/components/AccountStreak/StreakDay.tsx    | 20 ++++++++-----------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/AccountStreak/AccountStreak.tsx b/src/components/AccountStreak/AccountStreak.tsx
index f080a3ae7..c7cdfa509 100644
--- a/src/components/AccountStreak/AccountStreak.tsx
+++ b/src/components/AccountStreak/AccountStreak.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
-import { Flame, X } from 'lucide-react';
+import {Flame, X, Zap, ZapOff} from 'lucide-react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { StreakDay } from './StreakDay';
 import {
@@ -99,8 +99,8 @@ export function AccountStreak(props: AccountStreakProps) {
         )}
         onClick={() => setShowDropdown(true)}
       >
-        <Flame className="size-5" />
-        <span className="ml-1 text-sm font-semibold">
+        <Zap strokeWidth={1} className="size-5 fill-current" />
+        <span className="ml-1.5 text-sm font-semibold">
           {accountStreak?.count}
         </span>
       </button>
@@ -144,9 +144,9 @@ export function AccountStreak(props: AccountStreakProps) {
                     isBrokenStreakDay = index === leftCircleCount - 1;
 
                     icon = isBrokenStreakDay ? (
-                      <X className="opacit size-3.5 text-white" />
+                      <ZapOff className="size-5 fill-current" />
                     ) : (
-                      <Flame className="size-3.5 text-white" />
+                      <Zap className="size-5 fill-current" />
                     );
                   } else if (index < leftCircleCount + currentCircleCount) {
                     // Current streak days
@@ -155,7 +155,7 @@ export function AccountStreak(props: AccountStreakProps) {
                       currentCount - currentCircleCount + currentIndex + 1 + 1;
                     isCurrentStreakDay = true;
                     isToday = currentIndex === currentCircleCount - 1;
-                    icon = <Flame className="size-3.5 text-white" />;
+                    icon = <Zap className="size-5 fill-current" />;
                   } else {
                     // Remaining streak days
                     const remainingIndex =
@@ -180,7 +180,7 @@ export function AccountStreak(props: AccountStreakProps) {
               </div>
             </div>
 
-            <p className="text-center text-xs text-slate-600 tracking-wide mb-[2px] -mt-[3px]">
+            <p className="text-center text-xs text-slate-500 tracking-wide mb-[1.75px] -mt-[2px]">
               Visit every day to keep your streak alive!
             </p>
           </div>
diff --git a/src/components/AccountStreak/StreakDay.tsx b/src/components/AccountStreak/StreakDay.tsx
index 81e2d4fea..b80412c56 100644
--- a/src/components/AccountStreak/StreakDay.tsx
+++ b/src/components/AccountStreak/StreakDay.tsx
@@ -26,28 +26,24 @@ export function StreakDay(props: StreakDayProps) {
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-center gap-1.5',
-        isCurrentStreakDay && 'relative',
+        'relative flex flex-col items-center justify-center gap-1.5',
+        {
+          'text-red-400 opacity-40': isPreviousStreakDay,
+          'text-slate-600': isRemainingStreakDay,
+          'text-yellow-300': isCurrentStreakDay,
+          'text-slate-400': isToday,
+        },
       )}
     >
       <div
         className={cn('flex size-6 items-center justify-center rounded-full', {
-          'bg-red-500': isPreviousStreakDay,
-          'bg-purple-500': isCurrentStreakDay,
           'bg-slate-700': isRemainingStreakDay,
           'border-2 border-dashed border-slate-500 bg-transparent': isToday,
         })}
       >
         {isToday ? null : icon}
       </div>
-      <span
-        className={cn('text-sm', {
-          'text-slate-500': isPreviousStreakDay,
-          'text-slate-100': isCurrentStreakDay || isRemainingStreakDay,
-        })}
-      >
-        {dayCount}
-      </span>
+      <span className={cn('text-xs')}>{dayCount}</span>
       {isToday && (
         <ChevronDown className="absolute bottom-full left-1/2 h-4 w-4 -translate-x-1/2 transform stroke-[2.5px] text-slate-400" />
       )}