feat: enhance streak display with new icon and styling adjustments

Author: medyo

src/assets/App.css

@@ -1164,29 +1164,34 @@ Producthunt item
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    border: 1px solid var(--tooltip-accent-color);
+    border: 2px solid #ff8f1f;
   }
 
   .streak {
     position: absolute;
     display: inline-block;
-    bottom: -12px;
+    bottom: -8px;
     left: 0;
     right: 0;
     color: white;
 
     .content {
-      background-color: var(--tooltip-accent-color);
-      font-size: 10px;
+      background-color: #995826;
+      font-size: 11px;
       border-radius: 12px;
       font-weight: bold;
-      padding: 2px 8px;
+      border: 2px solid black;
+      padding: 1px 6px 1px 22px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      color: white;
     }
     .icon {
-      font-size: 12px;
+      width: 2.2em;
+      position: absolute;
+      left: 0;
+      top: -2px;
     }
   }
 }

src/assets/icons/fire_icon.svg

@@ -3,8 +3,9 @@ import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
 import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
-import { MdDoDisturbOff, MdFlashOn } from 'react-icons/md'
+import { MdDoDisturbOff } from 'react-icons/md'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
@@ -13,7 +14,6 @@ import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Button, CircleButton } from '../Elements'
-
 export const Header = () => {
   const { openAuthModal, user, isConnected } = useAuth()
 
@@ -97,7 +97,7 @@ export const Header = () => {
                 <img className="profileImage s" src={user?.imageURL} />
                 <div className="streak">
                   <span className="content">
-                    <MdFlashOn className="icon" /> {user?.streak || 1}
+                    <StreakIcon className="icon" /> {user?.streak || 1}
                   </span>
                 </div>
               </>

src/components/Layout/Header.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import { FaFire, FaGithub } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoCheckmarkOutline } from 'react-icons/io5'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
+import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
 import { Button, ChipsSet, ConfirmModal } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
@@ -64,9 +65,9 @@ const UserInfo = ({ user }: UserInfoProps) => {
       <div className="streaks">
         <p className="title">
           You're on{' '}
-          <span>
-            {' '}
-            <FaFire color="orange" size={18} /> <b>{pluralize(user.streak || 1, 'day')} streak</b>
+          <span className="highlight">
+            <StreakIcon className="icon" />
+            {pluralize(user.streak || 1, 'day')} streak
           </span>
         </p>
         <div>

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -135,11 +135,22 @@ Select styles
   flex-direction: column;
   row-gap: 16px;
   align-self: flex-start;
-}
-.streaks .title {
-  margin: 0;
-  padding: 0;
-  font-size: 0.9em;
+
+  .title {
+    margin: 0;
+    padding: 0;
+    font-size: 0.9em;
+  }
+  .icon {
+    width: 1.6em;
+    vertical-align: bottom;
+    position: relative;
+    top: 2px;
+  }
+  .highlight {
+    font-weight: 900;
+    color: #ff8f1f;
+  }
 }
 
 .streaks ul.streaksWeek::before {