#IMP-021: Update theme toggle button (#70)

* Style: remove dark and light text from theme toggle button * Chore: update snapshot * Test: remove dark and light text from test
Pet3r1512 · Nov 11, 2024 · a044095 · a044095
1 parent 1cbbb78
commit a044095
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap b/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap
@@ -157,10 +157,10 @@ exports[`Render Header > Should match snapshot 1`] = `
             class="lg:flex items-center gap-x-5 hidden"
           >
             <button
-              class="h-8 lg:h-10 px-5 py-2 w-auto rounded-full lg:text-lg bg-gray-500 dark:bg-gray-200 transition-all dark:text-black text-white duration-150 ease-linear flex items-center justify-center"
+              class="!size-8 rounded-full flex items-center justify-center bg-gray-500 dark:bg-gray-200 transition-all duration-150 ease-linear"
               data-testid="theme-togger"
             >
-              🌙 Dark
+              🌙
             </button>
             <div
               class="border-l-2 border-black-main dark:border-white h-[25px]"
@@ -359,10 +359,10 @@ exports[`Render Header > Should match snapshot 1`] = `
           class="lg:flex items-center gap-x-5 hidden"
         >
           <button
-            class="h-8 lg:h-10 px-5 py-2 w-auto rounded-full lg:text-lg bg-gray-500 dark:bg-gray-200 transition-all dark:text-black text-white duration-150 ease-linear flex items-center justify-center"
+            class="!size-8 rounded-full flex items-center justify-center bg-gray-500 dark:bg-gray-200 transition-all duration-150 ease-linear"
             data-testid="theme-togger"
           >
-            🌙 Dark
+            🌙
           </button>
           <div
             class="border-l-2 border-black-main dark:border-white h-[25px]"

diff --git a/src/components/Layouts/ThemeToggle.test.tsx b/src/components/Layouts/ThemeToggle.test.tsx
@@ -34,14 +34,14 @@ describe("ThemeToggle", () => {
     );
 
     const button = screen.getByTestId("theme-togger");
-    expect(button).toHaveTextContent("🌙 Dark");
+    expect(button).toHaveTextContent("🌙");
 
     fireEvent.click(button);
-    expect(button).toHaveTextContent("Light ☀️");
-    expect(button).not.toHaveTextContent("🌙 Dark");
+    expect(button).toHaveTextContent("☀️");
+    expect(button).not.toHaveTextContent("🌙");
 
     fireEvent.click(button);
-    expect(button).toHaveTextContent("🌙 Dark");
-    expect(button).not.toHaveTextContent("Light ☀️");
+    expect(button).toHaveTextContent("🌙");
+    expect(button).not.toHaveTextContent("☀️");
   });
 });
diff --git a/src/components/Layouts/ThemeToggle.tsx b/src/components/Layouts/ThemeToggle.tsx
@@ -9,11 +9,11 @@ const ThemeToggle = ({ className }: { className?: string }) => {
       data-testid="theme-togger"
       onClick={toggleTheme}
       className={cn(
-        "h-8 lg:h-10 px-5 py-2 w-auto rounded-full lg:text-lg bg-gray-500 dark:bg-gray-200 transition-all dark:text-black text-white duration-150 ease-linear flex items-center justify-center",
+        "!size-8 rounded-full flex items-center justify-center bg-gray-500 dark:bg-gray-200 transition-all duration-150 ease-linear",
         className
       )}
     >
-      {theme === "light" ? "🌙 Dark" : "Light ☀️"}
+      {theme === "light" ? "🌙" : "☀️"}
     </button>
   );
 };