From cd46caf94a0851167fcbeee44cd1894257c68cd2 Mon Sep 17 00:00:00 2001 From: Keyemail Date: Tue, 13 Aug 2024 22:34:06 -0700 Subject: [PATCH] Tweaked minor things, Started on Wireless Settings --- src/Index.tsx | 27 ++++++-- src/components/Navbar.tsx | 10 +-- src/pages/DeviceList.tsx | 2 +- src/pages/ExtendWirelessNetwork.tsx | 8 +-- src/pages/WirelessSettings.tsx | 80 ++++++++++++++++++++++- src/styles/DeviceList.css | 98 ++++++++++++---------------- src/styles/ExtendWirelessNetwork.css | 57 +++++++--------- src/styles/Main.css | 74 ++++++++++++--------- src/styles/WirelessSettings.css | 89 +++++++++++++++++++++++++ 9 files changed, 307 insertions(+), 138 deletions(-) diff --git a/src/Index.tsx b/src/Index.tsx index 03a8b5d..d1e170e 100644 --- a/src/Index.tsx +++ b/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 SystemSettings from "./pages/WirelessSettings"; +import WirelessSettings 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 ( <> - + } /> - } /> + + } + /> } />

Wifi Extender Hub

-

{ LoggedUser }

+

{loggedUser}

- ) + ); } -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/src/pages/DeviceList.tsx b/src/pages/DeviceList.tsx index 7fe3067..cde2417 100644 --- a/src/pages/DeviceList.tsx +++ b/src/pages/DeviceList.tsx @@ -22,7 +22,7 @@ function DeviceList({ deviceNames, deviceIPs, setDevice, setDeviceIP }: Props) { }; return ( -
+

Device list

{deviceNames.length === 0 &&

No devices are connected.

}
    diff --git a/src/pages/ExtendWirelessNetwork.tsx b/src/pages/ExtendWirelessNetwork.tsx index ad3e52b..90c533b 100644 --- a/src/pages/ExtendWirelessNetwork.tsx +++ b/src/pages/ExtendWirelessNetwork.tsx @@ -3,7 +3,7 @@ import "../styles/ExtendWirelessNetwork.css"; interface Props { selectedModeButton: number; - setSelecModeButton: Dispatch>; + setSelectModeButton: Dispatch>; extendedMode: boolean; setExtendedMode: Dispatch>; 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 ( -
    +

    Extend Network

    {buttons.map((button, index) => ( + ))} +
    + +
    + {selectedButton === 0 ? ( + <> +

    5GHz Settings

    +
    +

    Wireless Name

    + +

    Wireless Password

    + +
    + + + ) : ( + <> +

    2.4GHz Settings

    +
    +

    Wireless Name

    + +

    Wireless Password

    + +
    + + + )} +
    +
    + ); +} + +export default WirelessSettings; diff --git a/src/styles/DeviceList.css b/src/styles/DeviceList.css index 40d7915..8d62fd3 100644 --- a/src/styles/DeviceList.css +++ b/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; - 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; + list-style: none; + display: flex; 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; - } -} \ No newline at end of file + 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; + 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; + } +} diff --git a/src/styles/ExtendWirelessNetwork.css b/src/styles/ExtendWirelessNetwork.css index 3e896b2..ddef952 100644 --- a/src/styles/ExtendWirelessNetwork.css +++ b/src/styles/ExtendWirelessNetwork.css @@ -1,15 +1,4 @@ -#extendNetwork { - 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; - } +.panel { button { background-color: #071436; color: white; @@ -47,39 +36,39 @@ margin-top: 20px; li { - display: inherit; - background-color: #071436; - padding: 30px 20px; - border-radius: 20px; - justify-content: space-between; - align-items: center; + 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; + font-size: 1.8rem; + width: fit-content; } p { - font-size: 1.3rem; - width: fit-content; + font-size: 1.3rem; + width: fit-content; } div { - display: inherit; - flex-direction: column; - text-align: center; - margin: 0 20px; - position: relative; - width: 100%; + display: inherit; + flex-direction: column; + text-align: center; + margin: 0 20px; + position: relative; + width: 100%; } img { - max-width: 100px; + max-width: 100px; } .link { - max-width: 50px; - cursor: pointer; - color: #fff; - transition: 0.3s color; + max-width: 50px; + cursor: pointer; + color: #fff; + transition: 0.3s color; } .link:hover { - color: #0069ff; + color: #0069ff; } } diff --git a/src/styles/Main.css b/src/styles/Main.css index ce7372e..f3ae01c 100644 --- a/src/styles/Main.css +++ b/src/styles/Main.css @@ -1,55 +1,69 @@ @font-face { - font-family: Poppins; - src: url(../fonts/Poppins/Poppins-Bold.ttf); - font-weight: bold; + font-family: Poppins; + src: url(../fonts/Poppins/Poppins-Bold.ttf); + font-weight: bold; } @font-face { - font-family: Poppins; - src: url(../fonts/Poppins/Poppins-Regular.ttf); - font-weight: normal; + font-family: Poppins; + src: url(../fonts/Poppins/Poppins-Regular.ttf); + font-weight: normal; } :root { - --bg-color-alt: #071e42; + --bg-color-alt: #071e42; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - background-color: #071935; - color: #fff; - padding: 20px; - font-family: 'Poppins', sans-serif; - height: 100vh; + background-color: #071935; + color: #fff; + padding: 20px; + font-family: "Poppins", sans-serif; + height: 100vh; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } #root { - height: 100%; + height: 100%; } #topNav { - display: flex; - justify-content: space-between; - align-items: center; - - p { - float: right; - } + display: flex; + justify-content: space-between; + align-items: center; + + p { + float: right; + } } .center { - display: flex; - align-items: center; - justify-content: center; - height: calc(100% - 40px); -} \ No newline at end of file + display: flex; + align-items: center; + 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; + } +} diff --git a/src/styles/WirelessSettings.css b/src/styles/WirelessSettings.css index e69de29..3cadc47 100644 --- a/src/styles/WirelessSettings.css +++ b/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; + } + } +}