refactor: improve header component layout and button styling

client/src/components/Header.tsx

@@ -10,17 +10,24 @@ const Header: React.FC = () => {
     setLoginCardVisible(false);
   };
 
-  let loginBtnVal: string = greeting();
+  let loginBtnVal: string = "Hello, " + greeting() + "!";
 
   return (
     <header className="bg-blue-600 text-white p-4 shadow-md">
       <div className="container mx-auto flex justify-between items-center">
-        <h1 className="text-xl font-bold">Bikelane <strong>Admin Panel</strong></h1>
+        <h1 className="text-xl font-bold">
+          Bikelane <strong>Admin Panel</strong>
+        </h1>
         <nav>
           <ul className="flex space-x-4">
             <li>
               <a className="hover:underline">
-                <button onClick={() => setLoginCardVisible(true)}>{loginBtnVal ?? "Login"}</button>
+                <button
+                  onClick={() => setLoginCardVisible(true)}
+                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                >
+                  {loginBtnVal ?? "Login"}
+                </button>
               </a>
             </li>
           </ul>