Some final GUI tweaks to make it all ✨ pretty ✨

ItsRiprod · Oct 30, 2024 · 7140c0c · 7140c0c
1 parent f8245bf
commit 7140c0c
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 59 deletions.
diff --git a/DeskThingServer/src/renderer/src/assets/icons/icon/IconCarThingSmall.tsx b/DeskThingServer/src/renderer/src/assets/icons/icon/IconCarThingSmall.tsx
@@ -3,7 +3,12 @@ import { Icon, IconProps } from '.'
 function IconCarThingSmall(props: IconProps): JSX.Element {
   return (
     <Icon {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 48 48"
+        fill="none"
+        strokeWidth={(props.strokeWidth || 1) * 2}
+      >
         <path
           d="M42 28.2543C42 30.428 42 30.5462 42 33.2857C42 35.3371 40.2539 37 38.1 37H6.9C4.74609 37 3 35.3371 3 33.2857V14.7143C3 12.6629 4.74609 11 6.9 11H38.1C40.2539 11 42 12.6629 42 14.7143V16.5"
           stroke="white"

diff --git a/DeskThingServer/src/renderer/src/components/App.tsx b/DeskThingServer/src/renderer/src/components/App.tsx
@@ -46,13 +46,15 @@ const App: React.FC<AppProps> = ({ app, activeRequest }) => {
     setSearchParams(searchParams)
   }
 
+  const showAppRequests = (): void => {
+    searchParams.set('notifications', 'true')
+    searchParams.set('page', 'request')
+    setSearchParams(searchParams)
+  }
+
   return (
     <div className="flex items-center bg-zinc-900 p-4 justify-between rounded-xl text-white">
       <div className="flex items-center">
-        <Button onClick={showAppDetails} className="group bg-slate-950 hover:bg-slate-900 gap-2">
-          <IconWrench />
-          <p className="group-hover:block hidden">Settings</p>
-        </Button>
         <div className="px-2">
           <div className="flex items-center gap-2">
             <h2 className="font-geist font-semibold">{app.manifest?.label || app.name}</h2>
@@ -61,9 +63,12 @@ const App: React.FC<AppProps> = ({ app, activeRequest }) => {
             )}
           </div>
           {activeRequest ? (
-            <div className="bg-cyan-500 w-fit px-2 py-1 rounded-full text-xs">
+            <button
+              className="bg-cyan-500 hover:bg-cyan-600 w-fit px-2 py-1 rounded-full text-xs"
+              onClick={showAppRequests}
+            >
               <p>Requesting Data</p>
-            </div>
+            </button>
           ) : (
             <>
               <div className="font-geistMono text-xs flex w-full text-gray-300 justify-between">
@@ -77,11 +82,17 @@ const App: React.FC<AppProps> = ({ app, activeRequest }) => {
           )}
         </div>
       </div>
-      {app.running ? (
-        <Running stopApp={() => stopApp(app.name)} />
-      ) : (
-        <Stopped runApp={() => runApp(app.name)} />
-      )}
+      <div className="flex items-center gap-2">
+        <Button onClick={showAppDetails} className="group bg-slate-950 hover:bg-slate-900 gap-2">
+          <IconWrench />
+          <p className="group-hover:block hidden">Settings</p>
+        </Button>
+        {app.running ? (
+          <Running stopApp={() => stopApp(app.name)} />
+        ) : (
+          <Stopped runApp={() => runApp(app.name)} />
+        )}
+      </div>
     </div>
   )
 }

diff --git a/DeskThingServer/src/renderer/src/overlays/Overlay.tsx b/DeskThingServer/src/renderer/src/overlays/Overlay.tsx
@@ -27,7 +27,7 @@ const Overlay: React.FC<DownloadConfirmationProps> = ({ onClose, className, chil
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div ref={overlayRef} className={`relative bg-black rounded-lg ${className}`}>
-        <Button className="absolute top-2 right-2 hover:bg-zinc-900" onClick={onClose}>
+        <Button className="absolute top-2 right-2 hover:bg-black bg-zinc-900" onClick={onClose}>
           <IconX />
         </Button>
         {children}

diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useNotificationStore } from '@renderer/stores'
-import { IconX } from '@renderer/assets/icons'
+import { IconTrash, IconX } from '@renderer/assets/icons'
 import Button from '@renderer/components/Button'
 
 const EvensPage: React.FC = () => {
@@ -30,12 +30,12 @@ const EvensPage: React.FC = () => {
               >
                 <button
                   onClick={() => readLogs(index)}
-                  className="pl-2 py-2 rounded-xl hover:bg-zinc-900 relative group border-gray-500 flex items-center justify-center w-full"
+                  className="pl-2 py-2 rounded-xl hover:bg-zinc-900 relative group border-gray-500 flex items-center justify w-full"
                 >
                   <div className="absolute right-1  text-red-500 hidden group-hover:block">
-                    <IconX />
+                    <IconTrash />
                   </div>
-                  <p>{log.log}</p>
+                  <p className="items-start">{log.log}</p>
                 </button>
               </li>
             ))}
@@ -45,7 +45,7 @@ const EvensPage: React.FC = () => {
         )}
       </div>
       {logs.length > 0 && (
-        <Button onClick={handleReadLogs}>
+        <Button className="hover:bg-zinc-900 w-fit" onClick={handleReadLogs}>
           <p>Clear All</p>
         </Button>
       )}

diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx
@@ -14,6 +14,9 @@ const RequestsPage: React.FC = () => {
   return (
     <div className="w-full h-full p-4 flex flex-col">
       <h1 className="text-2xl font-bold mb-4">App Requests</h1>
+      <div className="bg-red-950 px-4 py-1 rounded-lg shadow-lg my-2">
+        <p className="text-xs italic text-gray-300">Requests will be depreciated in a future release</p>
+      </div>
       <div className="w-full h-full relative overflow-y-auto">
         {requests.length > 0 ? (
           <div className="w-full h-full overflow-y-auto relative">

diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/TasksPage.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/TasksPage.tsx
@@ -10,6 +10,9 @@ const TasksPage: React.FC = () => {
   return (
     <div className="w-full h-full p-4 flex flex-col">
       <h1 className="text-2xl font-bold mb-4">Tasks</h1>
+      <div className="bg-red-950 px-4 py-1 rounded-lg shadow-lg my-2">
+        <p className="text-xs italic text-gray-300">Tasks are still under development</p>
+      </div>
       {tasks.length > 0 ? (
         <div className="w-full h-full relative overflow-y-auto">
           <div className="absolute inset-0 w-full h-full">

diff --git a/DeskThingServer/src/renderer/src/overlays/settings/ClientSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/ClientSettings.tsx
@@ -82,7 +82,7 @@ const ClientSettings: React.FC = () => {
           className="focus:text-white bg-zinc-900 text-white rounded px-2 py-2"
         />
       </div>
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Use RNDIS</h2>
         <Button
           className="bg-transparent p-0"

diff --git a/DeskThingServer/src/renderer/src/overlays/settings/DeviceSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/DeviceSettings.tsx
@@ -39,7 +39,7 @@ const DeviceSettings: React.FC = () => {
 
   return (
     <div className="w-full absolute inset h-full divide-y-2 divide-gray-500 p-4 flex flex-col">
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Auto Detect ADB</h2>
         <Button
           className="bg-transparent p-0"
@@ -53,7 +53,7 @@ const DeviceSettings: React.FC = () => {
         </Button>
       </div>
 
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Use Global ADB</h2>
         <Button
           className="bg-transparent p-0"
@@ -67,7 +67,7 @@ const DeviceSettings: React.FC = () => {
         </Button>
       </div>
 
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Auto Config</h2>
         <Button
           className="bg-transparent p-0"
@@ -82,7 +82,7 @@ const DeviceSettings: React.FC = () => {
       </div>
 
       <div className="flex flex-col">
-        <div className="w-full p-4 flex justify-between items-center">
+        <div className="w-full px-4 p-3 flex justify-between items-center">
           <h2 className="text-xl">Run Firewall Configuration</h2>
           <Button
             className={`bg-zinc-900 ${!loading && 'hover:bg-zinc-800'}`}

diff --git a/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx
@@ -35,21 +35,8 @@ const MusicSettings: React.FC = () => {
   }
 
   return (
-    <div className="w-full absolute inset h-full p-4 flex flex-col divide-y-2 divide-gray-500">
-      <div className="w-full p-4 flex justify-between items-center">
-        <h2 className="text-xl">Refresh Interval (seconds)</h2>
-        <div className="flex items-center gap-4">
-          <input
-            type="number"
-            value={settings.refreshInterval === -1 ? '' : settings.refreshInterval / 1000}
-            onChange={(e) => handleSettingChange('refreshInterval', Number(e.target.value) * 1000)}
-            className="focus:text-white bg-zinc-900 text-white rounded px-2 py-2"
-            placeholder="Enter A Value"
-            disabled={settings.refreshInterval === -1}
-          />
-        </div>
-      </div>
-      <div className="w-full p-4 flex justify-between items-center">
+    <div className="w-full absolute inset h-full p-4 flex flex-col">
+      <div className="w-full p-0 px-4 flex justify-between items-center">
         <h2 className="text-xl">Enable Refresh Interval</h2>
         <div className="flex items-center gap-4">
           <Button
@@ -66,23 +53,42 @@ const MusicSettings: React.FC = () => {
           </Button>
         </div>
       </div>
-      <div className="w-full p-4 flex justify-between items-center">
+      <div
+        className={`transition-[height,opacity,border] border-t overflow-hidden ${settings.refreshInterval === -1 ? 'h-0 opacity-50 border-black' : 'h-20 opacity-100 border-gray-500'}`}
+      >
+        <div className={`w-full p-4 flex justify-between items-center`}>
+          <h2 className="text-xl">Refresh Interval (seconds)</h2>
+          <div className="flex items-center gap-4">
+            <input
+              type="number"
+              value={settings.refreshInterval === -1 ? '' : settings.refreshInterval / 1000}
+              onChange={(e) =>
+                handleSettingChange('refreshInterval', Number(e.target.value) * 1000)
+              }
+              className="focus:text-white bg-zinc-900 text-white rounded px-2 py-2"
+              placeholder="Enter A Value"
+              disabled={settings.refreshInterval === -1}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-500 w-full p-4 flex justify-between items-center">
         <h2 className="text-xl">Playback Sources</h2>
         <select
           value={settings.playbackLocation}
           onChange={(e) => {
             handleSettingChange('playbackLocation', e.target.value)
           }}
-          className="focus:text-white bg-zinc-900 text-white rounded px-2 py-2"
+          className="bg-zinc-900 rounded hover:cursor-pointer text-white px-2 py-2"
         >
           {audioSources.map((app) => (
-            <option key={app.id} value={app.id}>
+            <option key={app.id} value={app.id} className="rounded-none">
               {app.name}
             </option>
           ))}
         </select>
       </div>
-      <div className="border-t mt-4 py-5 border-gray-900 w-full flex justify-end">
+      <div className="border-t py-5 border-gray-500 w-full flex justify-end">
         <Button
           className={`border-green-500 border group gap-2 ${loading ? 'text-gray-100 bg-green-600' : 'hover:bg-green-500'}`}
           onClick={handleSave}

diff --git a/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx
@@ -50,7 +50,7 @@ const ServerSettings: React.FC = () => {
           className="border border-gray-300 focus:text-black text-gray-500 rounded px-2 py-1"
         />
       </div>
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Auto Start</h2>
         <Button
           className="bg-transparent p-0"
@@ -63,7 +63,7 @@ const ServerSettings: React.FC = () => {
           />
         </Button>
       </div>
-      <div className="w-full p-4 flex justify-between items-center">
+      <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Close To Taskbar</h2>
         <Button
           className="bg-transparent p-0"
@@ -76,7 +76,7 @@ const ServerSettings: React.FC = () => {
           />
         </Button>
       </div>
-      <div className="border-t mt-4 py-5 border-gray-900 w-full flex justify-end">
+      <div className="border-t py-5 border-gray-900 w-full flex justify-end">
         <Button
           className={`border-green-500 border group gap-2 ${loading ? 'text-gray-100 bg-green-600' : 'hover:bg-green-500'}`}
           onClick={handleSave}

diff --git a/DeskThingServer/src/renderer/src/overlays/settings/SettingsOverlay.tsx b/DeskThingServer/src/renderer/src/overlays/settings/SettingsOverlay.tsx
@@ -42,7 +42,7 @@ const SettingsOverlay: React.FC = () => {
       onClose={onClose}
       className="border border-gray-500 w-5/6 h-5/6 flex flex-col overflow-hidden"
     >
-      <div className="w-full py-4 bg-zinc-900 px-5">
+      <div className="w-full py-4 bg-zinc-900 px-5 border-b border-gray-500">
         <h1 className="font-semibold text-2xl">Settings</h1>
       </div>
       <div className="flex h-full">

diff --git a/DeskThingServer/src/renderer/src/pages/Dev/ADBSettings.tsx b/DeskThingServer/src/renderer/src/pages/Dev/ADBSettings.tsx
@@ -60,7 +60,7 @@ const ADBSettings: React.FC = () => {
 
   return (
     <div className="w-full h-full flex">
-      <Sidebar className="flex justify-end flex-col h-full max-h-full md:items-stretch items-center">
+      <Sidebar className="flex justify-end flex-col h-full gap-2 max-h-full md:items-stretch items-center">
         <Button onClick={handleToggleAdb} className="hover:bg-zinc-900 items-center gap-2">
           <IconToggle
             checked={adbSetting}

diff --git a/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx b/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx
@@ -54,24 +54,20 @@ const Logs: React.FC = () => {
     <div className="w-full h-full flex">
       <Sidebar className="flex justify-end flex-col h-full max-h-full md:items-stretch items-center">
         <div className="flex flex-col gap-2">
-          <Button onClick={handleLogsOpen} className="border-gray-500 hover:bg-gray-500">
+          <Button onClick={handleLogsOpen} className="hover:bg-zinc-900">
             <IconFolderOpen strokeWidth={1.5} />
             <p className="md:block hidden text-center flex-grow">Open Logs</p>
           </Button>
 
-          <Button
-            onClick={handleCopyLogs}
-            className="border-gray-500 hover:bg-gray-500"
-            disabled={isAnimating}
-          >
+          <Button onClick={handleCopyLogs} className="hover:bg-zinc-900" disabled={isAnimating}>
             <span id="rewardId" />
             {isAnimating ? <IconCheck strokeWidth={1.5} /> : <IconCopy strokeWidth={1.5} />}
             <p className="md:block hidden text-center flex-grow">Copy Logs</p>
           </Button>
         </div>
       </Sidebar>
       <MainElement>
-        <div className="flex gap-2 px-2 my-2 py-2">
+        <div className="flex gap-2 px-2 my-2 py-2 bg-zinc-950 border-b border-zinc-900">
           <Button
             onClick={() => setFilter(null)}
             className={`w-full   ${filter === null ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
@@ -104,7 +100,7 @@ const Logs: React.FC = () => {
             {filteredLogs.map((log, index) => (
               <li
                 key={index}
-                className={`text-sm font-geistMono break-words whitespace-pre-wrap ${
+                className={`text-sm hover:bg-zinc-900 font-geistMono break-words whitespace-pre-wrap ${
                   log.type === 'error'
                     ? 'text-red-500'
                     : log.type === 'message'

diff --git a/DeskThingServer/src/renderer/src/pages/Downloads/ClientDownloads.tsx b/DeskThingServer/src/renderer/src/pages/Downloads/ClientDownloads.tsx
@@ -13,8 +13,8 @@ import {
 import { useClientStore, useGithubStore, usePageStore } from '@renderer/stores'
 import MainElement from '@renderer/nav/MainElement'
 import DownloadNotification from '@renderer/overlays/DownloadNotification'
-import ClientSettingsOverlay from '@renderer/overlays/ClientSettingsOverlay'
 import Overlay from '@renderer/overlays/Overlay'
+import { useSearchParams } from 'react-router-dom'
 
 const ClientDownloads: React.FC = () => {
   const clientReleases = useGithubStore((githubStore) => githubStore.clientReleases)
@@ -27,9 +27,9 @@ const ClientDownloads: React.FC = () => {
   const loadClientZip = useClientStore((clientStore) => clientStore.loadClientZip)
   const logging = useClientStore((clientStore) => clientStore.logging)
 
+  const [searchParams, setSearchParams] = useSearchParams()
   // Displaying overlays
   const [showLogging, setShowLogging] = useState(false)
-  const [showClientSettings, setShowClientSettings] = useState(false)
   const [selectingFile, setSelectingFile] = useState(false)
   const [loading, setLoading] = useState(false)
 
@@ -110,9 +110,14 @@ const ClientDownloads: React.FC = () => {
     setTimeout(() => setClientRefreshing(false), Math.random() * 1500 + 500)
   }
 
+  const openClientSettings = (): void => {
+    searchParams.set('settings', 'true')
+    searchParams.set('page', 'client')
+    setSearchParams(searchParams)
+  }
+
   return (
     <div className="flex h-full w-full">
-      {showClientSettings && <ClientSettingsOverlay onClose={() => setShowClientSettings(false)} />}
       {logging && showLogging && (
         <DownloadNotification
           title="Loading Client..."
@@ -202,7 +207,7 @@ const ClientDownloads: React.FC = () => {
         </div>
         <div>
           <div className="flex flex-col gap-2">
-            <Button className="hover:bg-zinc-900" onClick={() => setShowClientSettings(true)}>
+            <Button className="hover:bg-zinc-900" onClick={openClientSettings}>
               <IconGear strokeWidth={1.5} />
               <p className="md:block hidden text-center flex-grow">Client Settings</p>
             </Button>