Integrated better the switch theme function

Author: luloxi

packages/nextjs/components/SwitchTheme.tsx

@@ -21,7 +21,9 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-8 items-center justify-start w-full ml-3 text-sm ${className}`}>
+    <div
+      className={`flex space-x-2 h-8 items-center hover:bg-[#C9D8E5] dark:hover:bg-[#193048] justify-start w-full rounded-lg pl-3 text-sm ${className}`}
+    >
       <button onClick={handleToggle} className="swap swap-rotate flex flex-row gap-2 justify-start items-center">
         {isDarkMode ? <MoonIcon className="h-5 w-5" /> : <SunIcon className="h-5 w-5" />}
         <span>Switch theme</span>

packages/nextjs/components/punk-society/ConfigMenu/AddressInfoDropdown.tsx

@@ -49,9 +49,7 @@ export const AddressInfoDropdown = ({ blockExplorerAddressLink }: AddressInfoDro
           className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
         >
           <NetworkOptions hidden={!selectingNetwork} />
-          <div className="hidden lg:flex items-center justify-center ">
-            <SwitchTheme />
-          </div>
+
           <li className={selectingNetwork ? "hidden" : ""}>
             <label
               htmlFor="qrcode-modal"
@@ -75,6 +73,9 @@ export const AddressInfoDropdown = ({ blockExplorerAddressLink }: AddressInfoDro
               </button>
             </li>
           ) : null}
+          <div className="hidden lg:flex items-center justify-center ">
+            <SwitchTheme />
+          </div>
           <li className={selectingNetwork ? "hidden" : ""}>
             <label htmlFor="switch-language-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
               <LanguageIcon className="h-6 w-4 ml-2 sm:ml-0" />