From 260cedd0e852c1caa141be6f97850dd77853b820 Mon Sep 17 00:00:00 2001
From: freirart <artur.santos@stone.com.br>
Date: Tue, 30 Apr 2024 17:29:28 -0300
Subject: [PATCH] moon and sun svg, no selection and text css

---
 public/images/moon.svg                        | 10 ++++++++++
 public/images/sun.svg                         | 19 +++++++++++++++++++
 .../ColorModeSwitch/ColorModeSwitch.tsx       | 17 ++++++++++++-----
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 public/images/moon.svg
 create mode 100644 public/images/sun.svg

diff --git a/public/images/moon.svg b/public/images/moon.svg
new file mode 100644
index 0000000..67679af
--- /dev/null
+++ b/public/images/moon.svg
@@ -0,0 +1,10 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_319_240)">
+<path d="M7.68626 0.185853C8.00413 0.11994 8.322 0.0730692 8.63548 0.04231C8.95775 0.0115508 9.27708 -0.00309647 9.59202 -0.000167024C9.76927 0.0012977 9.91136 0.146305 9.90989 0.323537C9.90843 0.459756 9.822 0.57547 9.70189 0.620876C8.36155 1.14818 7.28929 2.13101 6.63157 3.34819C5.98411 4.54487 5.73802 5.96712 6.03245 7.40255L6.03392 7.4128C6.36937 9.03279 7.32737 10.3642 8.60911 11.2079C9.88939 12.0516 11.4905 12.406 13.1106 12.075L13.1208 12.0736C14.2868 11.8319 15.302 11.2694 16.0945 10.4946C16.9148 9.69338 17.4949 8.66661 17.7541 7.5417C17.7937 7.36886 17.9665 7.26194 18.1379 7.30148C18.2683 7.33224 18.362 7.4377 18.3826 7.56221C18.7693 9.93506 18.1848 12.2596 16.9089 14.111C15.6389 15.9536 13.6819 17.329 11.3161 17.8153C8.88157 18.3162 6.47484 17.7831 4.5515 16.5175C2.62669 15.2476 1.18675 13.2483 0.685772 10.8139C0.196514 8.43665 0.693096 6.08576 1.89573 4.18602C3.10423 2.28041 5.02318 0.825938 7.37132 0.25616C7.41673 0.244442 7.46946 0.232724 7.52659 0.219542H7.52806L7.68626 0.185853Z" fill="#FFE483"/>
+</g>
+<defs>
+<clipPath id="clip0_319_240">
+<rect width="18" height="18" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/sun.svg b/public/images/sun.svg
new file mode 100644
index 0000000..12a74aa
--- /dev/null
+++ b/public/images/sun.svg
@@ -0,0 +1,19 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_319_210)">
+<path d="M9.49999 12.9765C11.6961 12.9765 13.4764 11.1961 13.4764 9C13.4764 6.80387 11.6961 5.02354 9.49999 5.02354C7.30385 5.02354 5.52353 6.80387 5.52353 9C5.52353 11.1961 7.30385 12.9765 9.49999 12.9765Z" fill="#EAB809"/>
+<path d="M9.50001 13.6267C6.94888 13.6267 4.87335 11.5512 4.87335 9.00009C4.87335 6.44896 6.94888 4.37343 9.50001 4.37343C12.0511 4.37343 14.1267 6.44896 14.1267 9.00009C14.1267 11.5512 12.0511 13.6267 9.50001 13.6267ZM9.50001 5.67374C7.66592 5.67374 6.17375 7.16591 6.17375 9C6.17375 10.8341 7.66592 12.3263 9.50001 12.3263C11.3341 12.3263 12.8263 10.8341 12.8263 9C12.8263 7.16591 11.3341 5.67374 9.50001 5.67374Z" fill="#EAB809"/>
+<path d="M9.49999 3.41442C9.14091 3.41442 8.84979 3.12331 8.84979 2.76422V0.650201C8.84979 0.291117 9.14091 0 9.49999 0C9.85908 0 10.1502 0.291117 10.1502 0.650201V2.76422C10.1502 3.12331 9.85908 3.41442 9.49999 3.41442Z" fill="#EAB809"/>
+<path d="M9.49999 18C9.14091 18 8.84979 17.7089 8.84979 17.3498V15.2358C8.84979 14.8767 9.14091 14.5856 9.49999 14.5856C9.85908 14.5856 10.1502 14.8767 10.1502 15.2358V17.3498C10.1502 17.709 9.85908 18 9.49999 18Z" fill="#EAB809"/>
+<path d="M17.8498 9.6502H15.7358C15.3767 9.6502 15.0856 9.35908 15.0856 8.99999C15.0856 8.64091 15.3767 8.34979 15.7358 8.34979H17.8498C18.2089 8.34979 18.5 8.64091 18.5 8.99999C18.5 9.35908 18.209 9.6502 17.8498 9.6502Z" fill="#EAB809"/>
+<path d="M3.26422 9.6502H1.1502C0.791117 9.6502 0.5 9.35908 0.5 8.99999C0.5 8.64091 0.791117 8.34979 1.1502 8.34979H3.26422C3.62331 8.34979 3.91442 8.64091 3.91442 8.99999C3.91442 9.35908 3.62331 9.6502 3.26422 9.6502Z" fill="#EAB809"/>
+<path d="M13.9094 5.2408C13.743 5.2408 13.5766 5.17734 13.4497 5.05034C13.1957 4.79641 13.1957 4.3847 13.4497 4.13086L14.9445 2.63609C15.1984 2.38217 15.6101 2.38208 15.864 2.63609C16.1179 2.89002 16.1179 3.30173 15.864 3.55557L14.3691 5.05034C14.2422 5.17734 14.0758 5.2408 13.9094 5.2408Z" fill="#EAB809"/>
+<path d="M3.59574 15.5545C3.42937 15.5545 3.26292 15.491 3.136 15.364C2.88208 15.1101 2.88208 14.6984 3.136 14.4445L4.63086 12.9497C4.88478 12.6958 5.29649 12.6958 5.55033 12.9497C5.80425 13.2036 5.80425 13.6153 5.55033 13.8691L4.05547 15.364C3.92855 15.491 3.76219 15.5545 3.59574 15.5545Z" fill="#EAB809"/>
+<path d="M15.4042 15.5545C15.2378 15.5545 15.0713 15.491 14.9444 15.364L13.4496 13.8691C13.1956 13.6152 13.1956 13.2035 13.4496 12.9497C13.7035 12.6958 14.1152 12.6958 14.369 12.9497L15.8639 14.4445C16.1178 14.6985 16.1178 15.1102 15.8639 15.364C15.737 15.491 15.5706 15.5545 15.4042 15.5545Z" fill="#EAB809"/>
+<path d="M5.09059 5.2408C4.92423 5.2408 4.75778 5.17734 4.63086 5.05034L3.136 3.55557C2.88208 3.30164 2.88208 2.89002 3.136 2.63609C3.38993 2.38217 3.80163 2.38208 4.05547 2.63609L5.55033 4.13086C5.80425 4.38479 5.80425 4.79641 5.55033 5.05034C5.42341 5.17734 5.25704 5.2408 5.09059 5.2408Z" fill="#EAB809"/>
+</g>
+<defs>
+<clipPath id="clip0_319_210">
+<rect width="18" height="18" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/ColorModeSwitch/ColorModeSwitch.tsx b/src/components/ColorModeSwitch/ColorModeSwitch.tsx
index ce2d44e..0a34d5e 100644
--- a/src/components/ColorModeSwitch/ColorModeSwitch.tsx
+++ b/src/components/ColorModeSwitch/ColorModeSwitch.tsx
@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 interface ColorModeSwitchProps {
   isDarkMode: boolean;
   onToggle: Function;
@@ -11,16 +13,21 @@ export default function ColorModeSwitch({
     <div
       onClick={() => onToggle()}
       className="flex absolute bottom-8 right-8 w-12 h-6 rounded-full
-        dark:bg-light-blue dark:text-special-black bg-special-black
-        text-white-blue text-center cursor-pointer"
+        dark:bg-white-blue bg-special-black cursor-pointer"
     >
       <span
         className={
-          'h-6 w-6 rounded-full shadow-lg transition-all duration-200 ' +
-          (isDarkMode ? 'bg-white-blue' : 'ml-6 bg-dark-blue')
+          `flex justify-center h-6 w-6 rounded-full shadow-lg transition-all
+          duration-200 select-none` +
+          (isDarkMode ? ' bg-[#FFE483]' : ' ml-6 bg-dark-blue')
         }
       >
-        {isDarkMode ? '🌞' : '🌙'}
+        <Image
+          src={`/images/${isDarkMode ? 'sun' : 'moon'}.svg`}
+          height={18}
+          width={18}
+          alt="Sun"
+        />
       </span>
     </div>
   );