Build topbar, bottombar

@@ -14,6 +14,7 @@
         "axios": "^0.27.2",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-icons": "^4.4.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "sass": "^1.51.0",
@@ -13533,6 +13534,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25963,6 +25972,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

@@ -9,6 +9,7 @@
     "axios": "^0.27.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "sass": "^1.51.0",
@@ -22,10 +23,17 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": ["react-app", "react-app/jest"]
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

@@ -7,14 +7,10 @@ import Topbar from "./components/Topbar";
 import ChatroomBox from "./components/ChatroomBox";
 
 function App() {
-  const [chats, setChats] = useState(null);
-
-  useEffect(() => {}, []);
-
   return (
     <div>
       <Topbar />
-      <h1>Chatroom page</h1>
+      <h1>Weather Page (home)</h1>
       <div></div>
 
       <Bottombar />

 import { NavLink } from "react-router-dom";
 // sytles
 import "../styles/bar.scss";
+import { FaKiwiBird } from "react-icons/fa";
+import { GiNestBirds } from "react-icons/gi";
+import { SiThunderbird } from "react-icons/si";
 
 function Bottombar() {
   return (
     <div className="bottombar">
-      <nav>
-        <NavLink to="/">Chatroom</NavLink> |{" "}
-        <NavLink to="/userroom">Userroom</NavLink>
-      </nav>
+      <NavLink to="/tell">
+        <FaKiwiBird />
+      </NavLink>
+      <NavLink to="/users">
+        <GiNestBirds />
+      </NavLink>
+      <NavLink to="/message">
+        <SiThunderbird />
+      </NavLink>
     </div>
   );
 }
 
+// TODO: message route should be used with another server port
+
 export default Bottombar;

 import { Link } from "react-router-dom";
 // styles
 import "../styles/bar.scss";
+import { TiWeatherPartlySunny } from "react-icons/ti";
+import { AiFillSetting } from "react-icons/ai";
 
 function Topbar() {
   return (
     <div className="topbar">
-      <Link to="/">LOGO</Link>
-      <div>Search Bar</div>
-      <Link to="/settings">Settings</Link>
+      <Link to="/" className="logo">
+        <TiWeatherPartlySunny />
+      </Link>
+      <Link to="/settings" className="settings">
+        <AiFillSetting />
+      </Link>
     </div>
   );
 }

@@ -6,8 +6,10 @@ import App from "./App";
 // routes
 import Signup from "./routes/signup";
 import Login from "./routes/login";
-import Userroom from "./routes/userroom";
+import Users from "./routes/users";
 import Settings from "./routes/settings";
+import Tell from "./routes/tell";
+import NotFound from "./routes/notfound";
 // styles
 import "./styles/layout.scss";
 
@@ -20,13 +22,17 @@ root.render(
         <Route exact path="/" element={<App />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/signup" element={<Signup />} />
-        <Route exact path="/userroom" element={<Userroom />} />
+        <Route exact path="/users" element={<Users />} />
         <Route exact path="/settings" element={<Settings />} />
+        <Route exact path="/tell" element={<Tell />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   </div>
 );
 
+// path="/" is for Weather(main) page
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

+function Tell() {
+  return <div>tell</div>;
+}
+
+export default Tell;

@@ -2,11 +2,22 @@
 .bottombar {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  font-size: 1.3rem;
+  text-align: center;
+  padding: 10px;
 
   a {
-    font-size: 2rem;
+    width: 45%;
+    height: 90%;
+    text-decoration: none;
+    color: #008b8b;
+  }
+  a:hover {
+    color: #00ced1;
+  }
+  .logo {
+    color: #008080;
   }
 
   * {
@@ -16,7 +27,25 @@
 
 .topbar {
   margin-bottom: 0.5rem;
+  justify-content: space-between;
+  border-bottom: 2px gray solid;
+  a {
+    font-size: 2.9rem;
+    height: 3rem;
+  }
+  .logo {
+    text-align: left;
+  }
+  .settings {
+    text-align: right;
+  }
 }
 .bottombar {
   margin-top: 0.5rem;
+  border-top: 2px gray solid;
+  font-size: 1.5rem;
+  height: 2.8rem;
+  a {
+    box-shadow: 3px 3px 3px 3px gray;
+  }
 }