feat: Use tailwind dimens instead of hardcoded px.

Author: zouhir96

src/components/Elements/Button/CircleButton.tsx

@@ -12,7 +12,7 @@ const variants = {
   secondary: 'bg-ht-100 text-ht-900 hover:bg-ht-200',
   outlined: 'bg-ht-100 text-ht-900 hover:bg-ht-100',
   text: 'bg-transparent ttext-ht-900',
-  darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80',
+  darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80 dark:bg-ht-100 dark:hover:bg-ht-200',
 }
 
 type CircleButtonProps = {

src/components/Elements/SearchBar/SearchBar.tsx

@@ -29,13 +29,13 @@ export const SearchBar = () => {
 
   return (
     <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"
+      className="order-2 flex grow items-center gap-2 rounded-full bg-white px-4 py-2 dark:bg-ht-100"
       onSubmit={handleSubmit}>
       {usedSearchEngine?.default === false ? (
-        <HiSparkles className="mx-[16px] size-[22px] rounded-full" />
+        <HiSparkles className="mx-4 size-6 rounded-full" />
       ) : (
         <img
-          className={'mx-[16px] size-[24px] rounded-full bg-white p-[2px]'}
+          className={'size-6 rounded-full bg-white p-0.5'}
           src={`/searchengine_logos/${usedSearchEngine.label.toLowerCase()}_logo.svg`}
         />
       )}

src/components/Elements/UserTags/UserTags.tsx

@@ -6,19 +6,20 @@ export const UserTags = () => {
   const { userSelectedTags } = useUserPreferences()
 
   return (
-    <div className="flex w-full flex-wrap items-center gap-2">
+    <div className="order-4 flex w-full flex-wrap items-center gap-2">
       {userSelectedTags.map((tag, index) => (
         <span
           key={index}
-          className="rounded-2xl bg-ht-900 px-[8px] py-[2px] font-medium text-white dark:bg-ht-200">
+          className="rounded-2xl bg-ht-900 px-2 py-0.5 text-base font-medium text-white dark:bg-ht-200">
           {tag.value}
         </span>
       ))}
-      <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>
+      <Link
+        to="/settings/topics"
+        aria-label="Open settings"
+        className="rounded-2xl bg-ht-900 px-2 py-0.5 font-medium">
+        <TiPlus className="" />
+      </Link>
     </div>
   )
 }

src/components/Layout/Header.tsx

@@ -56,18 +56,18 @@ export const Header = () => {
 
   return (
     <>
-      <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]">
+      <header className="sticky z-[1] mx-[1%] mt-3 mb-0 flex flex-row flex-wrap content-center items-center gap-2.5">
+        <span className="order-1 flex items-center text-ht-900">
+          <i className="relative me-2">
             <CgTab size={24} />
           </i>{' '}
           <Link to="/">
-            <HackertabLogo aria-label="hackertab.dev" className="h-[16px] w-auto fill-ht-900" />
+            <HackertabLogo aria-label="hackertab.dev" className="h-4 w-auto fill-ht-900" />
           </Link>
           <Changelog />
         </span>
         <SearchBar />
-        <div className="inline-flex flex-row items-center gap-[8px]">
+        <div className="order-3 inline-flex flex-row content-center gap-2 gap-y-2">
           {isDNDModeActive() && (
             <Button onClick={onUnpauseClicked} className="font-bold">
               <MdDoDisturbOff />
@@ -97,18 +97,17 @@ export const Header = () => {
             {isConnected ? (
               <>
                 <img
-                  className="size-[40px] rounded-full outline-2 outline-amber-600"
+                  className="size-full 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 className="absolute right-0 -bottom-2 left-0 inline-block">
+                  <span className="inline-flex items-center justify-center rounded-xl bg-amber-500 py-px ps-6 pe-1.5 text-xs outline-2 outline-ht-100">
+                    <StreakIcon className="absolute -top-0.5 left-0 w-6" /> {user?.streak || 1}
+                  </span>
                 </div>
               </>
             ) : (
-              <AvatarPlaceholder className="mt-[10px] size-[34px] rounded-[20px]" />
+              <AvatarPlaceholder className="mt-10 size-34 rounded-xl" />
             )}
           </CircleButton>
         </div>