From be0a047d30bc3d12e428cb9fbebfd94b3b66a05b Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 11 Nov 2025 12:01:28 +0000
Subject: [PATCH 1/2] - commiting changes for now will revert back

---
 src/components/UI/Header.tsx | 23 ++++++++++++++++++++---
 src/index.css                |  4 ++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index c093949..3627fdc 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -58,12 +58,29 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
-          <SoundBtn />
-          <Link to={"/session-settings"}>
+          <div className="flex">
+            <SoundBtn />
+          </div>
+
+          <div className="md:hidden">
+            <ul className="flex flex-col">
+              <li>
+                <Link to={"/session-settings"}>
+                  <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+                </Link>
+              </li>
+              <li>
+                <Link to={"/system-settings"}>
+                  <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
 
-          <Link to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
diff --git a/src/index.css b/src/index.css
index 92bfa28..77fced0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,7 +33,7 @@ body {
 }
 
 .arrow-outline path {
-  stroke: black; /* outline color */
-  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke: black;
+  stroke-width: 20px;
   stroke-linejoin: round;
 }
-- 
2.25.1


From b86830a3c31a4605b2806fb799a29ec167f9080b Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 11 Nov 2025 15:44:06 +0000
Subject: [PATCH 2/2] updated styling for small mobile screens

---
 .../Channel1-JSON/ChannelFields.tsx           |  2 +-
 .../SettingForms/NPED/NPEDFields.tsx          |  4 +-
 .../SettingForms/NPED/NPEDHotlist.tsx         |  2 +-
 .../Sound/SoundSettingsFields.tsx             |  2 +-
 .../SettingForms/Sound/SoundUpload.tsx        |  2 +-
 .../System/SystemConfigFields.tsx             |  2 +-
 .../SettingForms/System/SystemFileUpload.tsx  |  2 +-
 .../SettingForms/WiFi&Modem/ModemSettings.tsx |  2 +-
 .../WiFi&Modem/WiFiSettingsForm.tsx           |  2 +-
 src/components/UI/Header.tsx                  | 52 ++++++++++++-------
 10 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
index 36b505f..e837821 100644
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting ? "Saving..." : "Save Changes"}
           </button>
diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx
index 795c074..ee3ff11 100644
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -103,14 +103,14 @@ const NPEDFields = () => {
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             >
               {isSubmitting ? "Logging in..." : "Login"}
             </button>
           ) : (
             <button
               type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
               onClick={handleLogoutClick}
             >
               Logout
diff --git a/src/components/SettingForms/NPED/NPEDHotlist.tsx b/src/components/SettingForms/NPED/NPEDHotlist.tsx
index b33421f..4ae9325 100644
--- a/src/components/SettingForms/NPED/NPEDHotlist.tsx
+++ b/src/components/SettingForms/NPED/NPEDHotlist.tsx
@@ -47,7 +47,7 @@ const NPEDHotlist = () => {
             />
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
               // disabled={errors ? true : false}
             >
               Upload
diff --git a/src/components/SettingForms/Sound/SoundSettingsFields.tsx b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
index c2f1fb1..5e1a79b 100644
--- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx
+++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
@@ -139,7 +139,7 @@ const SoundSettingsFields = () => {
           </div>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             Save Settings
           </button>
diff --git a/src/components/SettingForms/Sound/SoundUpload.tsx b/src/components/SettingForms/Sound/SoundUpload.tsx
index 30a03e6..3cd0e6e 100644
--- a/src/components/SettingForms/Sound/SoundUpload.tsx
+++ b/src/components/SettingForms/Sound/SoundUpload.tsx
@@ -96,7 +96,7 @@ const SoundUpload = () => {
           {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload
diff --git a/src/components/SettingForms/System/SystemConfigFields.tsx b/src/components/SettingForms/System/SystemConfigFields.tsx
index 7d8951f..cb40d86 100644
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -157,7 +157,7 @@ const SystemConfigFields = () => {
           </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
diff --git a/src/components/SettingForms/System/SystemFileUpload.tsx b/src/components/SettingForms/System/SystemFileUpload.tsx
index 32fd544..cb7f00b 100644
--- a/src/components/SettingForms/System/SystemFileUpload.tsx
+++ b/src/components/SettingForms/System/SystemFileUpload.tsx
@@ -52,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       </FormGroup>
       <button
         type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={!selectedFile}
         onClick={handleFileUploadClick}
       >
diff --git a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
index 56cc831..73a8748 100644
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
@@ -125,7 +125,7 @@ const ModemSettings = () => {
             )}
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>
diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
index aa2aa71..2443b2b 100644
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
@@ -90,7 +90,7 @@ const WiFiSettingsForm = () => {
           </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
           </button>
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 3627fdc..7d0f34a 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -1,15 +1,26 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faGear,
+  faHome,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { state } = useIntegrationsContext();
 
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
   const sessionStarted = state.sessionStarted;
 
   const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-        <div className="flex flex-row lg:flex-row space-x-2">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-auto  p-2 md:p-0 items-center">
           {sessionStarted && sessionPaused ? (
             <p className="text-gray-400 font-bold">Session Paused</p>
           ) : (
@@ -44,7 +55,7 @@ export default function Header() {
           )}
         </div>
 
-        <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
           <Link to={"/"}>
             <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
           </Link>
@@ -58,24 +69,11 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
-          <div className="flex">
-            <SoundBtn />
+          <SoundBtn />
+          <div className="md:hidden">
+            <FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
           </div>
 
-          <div className="md:hidden">
-            <ul className="flex flex-col">
-              <li>
-                <Link to={"/session-settings"}>
-                  <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
-                </Link>
-              </li>
-              <li>
-                <Link to={"/system-settings"}>
-                  <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
-                </Link>
-              </li>
-            </ul>
-          </div>
           <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
@@ -85,6 +83,22 @@ export default function Header() {
           </Link>
         </div>
       </div>
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <ul className="flex flex-row gap-5">
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/session-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+              </Link>
+            </li>
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/system-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      )}
     </div>
   );
 }
-- 
2.25.1