UI improvements

luloxi · Oct 2, 2024 · 01e0e9a · 01e0e9a
1 parent c497707
commit 01e0e9a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 35 deletions.
diff --git a/packages/nextjs/app/create/_components/ImageUploader.tsx b/packages/nextjs/app/create/_components/ImageUploader.tsx
@@ -73,7 +73,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ image, setUploaded
   return (
     <div
       className={`relative flex items-center justify-center w-60 h-60 rounded-lg shadow-lg ${
-        dragActive ? "bg-orange-400 border-2 border-orange-600" : ""
+        dragActive ? "bg-blue-400 border-2 border-blue-600" : ""
       } ${previewImage ? "" : "bg-base-200"}`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}

diff --git a/packages/nextjs/app/not-found/NotFound.tsx b/packages/nextjs/app/not-found/NotFound.tsx
@@ -4,7 +4,7 @@ import { NextPage } from "next";
 
 export const NotFound: NextPage = () => {
   return (
-    <div className="flex flex-col bg-orange-800 justify-center items-center min-h-screen p-2">
+    <div className="flex flex-col bg-blue-800 justify-center items-center min-h-screen p-2">
       {/* Not Found Section */}
       <div className="relative text-red-500 flex flex-col justify-center items-center bg-base-100 p-6 rounded-lg shadow-md w-full">
         <p className="font-bold text-2xl">Page under development</p>

diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
@@ -220,12 +220,7 @@ const ProfilePage: NextPage = () => {
 
                   {bio && <p className="text-base-content">{bio}</p>}
                   {website && (
-                    <a
-                      href={normalizeUrl(website)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-orange-600"
-                    >
+                    <a href={normalizeUrl(website)} target="_blank" rel="noopener noreferrer" className="text-blue-600">
                       {website}
                     </a>
                   )}

diff --git a/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx
@@ -85,7 +85,7 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
   return (
     <div
       className={`relative flex items-center justify-center w-32 h-32 rounded-full shadow-lg ${
-        dragActive ? "bg-orange-500 border-2 border-orange-600" : "bg-base-200"
+        dragActive ? "bg-blue-500 border-2 border-blue-600" : "bg-base-200"
       } ${previewImage ? "" : "bg-base-200"} `}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}

diff --git a/packages/nextjs/app/search/Search.tsx b/packages/nextjs/app/search/Search.tsx
@@ -47,7 +47,7 @@ export const Search = () => {
         {error && <p className="text-red-500 mb-4">{error}</p>}
         <button
           onClick={handleSearch}
-          className="btn btn-primary w-full border-0 bg-orange-600 rounded-lg text-white py-2 px-4"
+          className="btn btn-primary w-full border-0 bg-blue-600 rounded-lg text-white py-2 px-4"
         >
           Go to profile
         </button>

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -63,7 +63,7 @@ export const Footer = () => {
     <>
       {pathname !== "/search" && (
         <div
-          className={`fixed bottom-16 lg:bottom-8 right-8 p-3 bg-orange-600 cursor-pointer hover:bg-orange-800 text-white rounded-full shadow-lg ${
+          className={`fixed bottom-16 lg:bottom-8 right-8 p-3 bg-blue-600 cursor-pointer hover:bg-blue-800 text-white rounded-full shadow-lg ${
             showPlusIcon ? "animate-show" : "animate-hide"
           }`}
           onClick={openModal}
@@ -107,25 +107,25 @@ export const Footer = () => {
       <footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-around items-center">
         <Link href="/not-found" passHref>
           <EnvelopeIcon
-            className={`h-6 w-6 text-red-600 ${pathname === "/messages" ? "text-orange-600" : "hover:text-orange-600"}`}
+            className={`h-6 w-6 text-red-600 ${pathname === "/messages" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
 
         <Link href="/not-found" passHref>
           <BellIcon
             className={`h-6 w-6 text-red-600 ${
-              pathname === "/notifications" ? "text-orange-600" : "hover:text-orange-600"
+              pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
             }`}
           />
         </Link>
 
         <Link href="/" passHref>
-          <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-orange-600" : "hover:text-orange-600"}`} />
+          <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`} />
         </Link>
 
         <Link href="/search" passHref>
           <MagnifyingGlassIcon
-            className={`h-6 w-6 ${pathname === "/search" ? "text-orange-600" : "hover:text-orange-600"}`}
+            className={`h-6 w-6 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
 

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -33,14 +33,21 @@ export const Header = () => {
   return (
     <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-2">
-        <div className="flex lg:hidden ml-2 items-center justify-center">
-          <SwitchTheme />
+        <div className="flex lg:hidden">
+          <Link href="/" passHref>
+            <span className="inline-flex items-center gap-2">
+              <strong>PunkSociety</strong>{" "}
+              <span role="img" aria-label="emoji">
+                🤘
+              </span>
+            </span>
+          </Link>
         </div>
         <div className="flex flex-row gap-3">
           <Link href="/" passHref>
             <button
               className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
-                pathname === "/" ? "text-orange-600" : ""
+                pathname === "/" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
@@ -52,7 +59,7 @@ export const Header = () => {
           <Link href="/search" passHref>
             <button
               className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
-                pathname === "/search" ? "text-orange-600" : ""
+                pathname === "/search" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
@@ -64,7 +71,7 @@ export const Header = () => {
           <Link href="/not-found" passHref>
             <button
               className={`bg-transparent text-red-600 hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
-                pathname === "/notifications" ? "text-orange-600" : ""
+                pathname === "/notifications" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
@@ -76,7 +83,7 @@ export const Header = () => {
           <Link href="/not-found" passHref>
             <button
               className={`bg-transparent text-red-600 hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
-                pathname === "/messages" ? "text-orange-600" : ""
+                pathname === "/messages" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
@@ -87,7 +94,7 @@ export const Header = () => {
         </div>
       </div>
 
-      <div className="navbar-center flex-1 flex  justify-center items-center">
+      <div className="navbar-center hidden flex-1 lg:flex justify-center items-center">
         <Link href="/" passHref>
           <span className="inline-flex items-center gap-2">
             <strong>PunkSociety</strong>{" "}
@@ -98,7 +105,7 @@ export const Header = () => {
         </Link>
       </div>
 
-      <div className="navbar-end lg:mr-4 relative">
+      <div className="navbar-end mr-2 relative">
         <div className="flex justify-center items-center gap-3 ">
           <div className="hidden lg:flex">
             <PunkBalance address={connectedAddress} usdMode />
@@ -107,21 +114,23 @@ export const Header = () => {
           <PunkConnectButton />
           <FaucetButton />
         </div>
-        <div className="hidden lg:flex flex-row items-center justify-center gap-3">
+        <div className="flex flex-row items-center justify-center gap-3">
           <div className="lg:mr-2">
             <SwitchTheme />
           </div>
 
-          <Link href={`/profile/${connectedAddress}`} passHref>
-            <div
-              className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
-              style={{
-                backgroundImage: `url(${profilePicture})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-              }}
-            ></div>
-          </Link>
+          <div className="hidden lg:flex">
+            <Link href={`/profile/${connectedAddress}`} passHref>
+              <div
+                className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
+                style={{
+                  backgroundImage: `url(${profilePicture})`,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                }}
+              ></div>
+            </Link>
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/nextjs/components/punk-society/LoadingBars.tsx b/packages/nextjs/components/punk-society/LoadingBars.tsx
@@ -2,7 +2,7 @@
 export const LoadingBars = () => {
   return (
     <div className="flex justify-center items-center mt-10">
-      <span className="loading text-orange-600 loading-bars loading-lg"></span>
+      <span className="loading text-blue-600 loading-bars loading-lg"></span>
       {/* <div className="text-2xl text-primary-content ml-4"></div> */}
     </div>
   );