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;
+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,58 +1,44 @@
-#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;
+    list-style: none;
-  display: flex;
+    display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin-top: 20px;
-
-  li {
-    display: inherit;
-    background-color: #071436;
-    padding: 30px 20px;
-    border-radius: 20px;
-    justify-content: space-between;
-    align-items: center;
-  }
-  h3 {
-    font-size: 1.8rem;
-    width: fit-content;
-  }
-  p {
-    font-size: 1.3rem;
-    width: fit-content;
-  }
-  div {
-    display: inherit;
     flex-direction: column;
-    text-align: center;
+    gap: 20px;
-    margin: 0 20px;
+    margin-top: 20px;
-    position: relative;
+
-    width: 100%;
+    li {
-  }
+        display: inherit;
-  img {
+        background-color: #071436;
-    max-width: 100px;
+        padding: 30px 20px;
-  }
+        border-radius: 20px;
-  .close {
+        justify-content: space-between;
-    max-width: 30px;
+        align-items: center;
-    cursor: pointer;
+    }
-    color: #fff;
+    h3 {
-    transition: 0.3s color;
+        font-size: 1.8rem;
-  }
+        width: fit-content;
-  .close:hover {
+    }
-    color: #0069ff;
+    p {
-  }
+        font-size: 1.3rem;
-}
+        width: fit-content;
+    }
+    div {
+        display: inherit;
+        flex-direction: column;
+        text-align: center;
+        margin: 0 20px;
+        position: relative;
+        width: 100%;
+    }
+    img {
+        max-width: 100px;
+    }
+    .close {
+        max-width: 30px;
+        cursor: pointer;
+        color: #fff;
+        transition: 0.3s color;
+    }
+    .close:hover {
+        color: #0069ff;
+    }
+}

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;
@@ -47,39 +36,39 @@
     margin-top: 20px;
 
     li {
-      display: inherit;
+        display: inherit;
-      background-color: #071436;
+        background-color: #071436;
-      padding: 30px 20px;
+        padding: 30px 20px;
-      border-radius: 20px;
+        border-radius: 20px;
-      justify-content: space-between;
+        justify-content: space-between;
-      align-items: center;
+        align-items: center;
     }
     h3 {
-      font-size: 1.8rem;
+        font-size: 1.8rem;
-      width: fit-content;
+        width: fit-content;
     }
     p {
-      font-size: 1.3rem;
+        font-size: 1.3rem;
-      width: fit-content;
+        width: fit-content;
     }
     div {
-      display: inherit;
+        display: inherit;
-      flex-direction: column;
+        flex-direction: column;
-      text-align: center;
+        text-align: center;
-      margin: 0 20px;
+        margin: 0 20px;
-      position: relative;
+        position: relative;
-      width: 100%;
+        width: 100%;
     }
     img {
-      max-width: 100px;
+        max-width: 100px;
     }
     .link {
-      max-width: 50px;
+        max-width: 50px;
-      cursor: pointer;
+        cursor: pointer;
-      color: #fff;
+        color: #fff;
-      transition: 0.3s color;
+        transition: 0.3s color;
     }
     .link:hover {
-      color: #0069ff;
+        color: #0069ff;
     }
 }

src/styles/Main.css

@@ -1,55 +1,69 @@
 @font-face {
-  font-family: Poppins;
+    font-family: Poppins;
-  src: url(../fonts/Poppins/Poppins-Bold.ttf);
+    src: url(../fonts/Poppins/Poppins-Bold.ttf);
-  font-weight: bold;
+    font-weight: bold;
 }
 
 @font-face {
-  font-family: Poppins;
+    font-family: Poppins;
-  src: url(../fonts/Poppins/Poppins-Regular.ttf);
+    src: url(../fonts/Poppins/Poppins-Regular.ttf);
-  font-weight: normal;
+    font-weight: normal;
 }
 
 :root {
-  --bg-color-alt: #071e42;
+    --bg-color-alt: #071e42;
 }
 
 * {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
-  background-color: #071935;
+    background-color: #071935;
-  color: #fff;
+    color: #fff;
-  padding: 20px;
+    padding: 20px;
-  font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
-  height: 100vh;
+    height: 100vh;
 }
 
 a {
-  color: inherit;
+    color: inherit;
-  text-decoration: none;
+    text-decoration: none;
 }
 
 #root {
-  height: 100%;
+    height: 100%;
 }
 
 #topNav {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: center;
+    align-items: center;
-  
+
-  p {
+    p {
-    float: right;
+        float: right;
-  }
+    }
 }
 
 .center {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  height: calc(100% - 40px);
+    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;
+        }
+    }
+}