Build basic login/signup page structure

-import { Outlet, useLocation } from "react-router-dom";
 // components
 // components
 import Bottombar from "./components/Bottombar";
 import Bottombar from "./components/Bottombar";
 import Topbar from "./components/Topbar";
 import Topbar from "./components/Topbar";
 
 
 function App() {
 function App() {
-  let location = useLocation();
-
-  const renderByLocation = () => {
-    if (location.pathname != "/") {
-      return <Outlet />;
-    }
-    return (
-      <div>
-        <h1>chatroom</h1>
-      </div>
-    );
-  };
-
   return (
   return (
     <div>
     <div>
       <Topbar />
       <Topbar />
-      {renderByLocation()}
+      <h1>Chatroom</h1>
       <Bottombar />
       <Bottombar />
     </div>
     </div>
   );
   );

 import React from "react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import reportWebVitals from "./reportWebVitals";
 import reportWebVitals from "./reportWebVitals";
 import App from "./App";
 import App from "./App";
 // routes
 // routes
@@ -14,12 +14,12 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 root.render(
   <BrowserRouter>
   <BrowserRouter>
     <Routes>
     <Routes>
-      <Route path="/" element={<App />}>
-        <Route path="/userroom" element={<Userroom />} />
-        <Route path="/settings" element={<Settings />} />
-      </Route>
+      // root route is for chatroom
+      <Route path="/" element={<App />} />
       <Route path="/login" element={<Login />} />
       <Route path="/login" element={<Login />} />
       <Route path="/signup" element={<Signup />} />
       <Route path="/signup" element={<Signup />} />
+      <Route path="/userroom" element={<Userroom />} />
+      <Route path="/settings" element={<Settings />} />
     </Routes>
     </Routes>
   </BrowserRouter>
   </BrowserRouter>
 );
 );

+// styles
+import { Link } from "react-router-dom";
+import "../styles/layout.scss";
+
 function Login() {
 function Login() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("login form submit called");
+  };
+
   return (
   return (
-    <div>
-      <h1>Login page</h1>
+    <div className="container">
+      <h1>Welcome back to Weather-Chatbot/Messanger!</h1>
+      <h2>Stay connected with weather/friends all the time</h2>
+
+      <button>Login with Google</button>
+      <button>Login with GitHub</button>
+
+      <br />
+
+      <form className="authForm" onSubmit={(e) => handleSubmit(e)}>
+        <label htmlFor="email">
+          email: <input type="text" id="email" />
+        </label>
+        <label htmlFor="password">
+          password: <input type="text" id="password" />
+        </label>
+        <label htmlFor="submit">
+          <input type="submit" id="submit" />
+        </label>
+      </form>
+
+      <br />
+
+      <p>
+        Don't have an account? <Link to="/signup">Create account</Link>
+      </p>
     </div>
     </div>
   );
   );
 }
 }

+// components
+import Bottombar from "../components/Bottombar";
+import Topbar from "../components/Topbar";
+
 function Settings() {
 function Settings() {
   return (
   return (
-    <div>
-      <h1>Settings page</h1>
-      <div>username</div>
-      <div>email</div>
-      <div>birthday</div>
-      <br />
-      <button>notification</button>
-    </div>
+    <>
+      <Topbar />
+      <div>
+        <h1>Settings page</h1>
+        <div>username</div>
+        <div>email</div>
+        <div>birthday</div>
+        <br />
+        <button>notification</button>
+      </div>
+      <Bottombar />
+    </>
   );
   );
 }
 }
 
 

+import { Link } from "react-router-dom";
+// styles
+import "../styles/layout.scss";
+
 function Signup() {
 function Signup() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("signup form submit called");
+  };
+
   return (
   return (
-    <div>
-      <h1>Signup page</h1>
+    <div className="container">
+      <h1>Welcome to Weather-Chatbot/Messanger!</h1>
+      <h2>Stay connected with weather/friends all the time</h2>
+
+      <button>Create account with Google</button>
+      <button>Create account with GitHub</button>
+
+      <br />
+
+      <form className="authForm" onSubmit={(e) => handleSubmit(e)}>
+        <label htmlFor="username">
+          username: <input type="text" id="username" />
+        </label>
+        <label htmlFor="email">
+          email: <input type="text" id="email" />
+        </label>
+        <label htmlFor="password">
+          password: <input type="text" id="password" />
+        </label>
+        <label htmlFor="submit">
+          <input type="submit" id="submit" />
+        </label>
+      </form>
+
+      <br />
+
+      <p>
+        Have an account? <Link to="/login">Login</Link>
+      </p>
     </div>
     </div>
   );
   );
 }
 }

+// components
+import Bottombar from "../components/Bottombar";
+import Topbar from "../components/Topbar";
+
 function Userroom() {
 function Userroom() {
   return (
   return (
     <div>
     <div>
+      <Topbar />
       <h1>Userroom page</h1>
       <h1>Userroom page</h1>
+      <Bottombar />
     </div>
     </div>
   );
   );
 }
 }

+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.authForm {
+  display: flex;
+  flex-direction: column;
+}