General UI Improvements (#38)

* GH icon * Add background * Fix viewport warnings * More fontawesome * General improvements to text and visuals * Cleanup and test some layout changes * Improve colors, spacing, messaging, add more icons and some cleanup * Small whoops * Feedback changes * Improve the DFU btn color * Improve serial console color and add auto scroll to bottom * Make console colors less scream-y
portapack-mayhem · Jan 16, 2024 · 2a29585 · 2a29585
1 parent 6353692
commit 2a29585
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 129 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@ducanh2912/next-pwa": "^10.0.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/w3c-web-serial": "^1.0.6",
     "eslint-plugin-tailwindcss": "^3.13.1",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,8 +4,8 @@
 
 :root {
   --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+  --background-start-rgb: 72, 72, 99;
+  --background-end-rgb: 44, 8, 60;
 }
 
 body {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
@@ -10,22 +10,27 @@ export const metadata: Metadata = {
   generator: "Next.js",
   manifest: `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/manifest.json`,
   keywords: ["Portapack", "HackRF", "mayhem", "portapack-mayhem"],
-  themeColor: [{ media: "(prefers-color-scheme: dark)", color: "#3f3f3f" }],
   authors: [
     { name: "Mayhem" },
     {
       name: "Mayhem",
       url: "https://github.com/portapack-mayhem",
     },
   ],
-  viewport:
-    "minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover",
   icons: [
     { rel: "apple-touch-icon", url: "icons/icon-128x128.png" },
     { rel: "icon", url: "icons/icon-128x128.png" },
   ],
 };
 
+export const viewport: Viewport = {
+  themeColor: [{ media: "(prefers-color-scheme: dark)", color: "#3f3f3f" }],
+  minimumScale: 1,
+  initialScale: 1,
+  width: "device-width",
+  viewportFit: "cover",
+};
+
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,7 @@
 "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 { Loader } from "@/components/Loader/Loader";
@@ -15,14 +17,20 @@ const Home = () => {
 
   return (
     <>
+      <header className="w-[100%] bg-gray-700 p-4 text-left text-2xl">
+        Mayhem Hub
+      </header>
       <main className="flex h-full min-h-screen flex-col items-center justify-between p-1">
         <SerialLoader>
           <Controller />
         </SerialLoader>
       </main>
-      <footer className="text-center text-blue-500">
+      <footer className="text-center text-sm text-white">
         <a href="https://github.com/portapack-mayhem/MayhemHub" target="_blank">
-          GitHub Repo
+          <FontAwesomeIcon
+            icon={faGithubAlt}
+            className="mr-2 text-2xl text-white"
+          />
         </a>
       </footer>
     </>