Theme and UI Improvements (#86)

* Theme and UI Improvements

This PR updates the application's UI color scheme and background styling to improve visual consistency and create a more modern, polished look. Key changes include:

Replaced hard-coded color values with rgba() values for better opacity control and consistent transparency effects
Updated background patterns and gradients for a more subtle, professional appearance
Standardized background colors across components using a new rgba(23,35,52,0.45) base color
Enhanced hover and glow effects for interactive elements
Improved modal styling with softer borders and shadows
Updated component backgrounds (Console, Controller, SerialLoader) to match the new color scheme
Optimized background layering and z-index handling
Fixed ESLint dependency warnings in useEffect

The changes maintain the dark theme while providing better visual hierarchy and a more cohesive look across the application. All components have been tested for proper rendering and interaction.

* Variables added  instead of in-line

# UI Theme and Code Quality Improvements

## Changes Made
- Moved all inline rgba/hex colors to Tailwind theme variables for better maintainability
- Created new color variables in tailwind.config.ts:
  - component-bg: rgba(23, 35, 52, 0.45)
  - modal-bg: rgba(23, 35, 52, 0.45)
  - modal-border: rgb(17, 24, 39)
  - overlay: rgba(0, 0, 0, 0.5)
- Replaced inline colors with theme variables across components:
  - Console.tsx: Replaced bg-[rgba(23,35,52,0.45)] with bg-component-bg
  - Controller.tsx: Standardized all component backgrounds
  - Modal.tsx: Updated borders and background styling
  - SerialLoader.tsx: Consistent theme application
- Fixed ESLint dependency warnings in useEffect hooks
- Standardized fraction widths (w-[80%] to w-4/5)
- Added rounded-md for consistent border radius
- Improved button hover states
- Removed duplicate className props
- Added proper export defaults where missing

## Code Quality
- Removed eslint-disable comments
- Cleaned up code comments
- Improved type safety
- Better component organization

## Visual Consistency
- All overlaid components now use the same background opacity
- Consistent border and shadow styling
- Uniform component spacing
- Standardized rounding on corners

This PR aims to improve maintainability and establish a consistent visual language throughout the application while following Tailwind best practices.

* Update SerialLoader.tsx

Found another element needing to match theme in ErrorMessage.

* Update Modal.tsx

Forgot this file 🫣

* Further UI improvements

# Unified Component Styling & Visual Improvements

This PR implements a consistent styling system across the application's components, focusing on transparency, blur effects, and interactive elements.

## Changes

### Global Styling
- Consolidated background styles into two main classes: `bg-component` and `bg-alert`
- Standardized blur effects and transparency levels
- Added consistent hover state transitions

### Component Updates
- Modal: Updated to use unified background styling with blur effects
- Console: Improved readability with standardized transparency
- Controller Section: Refined background opacity and blur
- Device Buttons: Updated to match the new design system
  - Replaced specific color classes with unified component styling
  - Added smooth hover transitions
  - Improved visual consistency across all control buttons

### Visual Improvements
- Live Screen controls now have better visual hierarchy
- Improved contrast and readability across all interactive elements
- Standardized blur effects (5px) for consistent depth perception
- Added subtle hover animations for better user feedback

## Technical Details
- Removed redundant background classes
- Added `-webkit-backdrop-filter` for better browser compatibility
- Consolidated similar styles to reduce CSS repetition
- Maintained accessibility with appropriate contrast ratios

## Testing
Please verify:
- Modal transparency and blur effects
- Button hover states and transitions
- Console readability
- Overall visual consistency

These changes improve the UI's cohesiveness while maintaining functionality and usability.

* Update Modal.tsx

* Update SerialLoader.tsx

Matching theme here.

* UI Improvements

# UI Improvements for Better User Experience

This PR includes several UI improvements to enhance the user experience:

## 1. Fixed Button Background Issues
- Removed the background color from the container holding the DFU and REBOOT buttons
  - This resolves an issue where those buttons weren't properly displaying their disabled state
  - The buttons now visually match the rest of the control buttons when disabled

## 2. Enhanced Command Input Field Visibility
- Added a subtle glow effect to the command input field to draw user attention
- The input now features:
  - A constant soft white glow around the edges
  - Enhanced glow effect when focused
  - Smooth transition animation between states
  - Removed default outline for a cleaner look

These changes improve both the functional consistency and visual hierarchy of the interface, making it more intuitive for users to interact with the application.

* Made the background less distracting

* Add glow to modals

Now modals stand out better in dark mode

* Intensify modal glow on drag

---------

Co-authored-by: jLynx <admin@jlynx.net>

Author: RocketGod-git

src/app/globals.css

@@ -5,16 +5,64 @@
 :root {
   color-scheme: dark;
   --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 72, 72, 99;
-  --background-end-rgb: 44, 8, 60;
+  --background-primary: #0a0b11;
+  --background-secondary: #12141c;
+  --background-pattern: #181b26;
+  --accent-color: #1d4ed8;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: var(--background-primary);
+
+  background-image:
+    radial-gradient(circle at 25% 25%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.15) 0%, transparent 50%);
+
+  margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg,
+      rgba(10, 11, 17, 0.8) 0%,
+      rgba(18, 20, 28, 0.2) 50%,
+      rgba(10, 11, 17, 0.8) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+body>div {
+  position: relative;
+  z-index: 2;
+}
+
+.bg-component {
+  background-color: rgb(23, 35, 52) !important;
+}
+
+.bg-alert {
+  background-color: rgba(23, 35, 52, 0.50) !important;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.hover\:glow-sm:hover {
+  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
+}
+
+.modal-glow {
+  box-shadow: 0 0 20px rgba(100, 116, 248, 0.4), 0 0 40px rgba(59, 130, 246, 0.2);
+  transition: box-shadow 0.3s ease;
+}
+
+.modal-glow-dragging {
+  box-shadow: 0 0 30px rgba(129, 140, 248, 0.7), 0 0 60px rgba(59, 130, 246, 0.4);
 }

src/components/Console/Console.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import {
   faPaperPlane,
   faCircleXmark,
   faCode,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 
 interface IConsole {
   consoleMessageList: string;
@@ -29,14 +32,14 @@ export const Console: React.FC<IConsole> = ({
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-1">
       <textarea
-        className="h-full w-full rounded bg-gray-600 p-2 font-mono text-white"
+        className="h-full w-full rounded-md bg-component p-2 font-mono text-white"
         readOnly
         value={consoleMessageList}
         id="serial_console"
       />
       {scriptRunning && (
         <div className="flex w-full flex-row items-center justify-center gap-1">
-          <p className="w-full rounded-md bg-blue-700 p-2 font-mono text-white">
+          <p className="w-full rounded-md bg-component p-2 font-mono text-white">
             {scriptStatus}
           </p>
         </div>
@@ -53,7 +56,7 @@ export const Console: React.FC<IConsole> = ({
             }
           }}
           placeholder="Enter command"
-          className="w-full rounded-md bg-gray-600 p-2 font-mono text-white"
+          className="w-full rounded-md bg-component p-2 font-mono text-white shadow-[0_0_10px_rgba(255,255,255,0.3)] focus:shadow-[0_0_15px_rgba(255,255,255,0.5)] outline-none transition-shadow duration-300"
         />
         <button
           type="submit"
@@ -86,3 +89,5 @@ export const Console: React.FC<IConsole> = ({
     </div>
   );
 };
+
+export default Console;

src/components/Controller/Controller.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+// ToDo: Auto connect when its connected (But have a select toggle to be able to turn this off)
+// Can identify the vendor and product IDs by plugging in the device and visiting: chrome://device-log/
+// the IDs will be labeled `vid` and `pid`, respectively
+
 import {
   faRotate,
   faCheckCircle,
@@ -92,7 +96,8 @@ const Controller = () => {
       const arrayBuffer = reader.result;
       if (arrayBuffer instanceof ArrayBuffer) {
         let bytes = new Uint8Array(arrayBuffer);
-        await uploadFile(path + file.name, bytes, setUpdateStatus); // ToDo: This should possibly be some sort of callback
+        // ToDo: This should possibly be some sort of callback
+        await uploadFile(path + file.name, bytes, setUpdateStatus);
       }
     };
 
@@ -119,7 +124,7 @@ const Controller = () => {
       const arrayBuffer = reader.result;
       if (arrayBuffer instanceof ArrayBuffer) {
         let bytes = new Uint8Array(arrayBuffer);
-        await uploadFile(path + file.name, bytes, setUpdateStatus); // ToDo: This should possibly be some sort of callback
+        await uploadFile(path + file.name, bytes, setUpdateStatus);
         await write(`flash ${path + file.name}`, false, true);
         console.log("DONE! firmware complete. Rebooting...");
         alert(
@@ -151,12 +156,12 @@ const Controller = () => {
       setUpdateStatus
     );
 
-    await write(`mkdir /APPS`, false, true); // not necessary after #2155 in main repo. (but not harmful)
+    // not necessary after #2155 in main repo. (but not harmful)
+    await write(`mkdir /APPS`, false, true);
     await write(`flash /FIRMWARE/${fileBlob.filename}`, false, true);
     console.log("DONE! firmware complete. Rebooting...");
     alert("Firmware update complete! Please wait for your device to reboot.");
   };
-
   const flashLatestStableFirmware = async () => {
     const fileBlob = await downloadFileFromUrl(
       "https://hackrf.app/api/fetch_stable_firmware"
@@ -203,16 +208,17 @@ const Controller = () => {
       setScriptRunning(true);
       const content = reader.result;
       if (typeof content === "string") {
-        const lines = content.split(/\r?\n/); // split lines
+        const lines = content.split(/\r?\n/);
 
         for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
-          await new Promise((resolve) => setTimeout(resolve, 1000)); // the await for write func seems is still too fast. TODO
+          // the await for write func seems is still too fast. TODO
+          await new Promise((resolve) => setTimeout(resolve, 1000));
           const line = lines[lineNumber];
           const trimmedLine = line.trim();
           if (trimmedLine.startsWith("--") || trimmedLine === "") {
             continue;
           }
-          const writeMatch = trimmedLine.match(/^write\((.*)\);?$/); // match write command
+          const writeMatch = trimmedLine.match(/^write\((.*)\);?$/);
           if (writeMatch) {
             const argsString = writeMatch[1];
             const argsRegex =
@@ -222,8 +228,8 @@ const Controller = () => {
             const argsMatch = argsString.match(argsRegex);
             if (argsMatch) {
               const command = argsMatch[1];
-              const updateFrame = argsMatch[2] === "true"; //cast to bool
-              const awaitResponse = argsMatch[3] === "true"; // cast to bool
+              const updateFrame = argsMatch[2] === "true";
+              const awaitResponse = argsMatch[3] === "true";
 
               setScriptStatus(`sending: ${command}`);
               await write(command, updateFrame, awaitResponse);
@@ -284,7 +290,7 @@ const Controller = () => {
   return (
     <>
       {setupComplete ? (
-        <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="flex size-full flex-col items-center justify-center">
           <h1 className="m-6 p-2">
             HackRF Connected
             <FontAwesomeIcon
@@ -297,7 +303,7 @@ const Controller = () => {
           {(!UIConfig.screenHide || !UIConfig.controlButtonsHide) && (
             <div
               id="ControllerSection"
-              className="flex h-full max-w-[80%] flex-col items-center justify-center gap-24 rounded-lg bg-slate-800 p-10 outline-none focus:ring-0 md:flex-row md:items-start"
+              className="bg-component flex h-full max-w-[80%] flex-col items-center justify-center gap-24 rounded-lg p-10 outline-none focus:ring-0 md:flex-row md:items-start"
               onWheel={handleScroll}
               tabIndex={0}
               onKeyDown={(e) => {
@@ -316,8 +322,8 @@ const Controller = () => {
                     write={write}
                   />
 
-                  <div className="flex flex-col items-center justify-center rounded-md bg-gray-700 p-3">
-                    <p className="pb-4">Live Screen</p>
+                  <div className="flex flex-col items-center justify-center rounded-md bg-opacity-20 bg-slate-800 p-3 backdrop-blur-sm">
+                    <p className="pb-4 text-white font-medium drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">Live Screen</p>
                     <div className="flex flex-row items-center justify-center gap-5">
                       <ToggleSwitch
                         isToggle={autoUpdateFrame}
@@ -334,7 +340,7 @@ const Controller = () => {
                             write("screenframeshort", false);
                           }
                         }}
-                        className={"size-6 min-w-6 rounded-sm bg-green-500"}
+                        className={"size-6 min-w-6 rounded-sm bg-slate-700 hover:bg-slate-600 text-white p-1 transition-colors duration-150 hover:drop-shadow-[0_0_4px_rgba(255,255,255,0.4)] flex items-center justify-center"}
                         shortcutKeys={"mod+R"}
                       />
                     </div>
@@ -354,15 +360,15 @@ const Controller = () => {
 
           {!serial.isReading ? (
             <button
-              className="rounded bg-orange-300 p-2 text-white disabled:opacity-50"
+              className="rounded bg-component p-2 text-white disabled:opacity-50"
               onClick={() => serial.startReading()}
             >
               Start Reading Console
             </button>
           ) : (
             <>
               {(!UIConfig.fileSystemHide || !UIConfig.serialConsoleHide) && (
-                <div className="mt-10 flex h-[434px] w-[80%] flex-row items-start justify-center gap-5 rounded-md bg-gray-700 p-5">
+                <div className="mt-10 flex h-[434px] w-4/5 flex-row items-start justify-center gap-5 rounded-md bg-component p-5">
                   {!UIConfig.fileSystemHide && (
                     <FileInputs
                       fileInputRef={fileInputRef}
@@ -392,7 +398,7 @@ const Controller = () => {
                 </div>
               )}
               {!UIConfig.firmwareManagerHide && (
-                <div className="m-5 flex w-[20%] flex-col items-center justify-center rounded-md bg-gray-700 p-5">
+                <div className="m-5 flex w-[20%] flex-col items-center justify-center rounded-md bg-component p-5">
                   <p className="pb-5 text-center text-sm">
                     Firmware Version: {deviceVersion}
                   </p>
@@ -404,7 +410,7 @@ const Controller = () => {
                   </button>
                 </div>
               )}
-              <div className="mt-3 flex w-[80%] justify-end">
+              <div className="mt-3 flex w-4/5 justify-end">
                 <button
                   onClick={() => setUIConfigurationOpen(true)}
                   className="btn btn-primary btn-sm size-10"
@@ -422,7 +428,7 @@ const Controller = () => {
         title="Firmware Update"
         isModalOpen={firmwarModalOpen}
         closeModal={() => setFirmwarModalOpen(false)}
-        className="w-[40%]"
+        className="w-2/5"
       >
         {deviceVersion === "" ||
         (getVersionType(deviceVersion) === "nightly" &&