From 2a2958591559d6ed3932271a7b997e317e16d0c5 Mon Sep 17 00:00:00 2001 From: pedrocx486 Date: Tue, 16 Jan 2024 14:54:59 -0300 Subject: [PATCH] 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 --- package-lock.json | 13 + package.json | 1 + src/app/globals.css | 4 +- src/app/layout.tsx | 13 +- src/app/page.tsx | 12 +- src/components/Controller/Controller.tsx | 265 ++++++++++--------- src/components/FileBrowser/FileBrowser.tsx | 2 +- src/components/Modal/Modal.tsx | 9 +- src/components/ToggleSwitch/ToggleSwitch.tsx | 2 +- 9 files changed, 192 insertions(+), 129 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5fef651..9b5bad9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@ducanh2912/next-pwa": "^10.0.2", "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@types/w3c-web-serial": "^1.0.6", @@ -1924,6 +1925,18 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz", + "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/free-solid-svg-icons": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", diff --git a/package.json b/package.json index 21aadfc..1fb1958 100644 --- 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 index e76e819..49616bc 100644 --- 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 index 1fddbbe..3e35aac 100644 --- 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,7 +10,6 @@ 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" }, { @@ -18,14 +17,20 @@ export const metadata: Metadata = { 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 ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 6fe5fb1..abbc33c 100644 --- 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 ( <> +
+ Mayhem Hub +
-