Added switch theme to config menu

luloxi · Oct 22, 2024 · 36e9bb2 · 36e9bb2
1 parent 062c82a
commit 36e9bb2
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
@@ -290,6 +290,8 @@ const ProfilePage: NextPage = () => {
             Revenue
           </button>
         </div>
+      </div>
+      <div>
         <NewsFeed posts={posts} isGrid={false} />
         <div ref={lastPostElementRef}></div>
         {loadingMore && <LoadingBars />}

diff --git a/packages/nextjs/app/search/Search.tsx b/packages/nextjs/app/search/Search.tsx
@@ -46,9 +46,17 @@ export const Search = () => {
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      handleSearch();
+    }
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen  gap-3">
-      <InputBase value={searchQuery} onChange={setSearchQuery} placeholder="Enter username or address" />
+      <div onKeyDown={handleKeyDown}>
+        <InputBase value={searchQuery} onChange={setSearchQuery} placeholder="Enter username or address" />
+      </div>
       {/* <AddressInput value={searchQuery} onChange={setSearchQuery} placeholder="Enter username, address or ENS" /> */}
       <button onClick={handleSearch} disabled={loading} className="btn btn-primary">
         {loading ? <LoadingBars /> : "Go"}

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -3,7 +3,6 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { SwitchTheme } from "./SwitchTheme";
 import { ConfigMenu } from "./punk-society/ConfigMenu";
 import { PunkConnectButton } from "./punk-society/PunkConnectButton";
 import { FaucetButton } from "./scaffold-eth";
@@ -19,7 +18,7 @@ export const Header = () => {
     <div className="flex lg:sticky  top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start ml-4 lg:ml-2">
         <div className="flex lg:hidden">
-          <SwitchTheme />
+          {/* <ConfigMenu /> */}
           <div className="flex justify-center items-center ml-8 lg:ml-0">
             <Link href="/" passHref>
               <span className="inline-flex items-center gap-2">
@@ -113,14 +112,9 @@ export const Header = () => {
         <div className="flex flex-row items-center justify-center gap-3">
           {/* <div className="lg:mr-2"></div> */}
 
-          <div className=" lg:ml-4">
+          <div className=" lg:ml-4 mr-4">
             <ConfigMenu />
           </div>
-          <div className="mr-4">
-            <div className="hidden lg:flex ">
-              <SwitchTheme />
-            </div>
-          </div>
         </div>
       </div>
     </div>

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -21,9 +21,13 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
-      <button onClick={handleToggle} className="swap swap-rotate">
+    <div
+      onClick={handleToggle}
+      className={`flex cursor-pointer space-x-2 h-8 items-center hover:bg-[#C9D8E5] dark:hover:bg-[#193048] justify-start w-full rounded-lg pl-5 lg:pl-3 text-sm ${className}`}
+    >
+      <button 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>
       </button>
     </div>
   );

diff --git a/packages/nextjs/components/punk-society/ConfigMenu/AddressInfoDropdown.tsx b/packages/nextjs/components/punk-society/ConfigMenu/AddressInfoDropdown.tsx
@@ -11,6 +11,7 @@ import {
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
 import { KeyIcon as KeyIconSolid, LanguageIcon } from "@heroicons/react/24/solid";
+import { SwitchTheme } from "~~/components/SwitchTheme";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
@@ -91,6 +92,9 @@ export const AddressInfoDropdown = ({ blockExplorerAddressLink }: AddressInfoDro
               </button>
             </li>
           ) : null}
+          <div className={selectingNetwork ? "hidden" : "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" />