Homepage Improvements + more (#51)

* Rip some trash from the navbar and make it more responsive * Make this homepage less aggressive to the eyes * Improve the mac warning a fair bit * Center this and add some padding * Apply changes from feedback * Some small improvements
portapack-mayhem · Feb 4, 2024 · 7cb5933 · 7cb5933
1 parent d4ffc38
commit 7cb5933
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 64 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dynamic from "next/dynamic";
 import Controller from "@/components/Controller/Controller";
 import { Footer } from "@/components/Footer/Footer";
@@ -35,19 +37,24 @@ const Home = () => {
         <main className="flex min-h-0 grow flex-col items-center justify-between p-1">
           <SerialLoader>
             {isMac() && (
-              <p>
-                Looks like you are using a Mac. If you come across any issues,
-                please let us know{" "}
-                <a
-                  className="text-blue-400 underline"
-                  href="https://github.com/portapack-mayhem/MayhemHub/issues/43"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  here
-                </a>
-                .
-              </p>
+              <div role="alert" className="alert m-5 mb-0 w-[50%]">
+                <FontAwesomeIcon icon={faTriangleExclamation} />
+                <span>
+                  <p>
+                    Looks like you are using a Mac! If you come across any
+                    issues, please let us know{" "}
+                    <a
+                      className="text-blue-400 underline"
+                      href="https://github.com/portapack-mayhem/MayhemHub/issues/43"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      here
+                    </a>
+                    .
+                  </p>
+                </span>
+              </div>
             )}
             <Controller />
           </SerialLoader>

diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx
@@ -84,7 +84,7 @@ const Controller = () => {
           const mayhemVersion = matches[1];
           setDeviceVersion(mayhemVersion);
         } else {
-          console.log("Mayhem Version not found");
+          console.log("Mayhem version not found!");
         }
 
         await fetchFolderStructure();
@@ -345,7 +345,7 @@ const Controller = () => {
                         write("screenframeshort", false);
                       }
                     }}
-                    className="h-6 w-6 bg-blue-500"
+                    className={"h-6 w-6 rounded-sm bg-green-500"}
                     shortcutKeys={"mod+R"}
                   />
                 </div>

