cleanup resource widget design

src/components/widgets/resources/cpu.jsx

@@ -11,9 +11,8 @@ export default function Cpu() {
     return (
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -23,24 +22,28 @@ export default function Cpu() {
     return (
       <div className="flex-none flex flex-row items-center justify-center">
         <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left font-mono">
+        <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">- Usage</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Load</span>
         </div>
       </div>
     );
   }
 
+  const percent = data.cpu.usage;
+
   return (
     <div className="flex-none flex flex-row items-center justify-center">
       <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          <span className="whitespace-pre">{`${Math.round(data.cpu.usage)}%`.padEnd(3, " ")} Usage</span>
-        </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {`${(Math.round(data.cpu.load * 100) / 100).toFixed(1)}`.padEnd(3, " ")} Load
-        </span>
+      <div className="flex flex-col ml-3 text-left font-mono min-w-[50px]">
+        <div className="text-theme-800 dark:text-theme-200 text-xs">{`${Math.round(data.cpu.usage)}%`}</div>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/widgets/resources/disk.jsx

@@ -14,8 +14,7 @@ export default function Disk({ options }) {
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -26,23 +25,32 @@ export default function Disk({ options }) {
       <div className="flex-none flex flex-row items-center justify-center">
         <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Free</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Used</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
         </div>
       </div>
     );
   }
 
+  const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);
+
   return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center justify-center group">
       <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.drive.freeGb * 1024 * 1024 * 1024)} Free
+      <div className="flex flex-col ml-3 text-left font-mono ">
+        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
+          {formatBytes(data.drive.freeGb * 1024 * 1024 * 1024, 0)} Free
         </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.drive.usedGb * 1024 * 1024 * 1024)} Used
+        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
+          {formatBytes(data.drive.totalGb * 1024 * 1024 * 1024, 0)} Total
         </span>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/widgets/resources/memory.jsx

@@ -14,8 +14,7 @@ export default function Memory() {
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -26,23 +25,32 @@ export default function Memory() {
       <div className="flex-none flex flex-row items-center justify-center">
         <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Used</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Free</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
         </div>
       </div>
     );
   }
 
+  const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);
+
   return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center justify-center group">
       <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
       <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
-        </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
+        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
           {formatBytes(data.memory.freeMemMb * 1024 * 1024)} Free
         </span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
+          {formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
+        </span>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/widgets/resources/resources.jsx

@@ -11,9 +11,7 @@ export default function Resources({ options }) {
         {options.disk && <Disk options={options} />}
       </div>
       {options.label && (
-        <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
-          {options.label}
-        </div>
+        <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
       )}
     </div>
   );