Tweaked minor things, Started on Wireless Settings

src/Index.tsx

@@ -7,8 +7,8 @@ import HighSignal from "./assets/high_signal.png";
 import Dashboard from "./pages/Dashboard";
 import Devices from "./pages/DeviceList";
 import Extend from "./pages/ExtendWirelessNetwork";
-import WirelessSettings from "./pages/SystemSettings";
+import WirelessSettings from "./pages/WirelessSettings";
-import SystemSettings from "./pages/WirelessSettings";
+import SystemSettings from "./pages/SystemSettings";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import Navbar from "./components/Navbar";
@@ -52,6 +52,9 @@ function Index() {
   const [fiveGExtendedName, setFiveGExtendedName] = useState(
     "Example 5GHz Network",
   );
+  const [fiveGExtendedPassword, setFiveGExtendedPassword] = useState("123");
+  const [twoGExtendedPassword, setTwoGExtendedPassword] = useState("123");
+
   const [devicesOnline, setDevicesOnline] = useState(0);
 
   const [extenderMode, setExtenderMode] = useState(false);
@@ -80,7 +83,7 @@ function Index() {
 
   return (
     <>
-      <Navbar LoggedUser={loggedUser} />
+      <Navbar loggedUser={loggedUser} />
       <Routes>
         <Route
           path="/"
@@ -112,7 +115,7 @@ function Index() {
           element={
             <Extend
               selectedModeButton={selectedModeButton}
-              setSelecModeButton={setSelectedModeButton}
+              setSelectModeButton={setSelectedModeButton}
               extendedMode={extenderMode}
               setExtendedMode={setExtenderMode}
               connected={connected}
@@ -123,7 +126,21 @@ function Index() {
             />
           }
         />
-        <Route path="/wireless" element={<WirelessSettings />} />
+        <Route
+          path="/wireless"
+          element={
+            <WirelessSettings
+              fiveGExtenderName={fiveGExtendedName}
+              twoGExtendedName={twoGExtendedName}
+              setFiveGExtendedName={setFiveGExtendedName}
+              setTwoGExtendedName={setTwoGExtendedName}
+              fiveGExtendedPassword={fiveGExtendedPassword}
+              twoGExtendedPassword={twoGExtendedPassword}
+              setFiveGExtendedPassword={setFiveGExtendedPassword}
+              setTwoGExtendedPassword={setTwoGExtendedPassword}
+            />
+          }
+        />
         <Route path="/settings" element={<SystemSettings />} />
         <Route
           path="/login"

src/components/Navbar.tsx

@@ -1,14 +1,14 @@
 interface Props {
-  LoggedUser: string;
+  loggedUser: string;
 }
 
-function Navbar({ LoggedUser }: Props) {
+function Navbar({ loggedUser }: Props) {
   return (
     <nav id="topNav">
       <h1>Wifi Extender Hub</h1>
-      <p>{ LoggedUser }</p>
+      <p>{loggedUser}</p>
     </nav>
-  )
+  );
 }
 
 export default Navbar;

src/pages/DeviceList.tsx

@@ -22,7 +22,7 @@ function DeviceList({ deviceNames, deviceIPs, setDevice, setDeviceIP }: Props) {
   };
 
   return (
-    <div id="deviceList">
+    <div className="panel">
       <h2>Device list</h2>
       {deviceNames.length === 0 && <p>No devices are connected.</p>}
       <ul id="devices">

src/pages/ExtendWirelessNetwork.tsx

@@ -3,7 +3,7 @@ import "../styles/ExtendWirelessNetwork.css";
 
 interface Props {
   selectedModeButton: number;
-  setSelecModeButton: Dispatch<SetStateAction<number>>;
+  setSelectModeButton: Dispatch<SetStateAction<number>>;
   extendedMode: boolean;
   setExtendedMode: Dispatch<SetStateAction<boolean>>;
   connected: number;
@@ -15,7 +15,7 @@ interface Props {
 
 function ExtendWirelessNetwork({
   selectedModeButton,
-  setSelecModeButton,
+  setSelectModeButton,
   extendedMode,
   setExtendedMode,
   connected,
@@ -27,14 +27,14 @@ function ExtendWirelessNetwork({
   const buttons = ["AP Mode", "Extend Mode"];
 
   return (
-    <div id="extendNetwork">
+    <div className="panel">
       <h2>Extend Network</h2>
       <div id="modeButton">
         {buttons.map((button, index) => (
           <button
             className={selectedModeButton === index ? "modeButonActive" : ""}
             onClick={() => {
-              setSelecModeButton(index);
+              setSelectModeButton(index);
               setExtendedMode(buttons[index] === "Extend Mode");
             }}
           >

src/pages/WirelessSettings.tsx

@@ -1,5 +1,79 @@
-function WirelessName() {
+import { useState, Dispatch, SetStateAction } from "react";
-  return <p>Wireless Name</p>;
+import "../styles/WirelessSettings.css";
+
+interface Props {
+  fiveGExtenderName: string;
+  twoGExtendedName: string;
+  setFiveGExtendedName: Dispatch<SetStateAction<string>>;
+  setTwoGExtendedName: Dispatch<SetStateAction<string>>;
+  fiveGExtendedPassword: string;
+  twoGExtendedPassword: string;
+  setFiveGExtendedPassword: Dispatch<SetStateAction<string>>;
+  setTwoGExtendedPassword: Dispatch<SetStateAction<string>>;
 }
 
-export default WirelessName;
+function WirelessSettings({
+  fiveGExtenderName,
+  twoGExtendedName,
+  setFiveGExtendedName,
+  setTwoGExtendedName,
+  fiveGExtendedPassword,
+  twoGExtendedPassword,
+  setFiveGExtendedPassword,
+  setTwoGExtendedPassword,
+}: Props) {
+  const buttons = ["5GHz Network", "2.4GHz Network"];
+  const [selectedButton, setSelectedButton] = useState(0);
+
+  return (
+    <div className="panel">
+      <h2>Wireless Settings</h2>
+      <div id="modeButton">
+        {buttons.map((button, index) => (
+          <button
+            className={selectedButton === index ? "modeButonActive" : ""}
+            onClick={() => {
+              setSelectedButton(index);
+            }}
+          >
+            {button}
+          </button>
+        ))}
+      </div>
+
+      <div id="networkSettings">
+        {selectedButton === 0 ? (
+          <>
+            <h3>5GHz Settings</h3>
+            <div>
+              <h4>Wireless Name</h4>
+              <input type="text" defaultValue={fiveGExtenderName}></input>
+              <h4>Wireless Password</h4>
+              <input
+                type="password"
+                defaultValue={fiveGExtendedPassword}
+              ></input>
+            </div>
+            <button style={{ marginTop: "20px" }}>Sudmit</button>
+          </>
+        ) : (
+          <>
+            <h3>2.4GHz Settings</h3>
+            <div>
+              <h4>Wireless Name</h4>
+              <input type="text" defaultValue={twoGExtendedName}></input>
+              <h4>Wireless Password</h4>
+              <input
+                type="password"
+                defaultValue={twoGExtendedPassword}
+              ></input>
+            </div>
+            <button style={{ marginTop: "20px" }}>Sudmit</button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default WirelessSettings;

src/styles/DeviceList.css

@@ -1,17 +1,3 @@
-#deviceList {
-  background-color: var(--bg-color-alt);
-  margin-top: 20px;
-  border-radius: 20px;
-  padding: 20px;
-  height: calc(100% - 50px);
-  overflow: scroll;
-
-  h2 {
-    font-size: 2.5rem;
-    text-align: center;
-  }
-}
-
 #devices {
     list-style: none;
     display: flex;

src/styles/ExtendWirelessNetwork.css

@@ -1,15 +1,4 @@
-#extendNetwork {
+.panel {
-    background-color: var(--bg-color-alt);
-    margin-top: 20px;
-    border-radius: 20px;
-    padding: 20px;
-    height: calc(100% - 50px);
-    overflow: scroll;
-
-    h2 {
-        font-size: 2.5rem;
-        text-align: center;
-    }
     button {
         background-color: #071436;
         color: white;

src/styles/Main.css

@@ -24,7 +24,7 @@ body {
     background-color: #071935;
     color: #fff;
     padding: 20px;
-  font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
     height: 100vh;
 }
 
@@ -53,3 +53,17 @@ a {
     justify-content: center;
     height: calc(100% - 40px);
 }
+
+.panel {
+    background-color: var(--bg-color-alt);
+    margin-top: 20px;
+    border-radius: 20px;
+    padding: 20px;
+    height: calc(100% - 50px);
+    overflow: scroll;
+
+    h2 {
+        font-size: 2.5rem;
+        text-align: center;
+    }
+}

src/styles/WirelessSettings.css

@@ -0,0 +1,89 @@
+.panel {
+    button {
+        background-color: #071436;
+        color: white;
+        border: none;
+        cursor: pointer;
+        height: 50px;
+        width: 100px;
+        border-radius: 10px;
+        transition: 0.3s background-color;
+    }
+    button:hover {
+        background-color: #0069ff;
+    }
+    #modeButton {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+    }
+    #APMode {
+        margin-top: 60px;
+        font-size: 2rem;
+        text-align: center;
+    }
+    .modeButonActive {
+        background-color: #0069ff;
+    }
+}
+
+#networkSettings {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h3 {
+        font-size: 2rem;
+        text-align: center;
+        margin-top: 60px;
+    }
+    div {
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
+        max-width: 360px;
+        font-weight: normal;
+        margin-top: 20px;
+        gap: 5px;
+
+        h2 {
+            font-size: 1.5rem;
+            font-weight: normal;
+            color: #ffffffd5;
+        }
+        input {
+            color: #ffffffb4;
+            border: none;
+            background-color: #071436;
+            height: 40px;
+            width: 360px;
+            border-radius: 10px;
+            padding: 5px;
+            font-size: 1rem;
+        }
+        p {
+            font-size: 0.8rem;
+            color: #ffffffd5;
+            max-width: fit-content;
+        }
+        a {
+            color: #008cff;
+        }
+        button {
+            background-color: #071436;
+            border: none;
+            color: #fff;
+            margin-top: 20px;
+            height: 50px;
+            width: 100%;
+            border-radius: 10px;
+            font-size: 1.3rem;
+            cursor: pointer;
+            transition: 0.3s background-color;
+        }
+        button:hover {
+            background-color: #0069ff;
+        }
+    }
+}