diff --git a/src/components/HotkeyButton/HotkeyButton.tsx b/src/components/HotkeyButton/HotkeyButton.tsx
@@ -32,7 +32,7 @@ const HotkeyButton = ({
 }: IHotkeyButton) => {
   useHotkeys(
     shortcutKeys,
-    (e) => {
+    () => {
       if (disabled) return;
       onClickFunction();
     },
@@ -45,7 +45,7 @@ const HotkeyButton = ({
         <button
           disabled={disabled}
           onClick={() => onClickFunction()}
-          className={`${className}`}
+          className={`${className} disabled:bg-slate-500`}
         >
           {label}
         </button>

diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
@@ -18,9 +18,7 @@
 }
 
 .nav > .nav-links {
-  display: inline;
-  float: right;
-  font-size: 18px;
+  height: -webkit-fill-available;
 }
 
 .nav > .nav-links > a {
@@ -65,7 +63,6 @@
     display: block;
     width: 100%;
     height: 0px;
-    transition: all 0.3s ease-in;
     overflow-y: hidden;
     top: 63px;
     left: 0px;
@@ -78,7 +75,7 @@
     height: 0px;
   }
   .nav > #nav-check:checked ~ .nav-links {
-    height: calc(50vh - 63px);
+    height: fit-content;
     overflow-y: auto;
   }
 }
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -17,7 +17,7 @@ export const NavBar = () => {
         </label>
       </div>
 
-      <div className="nav-links bg-neutral text-neutral-content">
+      <div className="nav-links float-end flex bg-neutral text-lg text-neutral-content">
         <a href="https://discord.hackrf.app" target="_blank" className="p-4">
           Discord
         </a>

diff --git a/src/components/SerialLoader/SerialLoader.tsx b/src/components/SerialLoader/SerialLoader.tsx
@@ -84,7 +84,7 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
   );
 
   const ConnectScreen = () => (
-    <div className="flex flex-1 flex-col items-center justify-center text-black">
+    <div className="flex flex-1 flex-col items-center justify-center px-5 text-center text-neutral">
       <div className="flex w-full max-w-4xl flex-col rounded-3xl bg-white p-10">
         {/* <h1 className="mb-5 text-4xl font-semibold">Get Started</h1> */}
 
@@ -107,56 +107,55 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
   );
 
   const TitleMessage = () => (
-    <div className="mt-7 flex w-[80%] flex-col justify-center rounded-md bg-gray-700 p-5">
+    <div className="mt-7 flex flex-col justify-center rounded-md bg-neutral p-5">
       <h1 className="text-center text-2xl font-semibold">
         Welcome to the Mayhem Hub!
         <br />
         <span className="text-center text-xl font-normal italic opacity-70">
-          Your one-stop destination for everything related to Mayhem
-          HackRF/Portapack.
+          Your one-stop-shop for everything related to Mayhem HackRF/Portapack.
         </span>
       </h1>
     </div>
   );
 
   const AboutMessage = () => (
-    <div className="flex w-[80%] flex-col justify-center gap-5 rounded-md bg-gray-700 p-5">
-      <p>
-        This site is devoted to enabling you to control your HackRF/Portapack
-        remotely using your computer, streamlining your experience, and
-        amplifying the functionality of your device.
-      </p>
-
-      <p>
-        Our site is designed to provide you with a simple, convenient way to
-        manage your HackRF/Portapack device. Through Mayhem Hub, you have an
-        entire suite of features at your fingertips, allowing you to take full
-        control of your device via your computer.
-      </p>
-
-      <p>
-        <b>One Click Firmware Upgrades:</b> No longer do you need to wade
-        through complicated procedures to update your device. With a single
-        click, we will manage all the hard stuff, leaving you to enjoy the new
-        features and improved performance.
-      </p>
-
-      <p>
-        <b>Remote File Upload and Download:</b> You can upload or download files
-        to and from your HackRF/Portapack device, without needing to remove your
-        Micro SD card or putting your HackRF into mass storage mode.
-      </p>
-
-      <p>
-        <b>Live Streaming the Screen:</b> View your HackRF/Portapack screen in
-        real-time. With the live streaming feature, you can monitor your devices
-        screen remotely.
-      </p>
-
-      <p>
-        And these are just the tip of the iceberg! Mayhem Hub is continuously
-        expanding its array of utilities and features!
-      </p>
+    <div className="collapse collapse-arrow max-w-[80%] bg-neutral">
+      <input type="checkbox" />
+      <div className="collapse-title text-xl font-medium">
+        What is the Mayhem Hub?
+      </div>
+      <div className="collapse-content flex flex-col gap-5">
+        <p>
+          This app is devoted to enabling you to control your HackRF/Portapack
+          remotely using your computer, streamlining your experience, and
+          amplifying the functionality of your device, plus a few extras...
+        </p>
+
+        <p>
+          <b>One Click Firmware Upgrades:</b> No longer do you need to wade
+          through complicated procedures to update your device. With a single
+          click, we will manage all the hard stuff, leaving you to enjoy the new
+          features and improved performance.
+        </p>
+
+        <p>
+          <b>Remote File Upload and Download:</b> You can upload or download
+          files to and from your HackRF/Portapack device, without needing to
+          remove your Micro SD card or putting your HackRF into mass storage
+          mode.
+        </p>
+
+        <p>
+          <b>Live Streaming the Screen:</b> View your HackRF/Portapack screen in
+          real-time. With the live streaming feature, you can monitor your
+          devices screen remotely.
+        </p>
+
+        <p>
+          And these are just the tip of the iceberg! Mayhem Hub is continuously
+          expanding its array of utilities and features!
+        </p>
+      </div>
     </div>
   );