From a0440957b9dd70007d262103fae63684fa50dc90 Mon Sep 17 00:00:00 2001
From: Thanh Phong <89619124+Pet3r1512@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:01:04 +0700
Subject: [PATCH] #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
---
 .../Layouts/Header/__snapshots__/header.test.tsx.snap  |  8 ++++----
 src/components/Layouts/ThemeToggle.test.tsx            | 10 +++++-----
 src/components/Layouts/ThemeToggle.tsx                 |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap b/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap
index 68cd564..2bc7787 100644
--- 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
index f50b3f9..363861e 100644
--- 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
index b6d588d..50765ce 100644
--- 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>
   );
 };