Use a pill-like button to toggle color mode

Author: sergioalvz

layouts/Application/components/Footer/index.tsx

@@ -78,7 +78,17 @@ export function Footer() {
           </ul>
 
           <button className="AppFooter__DarkModeToggle" onClick={() => toggleDarkMode()}>
-            {isDarkModeEnabled ? <RxSun /> : <RxMoon />}
+            {isDarkModeEnabled && (
+              <>
+                <RxSun /> Use light mode
+              </>
+            )}
+
+            {!isDarkModeEnabled && (
+              <>
+                <RxMoon /> Use dark mode
+              </>
+            )}
           </button>
         </div>
       </Application.Column>

layouts/Application/components/Footer/style.css

@@ -48,12 +48,14 @@
 .AppFooter__Actions {
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
   justify-content: space-between;
+  padding: 1em 0;
 }
 
 .AppFooter__Links {
   display: flex;
-  margin: 1em 0;
 
   list-style-type: none;
 }
@@ -74,7 +76,9 @@
   border-radius: 100%;
   color: var(--c-yellow-11);
 
-  transition: background-color ease-in 150ms, border-color ease-in 150ms;
+  transition:
+    background-color ease-in 150ms,
+    border-color ease-in 150ms;
 }
 
 .AppFooter__Links__Link:hover {
@@ -87,15 +91,19 @@
   border: 2px solid var(--c-gray-7);
   display: flex;
   font-size: var(--fs-s);
+  gap: 0.5em;
   justify-content: center;
   padding: 0.5em;
 
   background-color: var(--c-gray-3);
-  border-radius: 100%;
+  border-radius: 99999999px;
   color: var(--c-gray-11);
   cursor: pointer;
+  font-family: var(--ff-sans-serif);
 
-  transition: background-color ease-in 150ms, border-color ease-in 150ms;
+  transition:
+    background-color ease-in 150ms,
+    border-color ease-in 150ms;
 }
 
 .AppFooter__DarkModeToggle:hover {