From 954d3ab04181f1d3a3033859ffabb1d29110a6c4 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 16 Aug 2023 15:57:05 +0100
Subject: [PATCH] feat: style for dark mode switch

---
 src/app/(home)/layout.tsx                 |  2 +-
 src/app/ColorSchemeInjector.tsx           | 12 +++++++----
 src/components/common/DarkModeSwitch.tsx  | 25 ++++++++++++++---------
 src/components/site/ConnectedAccounts.tsx |  2 +-
 src/components/site/SiteFooter.tsx        |  2 +-
 5 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index bf41d1f2..02dc6bfe 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -43,7 +43,7 @@ export default async function HomeLayout({
       <footer className="mt-10 font-medium border-t">
         <div className="max-w-screen-xl px-5 py-14 mx-auto flex flex-col sm:flex-row justify-between">
           <PromotionLinks className="w-full sm:w-72" />
-          <span className="inline-flex items-center space-x-4 mx-auto sm:mx-0 mt-10 sm:mt-0">
+          <span className="inline-flex items-center space-y-4 sm:space-y-0 sm:space-x-4 mx-auto sm:mx-0 mt-10 sm:mt-0 flex-col sm:flex-row">
             <DarkModeSwitch />
             <span>
               &copy;{" "}
diff --git a/src/app/ColorSchemeInjector.tsx b/src/app/ColorSchemeInjector.tsx
index d56fb426..9fe26453 100644
--- a/src/app/ColorSchemeInjector.tsx
+++ b/src/app/ColorSchemeInjector.tsx
@@ -1,6 +1,10 @@
 "use client"
 
-import { DARK_MODE_STORAGE_KEY } from "~/lib/constants"
+import {
+  COLOR_SCHEME_DARK,
+  COLOR_SCHEME_LIGHT,
+  DARK_MODE_STORAGE_KEY,
+} from "~/lib/constants"
 
 export const ColorSchemeInjector = () => {
   return (
@@ -14,12 +18,12 @@ const isDark = localStorage.getItem(DARK_MODE_STORAGE_KEY)
 if (typeof isDark === "undefined") {
   const currentColorScheme = window.matchMedia("(prefers-color-scheme: dark)")
     .matches
-    ? COLOR_SCHEME_DARK
-    : COLOR_SCHEME_LIGHT
+    ? "${COLOR_SCHEME_DARK}"
+    : "${COLOR_SCHEME_LIGHT}"
   document.documentElement.classList.add(currentColorScheme)
 } else {
   document.documentElement.classList.add(
-    isDark === "true" ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
+    isDark === "true" ? "${COLOR_SCHEME_DARK}" : "${COLOR_SCHEME_LIGHT}",
   )
 }
 })();`,
diff --git a/src/components/common/DarkModeSwitch.tsx b/src/components/common/DarkModeSwitch.tsx
index 00e31e7f..b966f995 100644
--- a/src/components/common/DarkModeSwitch.tsx
+++ b/src/components/common/DarkModeSwitch.tsx
@@ -4,9 +4,10 @@ import { useTheme } from "next-themes"
 import { MouseEvent } from "react"
 
 import { useIsClient } from "~/hooks/useClient"
+import { cn } from "~/lib/utils"
 
 const styles = {
-  base: " rounded-inherit inline-flex h-[32px] w-[32px] items-center justify-center border-0 text-current",
+  base: " rounded-inherit inline-flex h-[24px] w-[24px] items-center justify-center border-0 text-current",
 }
 
 const ThemeIndicator = () => {
@@ -18,10 +19,14 @@ const ThemeIndicator = () => {
   if (!theme) return null
   return (
     <div
-      className="absolute top-[3px] z-[-1] h-[32px] w-[32px] rounded-full bg-zinc-200/80 shadow-[0_1px_2px_0_rgba(127.5,127.5,127.5,.2),_0_1px_3px_0_rgba(127.5,127.5,127.5,.1)] duration-200 bg-blend-multiply transition-[left]"
-      style={{
-        left: { light: 4, system: 36, dark: 68 }[theme],
-      }}
+      className={cn(
+        "absolute top-[3px] bottom-[3px] aspect-square rounded-full bg-white shadow duration-200 transition-[left]",
+        {
+          "left-[3px]": theme === "light",
+          "left-[27px]": theme === "system",
+          "left-[51px]": theme === "dark",
+        },
+      )}
     />
   )
 }
@@ -84,7 +89,7 @@ const ThemeSwitcher = () => {
   return (
     <div
       role="radiogroup"
-      className="w-fit-content inline-flex rounded-full border border-slate-200 p-[3px]"
+      className="w-fit-content inline-flex rounded-full p-[3px] bg-zinc-200/80 text-xs"
     >
       <button
         aria-label="Switch to light theme"
@@ -94,7 +99,7 @@ const ThemeSwitcher = () => {
           buildThemeTransition(e, "light")
         }}
       >
-        <i className="icon-[mingcute--sun-line] scale-75" />
+        <i className="icon-[mingcute--sun-line]" />
       </button>
       <button
         aria-label="Switch to system theme"
@@ -104,7 +109,7 @@ const ThemeSwitcher = () => {
           buildThemeTransition(e, "system")
         }}
       >
-        <i className="icon-[mingcute--computer-line] scale-75" />
+        <i className="icon-[mingcute--computer-line]" />
       </button>
       <button
         aria-label="Switch to dark theme"
@@ -114,7 +119,7 @@ const ThemeSwitcher = () => {
           buildThemeTransition(e, "dark")
         }}
       >
-        <i className="icon-[mingcute--moon-line] scale-75" />
+        <i className="icon-[mingcute--moon-line]" />
       </button>
     </div>
   )
@@ -123,8 +128,8 @@ const ThemeSwitcher = () => {
 export const DarkModeSwitch = () => {
   return (
     <div className="relative">
-      <ThemeSwitcher />
       <ThemeIndicator />
+      <ThemeSwitcher />
     </div>
   )
 }
diff --git a/src/components/site/ConnectedAccounts.tsx b/src/components/site/ConnectedAccounts.tsx
index 8102af3a..d0c3d6ac 100644
--- a/src/components/site/ConnectedAccounts.tsx
+++ b/src/components/site/ConnectedAccounts.tsx
@@ -18,7 +18,7 @@ export default function ConnectedAccounts({
       {!!connectedAccounts?.length && (
         <div
           className={cn(
-            "xlog-social-platforms align-middle inline-flex items-center pt-1",
+            "xlog-social-platforms align-middle inline-flex items-center",
             className,
           )}
         >
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index 08c4fa22..1f863869 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -31,7 +31,7 @@ export default async function SiteFooter({
   return (
     <>
       <footer className="text-zinc-500 border-t">
-        <div className="max-w-screen-lg mx-auto px-5 py-10 text-xs sm:flex justify-between sm:space-x-5 sm:space-y-0 space-y-5">
+        <div className="max-w-screen-lg mx-auto px-5 py-10 text-xs sm:flex justify-between sm:space-x-5 sm:space-y-0 space-y-5 sm:items-center">
           <div className="font-medium text-base">
             <span>&copy; </span>
             <UniLink href="/" className="hover:text-accent">