change navbar layout

src-tauri/Cargo.toml

@@ -24,6 +24,9 @@ fork = "0.1.23"
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]
 
+[profile.dev]
+incremental = true # Compile your binary in smaller steps.
+
 [profile.release]
 panic = "abort" # Strip expensive panic clean-up logic
 codegen-units = 1 # Compile crates one at a time

src/components/SearchBox.jsx

@@ -21,7 +21,7 @@ function SearchBox() {
   }, []);
 
   return (
-    <form className='flex items-center gap-2 flex-1'>
+    <form>
       <label className='input input-bordered flex items-center gap-2 bg-base-300 w-80'>
         <input
           ref={inputRef}

src/layouts/About.jsx

@@ -1,18 +1,20 @@
+import { Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { usePreferenceStore } from "../store/usePreferenceStore.js";
 
 const About = () => {
   const { theme, setTheme } = usePreferenceStore();
   return (
     <>
       <button
-        className='btn btn-ghost normal-case text-xl ml-2'
+        className='btn normal-case text-xl ml-2'
         onClick={() => document.getElementById("about_modal").showModal()}
       >
-        <img src='/icon.png' className='size-8' />
+        <Cog8ToothIcon className='size-6' />
       </button>
       <dialog id='about_modal' className='modal'>
         <div className='modal-box'>
           <h3 className='font-bold text-lg'>About</h3>
+          <img src='/icon.png' className='size-40 mx-auto' />
           <p className='py-4'>
             A beautiful meme manager developed by an equally beautiful
             developer. Focusing on performance and UI with Rust and Tauri. Made

src/layouts/Navbar.jsx

@@ -8,7 +8,11 @@ export default function Navbar() {
   const { viewMode, setListMode, setGridMode } = usePreferenceStore();
   return (
     <div className='navbar bg-base-100 sticky top-0 z-10'>
-      <SearchBox />
+      <img src='/icon.png' className='size-9' />
+      <p className='hidden md:block text-xl font-bold mx-4'>Meme Manager</p>
+      <div className='mx-auto'>
+        <SearchBox />
+      </div>
       <MemeForm />
       <div className='join'>
         <button
@@ -24,7 +28,7 @@ export default function Navbar() {
         >
           <TableCellsIcon className='size-6' />
         </button>
-      </div>
+      </div>{" "}
       <About />
     </div>
   );