Merge pull request #1 from ErillLab/feature/improve-ui

Landing page + fixes

Author: Milegoo

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+CollecTF.db
 serverless-functions
 node_modules
 dist

public/assets/loginout.png

@@ -1,4 +1,4 @@
-import { UserProvider } from './components/contexts/UserContext';
+import { UserProvider } from '@/contexts/UserContext';
 import AppRoutes from './AppRoutes';
 
 function App() {

public/assets/step-1-collectf.jpg

@@ -4,7 +4,7 @@ import HomePage from "./pages/HomePage";
 import SearchPage from "./pages/Search/SearchPage";
 import WritePage from "./pages/WritePage";
 import ProtectedRoute from "./components/ProtectedRoute";
-import { useUser } from "./components/contexts/UserContext";
+import { useUser } from '@/contexts/UserContext';
 
 function AppRoutes() {
   const { userStatus } = useUser();

public/assets/step-2-collectf.jpg

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import SearchButton from "./search/general/SearchButton";
 import LoginButton from "./LoginButton";
 import WriteButton from "./WriteButton";
-import { useUser } from "./contexts/UserContext";
+import { useUser } from '@/contexts/UserContext';
 
 
 const Header = () => {
@@ -17,17 +17,17 @@ const Header = () => {
 
     return (
         <header className="flex justify-between items-center bg-surface px-8 py-4 border-b border-border">
+            <h1 className="text-5xl font-bold text-accent cursor-pointer hover:text-text" onClick={handleLogoClick}>
+                CollecTF
+            </h1>
 
-        <h1 className="text-5xl font-bold text-accent cursor-pointer hover:text-text" onClick={handleLogoClick}>
-            CollecTF
-        </h1>
+            <div className="flex items-center gap-4">
+                {(userStatus == 2) && <WriteButton />}
 
-        {(userStatus == 2) && <WriteButton />}
-
-        <SearchButton />
-
-        <LoginButton userStatus={userStatus} user={user} loading={loading}/>
+                <SearchButton />
 
+                <LoginButton userStatus={userStatus} user={user} loading={loading}/>
+            </div>
         </header>
     );
 }

public/assets/step-3-collectf.jpg

@@ -7,18 +7,18 @@ function LoginButton({ userStatus, user, loading }) {
 
     return (
       <>
-        {loading && <p>Loading...</p>}
-        {(userStatus == 1 || userStatus == 2) && user && !loading && <b>{user}</b>}
+        {loading && <div className="animate-pulse text-gray-500 font-semibold">Loading...</div>}
         {userStatus == 0 && !loading &&
-          <a className="text-accent no-underline hover:underline" href={loginUrl}>
-            <button className="btn">Log In With GitHub</button>
+          <a className="text-accent no-underline" href={loginUrl}>
+            <button className="btn bg-green-600 hover:bg-green-900 flex items-center gap-2 text-black"><img src="/reCollecTF/assets/loginout.png" alt="Log in" className="w-6 h-6"></img>Log In</button>
           </a>
         }
         {(userStatus == 1 || userStatus == 2) && !loading &&
-          <a className="text-accent no-underline hover:underline" href={logoutUrl}>
-          <button className="btn">Log out</button>
+          <a className="text-accent no-underline" href={logoutUrl}>
+            <button className="btn bg-red-700 hover:bg-red-900 flex items-center gap-2 text-black"><img src="/reCollecTF/assets/loginout.png" alt="Log out" className="w-6 h-6"></img>Log Out</button>
           </a>
         }
+        {(userStatus == 1 || userStatus == 2) && user && !loading && <b>{user}</b>}
       </>
     );
   }