More DaisyUI and other improvements (#46)

* Add idea for build id/version

* Add a proper footer

* Move more things to daisyUI and make terminal look like an actual terminal

* Remove conflicting classes

* Temporary fix where mobile layout would get garbled

* Improve this screen a bit

* Change extension and remove copypasta mistake

next.config.js

@@ -8,6 +8,9 @@ const nextConfig = {
   compiler: {
     removeConsole: process.env.NODE_ENV !== "development", // Remove console.log in production
   },
+  env: {
+    BUILD_ID: new Date().toISOString(), // Later it would be worth setting up the git's commit hash as the build id
+  },
 };
 
 // Configuration object tells the next-pwa plugin

src/app/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { faGithubAlt } from "@fortawesome/free-brands-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";
 import { Loader } from "@/components/Loader/Loader";
 import { NavBar } from "@/components/NavBar/NavBar";
 
@@ -26,15 +25,7 @@ const Home = () => {
           <Controller />
         </SerialLoader>
       </main>
-      <footer className="text-center text-sm text-white">
-        <p className="pb-1">Mayhem Hub - {new Date().getFullYear()}</p>
-        <a href="https://github.com/portapack-mayhem/MayhemHub" target="_blank">
-          <FontAwesomeIcon
-            icon={faGithubAlt}
-            className="mr-2 max-w-6 text-2xl text-white"
-          />
-        </a>
-      </footer>
+      <Footer />
     </>
   );
 };

src/components/Controller/Controller.tsx

