feat: Use tailwind in header.

Author: zouhir96

src/assets/index.css

@@ -27,7 +27,7 @@ code {
 @theme {
   --color-ht-100: oklch(0.9 0.0221 250.23);
   --color-ht-200: oklch(0.83 0.0314 249.73);
-  --color-ht-900: oklch(0.453 0.0179 251.34);
+  --color-ht-900: oklch(0.3455 0.0507 251.49);
 }
 
 @layer base {

src/components/Elements/SearchBar/SearchBar.tsx

@@ -28,20 +28,22 @@ export const SearchBar = () => {
   }, [])
 
   return (
-    <form className="searchBar" onSubmit={handleSubmit}>
+    <form
+      className="z-[1] inline-flex flex-1 items-center rounded-full bg-white py-2 sm:relative sm:mx-0 sm:my-auto sm:flex-grow-1 dark:bg-ht-100"
+      onSubmit={handleSubmit}>
       {usedSearchEngine?.default === false ? (
-        <HiSparkles className="searchBarIcon" />
+        <HiSparkles className="mx-[16px] size-[22px] rounded-full" />
       ) : (
         <img
-          className={'searchBarIcon'}
+          className={'mx-[16px] size-[24px] rounded-full bg-white p-[2px]'}
           src={`/searchengine_logos/${usedSearchEngine.label.toLowerCase()}_logo.svg`}
         />
       )}
       <input
         ref={keywordsInputRef}
         type="text"
         name="keyword"
-        className="searchBarInput"
+        className="box-border w-full text-ht-900 focus:outline-none"
         placeholder={`Ask ${usedSearchEngine.label}`}
       />
     </form>

src/components/Elements/UserTags/UserTags.tsx

@@ -6,15 +6,19 @@ export const UserTags = () => {
   const { userSelectedTags } = useUserPreferences()
 
   return (
-    <div className="tags">
+    <div className="flex w-full flex-wrap items-center gap-2">
       {userSelectedTags.map((tag, index) => (
-        <span key={index} className="tag">
+        <span
+          key={index}
+          className="rounded-2xl bg-ht-900 px-[8px] py-[2px] font-medium text-white dark:bg-ht-200">
           {tag.value}
         </span>
       ))}
-      <Link to="/settings/topics" className="tag tagHoverable" aria-label="Open settings">
-        <TiPlus className="tagIcon" />
-      </Link>
+      <div className="rounded-2xl bg-ht-900 px-[8px] py-[4px] font-medium text-white hover:bg-ht-200 dark:bg-ht-200 dark:hover:bg-ht-900">
+        <Link to="/settings/topics" aria-label="Open settings">
+          <TiPlus className="relative mt-[-2px] fill-white dark:hover:fill-black" />
+        </Link>
+      </div>
     </div>
   )
 }

src/components/Layout/Header.tsx

@@ -56,20 +56,20 @@ export const Header = () => {
 
   return (
     <>
-      <header className="AppHeader">
-        <span className="AppName">
-          <i className="logo">
-            <CgTab />
+      <header className="sticky top-0 z-[1] mx-[1%] mt-[10px] mb-0 flex flex-row flex-wrap content-center items-center gap-[10px] md:h-auto">
+        <span className="flex items-center pt-[4px] md:w-auto md:grow-0">
+          <i className="me-[8px]">
+            <CgTab size={24} />
           </i>{' '}
           <Link to="/">
-            <HackertabLogo aria-label="hackertab.dev" className="logoText" />
+            <HackertabLogo aria-label="hackertab.dev" className="h-[16px] w-auto fill-ht-900" />
           </Link>
           <Changelog />
         </span>
         <SearchBar />
-        <div className="buttonsFlex extras">
+        <div className="inline-flex flex-row items-center gap-[8px]">
           {isDNDModeActive() && (
-            <Button onClick={onUnpauseClicked} className="dndButton">
+            <Button onClick={onUnpauseClicked} className="font-bold">
               <MdDoDisturbOff />
               Unpause
             </Button>
@@ -86,7 +86,7 @@ export const Header = () => {
           </CircleButton>
           <CircleButton
             isLoading={isConnecting}
-            className={clsx('profileImageContainer', !isConnected && 'overflowHidden')}
+            className={clsx('relative', !isConnected && 'overflow-hidden')}
             onClick={() => {
               if (isConnected) {
                 navigate('/settings/general')
@@ -96,15 +96,19 @@ export const Header = () => {
             }}>
             {isConnected ? (
               <>
-                <img className="profileImage" src={user?.imageURL} />
-                <div className="streak">
-                  <span className="content">
-                    <StreakIcon className="icon" /> {user?.streak || 1}
-                  </span>
+                <img
+                  className="size-[40px] rounded-full outline-2 outline-amber-600"
+                  src={user?.imageURL}
+                />
+                <div className="absolute mr-0 -mb-12 ml-0 inline-block">
+                  <div className="flex items-center justify-end rounded-[12px] border-2 border-ht-100 bg-amber-600 text-[11px] font-bold text-white">
+                    <StreakIcon className="-mt-[2px] ml-0 w-[2.2em]" />{' '}
+                    <span className="me-2 justify-self-end">{user?.streak || 1}</span>
+                  </div>
                 </div>
               </>
             ) : (
-              <AvatarPlaceholder className="avatarPlaceholder" />
+              <AvatarPlaceholder className="mt-[10px] size-[34px] rounded-[20px]" />
             )}
           </CircleButton>
         </div>