@@ -9,7 +9,8 @@ import {
   faArrowLeft,
   faArrowRight,
   faCheckCircle,
-  faCircle,
+  faPaperPlane,
+  faCircleXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
@@ -378,49 +379,49 @@ const Controller = () => {
                     label={<FontAwesomeIcon icon={faArrowLeft} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => write("button 2", autoUpdateFrame)}
-                    className="h-16 w-16 bg-green-500"
+                    className="btn btn-success h-16 w-16"
                     shortcutKeys={"ArrowLeft"}
                   />
                   <button
                     disabled={disableTransmitAction}
                     onClick={() => write("button 7", autoUpdateFrame)}
-                    className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+                    className="btn btn-info h-12 w-12 self-end justify-self-start"
                   >
                     <FontAwesomeIcon icon={faRotateLeft} />
                   </button>
                   <HotkeyButton
                     label={<FontAwesomeIcon icon={faArrowUp} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => write("button 4", autoUpdateFrame)}
-                    className="h-16 w-16 bg-green-500"
+                    className="btn btn-success h-16 w-16"
                     shortcutKeys={"ArrowUp"}
                   />
                   <HotkeyButton
                     label={<FontAwesomeIcon icon={faCheckCircle} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => write("button 5", autoUpdateFrame)}
-                    className="h-16 w-16 bg-blue-500"
+                    className="btn btn-info h-16 w-16"
                     shortcutKeys={"Enter"}
                   />
                   <HotkeyButton
                     label={<FontAwesomeIcon icon={faArrowDown} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => write("button 3", autoUpdateFrame)}
-                    className="h-16 w-16 bg-green-500"
+                    className="btn btn-success h-16 w-16"
                     shortcutKeys={"ArrowDown"}
                   />
                   <div></div>
                   <HotkeyButton
                     label={<FontAwesomeIcon icon={faArrowRight} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => write("button 1", autoUpdateFrame)}
-                    className="h-16 w-16 bg-green-500"
+                    className="btn btn-success h-16 w-16"
                     shortcutKeys={"ArrowRight"}
                   />
                   <button
                     disabled={disableTransmitAction}
                     onClick={() => write("button 8", autoUpdateFrame)}
-                    className="h-12 w-12 self-end justify-self-end rounded bg-blue-400 text-white disabled:opacity-50"
+                    className="btn btn-info h-12 w-12 self-end justify-self-end"
                   >
                     <FontAwesomeIcon icon={faRotateRight} />
                   </button>
@@ -431,13 +432,13 @@ const Controller = () => {
                   label="DFU"
                   disabled={disableTransmitAction}
                   onClickFunction={() => write("button 6", autoUpdateFrame)}
-                  className="h-16 w-20 bg-yellow-500"
+                  className="btn btn-warning h-16 w-20"
                   shortcutKeys={"mod+D"}
                 />
                 <button
                   disabled={disableTransmitAction}
                   onClick={() => write("reboot", autoUpdateFrame)}
-                  className="h-16 w-20 rounded bg-red-600 text-white disabled:opacity-50"
+                  className="btn btn-error h-16 w-20"
                 >
                   REBOOT
                 </button>
@@ -493,6 +494,12 @@ const Controller = () => {
                   </div>
                 </div>
                 <div className="flex w-full flex-col items-center justify-center gap-1">
+                  <textarea
+                    className="h-[350px] w-full rounded bg-gray-600 p-2 text-white"
+                    readOnly
+                    value={consoleMessageList}
+                    id="serial_console"
+                  />
                   <div className="flex w-full flex-row items-center justify-center gap-1">
                     <input
                       type="text"
@@ -508,29 +515,23 @@ const Controller = () => {
                     />
                     <button
                       type="submit"
-                      className="rounded-md bg-green-500 p-2 text-white"
+                      className="btn btn-success btn-sm h-10 text-white"
                       onClick={() => {
                         sendCommand();
                       }}
                     >
-                      Send
+                      <FontAwesomeIcon icon={faPaperPlane} />
                     </button>
                     <button
                       type="submit"
-                      className="rounded-md bg-red-500 p-2 text-white"
+                      className="btn btn-error btn-sm h-10 text-white"
                       onClick={() => {
                         setConsoleMessageList("");
                       }}
                     >
-                      Clear
+                      <FontAwesomeIcon icon={faCircleXmark} />
                     </button>
                   </div>
-                  <textarea
-                    className="h-[350px] w-full rounded bg-gray-600 p-2 text-white"
-                    readOnly
-                    value={consoleMessageList}
-                    id="serial_console"
-                  />
                 </div>
               </div>
               <div className="m-5 flex w-[20%] flex-col items-center justify-center rounded-md bg-gray-700 p-5">
@@ -539,7 +540,7 @@ const Controller = () => {
                 </p>
                 <button
                   onClick={() => setFirmwarModalOpen(true)}
-                  className="rounded bg-blue-400 p-2 text-sm text-white disabled:opacity-50"
+                  className="btn btn-info"
                 >
                   Manage Firmware
                 </button>

src/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { faGithubAlt } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const Footer = () => {
+  return (
+    <footer className="footer items-center bg-neutral p-4 text-neutral-content">
+      <aside className="grid-flow-row items-center">
+        <p>Mayhem Hub - {new Date().getFullYear()}</p>
+        <small>Version: {process.env.BUILD_ID}</small>
+      </aside>
+      <nav className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+        <a href="https://github.com/portapack-mayhem/MayhemHub" target="_blank">
+          <FontAwesomeIcon
+            icon={faGithubAlt}
+            className="mr-2 max-w-6 text-2xl text-white"
+          />
+        </a>
+      </nav>
+    </footer>
+  );
+};

src/components/HotkeyButton/HotkeyButton.tsx

@@ -45,7 +45,7 @@ const HotkeyButton = ({
         <button
           disabled={disabled}
           onClick={() => onClickFunction()}
-          className={`rounded text-white disabled:opacity-50 ${className}`}
+          className={`${className}`}
         >
           {label}
         </button>

src/components/NavBar/NavBar.tsx

@@ -4,7 +4,7 @@ export const NavBar = () => {
       <div className="flex-1">
         <a className="btn btn-ghost text-xl">Mayhem Hub</a>
       </div>
-      <div className="flex-none">
+      <div className="hidden flex-none sm:block">
         <ul className="menu menu-horizontal px-1">
           <li>
             <a href="https://wiki.hackrf.app" target="_blank">

src/components/SerialLoader/SerialLoader.tsx

@@ -64,23 +64,21 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
   const errorMessage = () => (
     <div className="absolute inset-0 flex h-full min-h-screen w-full flex-1 flex-col items-center justify-center text-black">
       <div className="flex w-full max-w-lg flex-col rounded-xl bg-white p-6">
-        <h1 className="-mt-1 mb-2 text-xl font-medium">Error</h1>
+        <h1 className="-mt-1 mb-2 text-xl font-medium">😔 Uh oh... </h1>
         <p className="mb-1">
           Looks like your browser doesn&apos;t support the{" "}
           <a
-            className="hocus:underline text-green-900"
+            className="text-green-800 focus:underline"
             href="https://caniuse.com/web-serial"
             target="_blank"
             rel="noopener noreferrer"
           >
             Web Serial API
           </a>
-          😔
-        </p>
-        <p>
-          Please try switching to a supported browser (e.g., Chrome, Edge,
-          Opera...).
+          .
         </p>
+        <p>Please try switching to a supported browser.</p>
+        <p>(e.g.: Chrome, Edge, Opera...)</p>
       </div>
     </div>
   );
@@ -95,7 +93,7 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
         </p>
 
         <button
-          className="rounded-xl bg-green-800 p-5 pb-6 text-3xl text-white ring-0 ring-green-800/50 transition-all focus:bg-green-900 focus:outline-none focus:ring-8 disabled:cursor-not-allowed disabled:text-gray-500"
+          className="btn btn-success btn-lg"
           ref={pairButtonRef}
           disabled={
             serial.portState === "opening" || serial.portState === "closing"
@@ -115,7 +113,7 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
   // If autoconnect fails, then show manual connect button
   let buttonText = "";
   if (serial.portState === "closed") {
-    buttonText = "Connect device";
+    buttonText = "Connect Device";
   } else if (serial.portState === "opening") {
     buttonText = "Connecting...";
   } else if (serial.portState === "closing") {