Revert "Added optional boxed styling for information widgets and refactored information widgets"

src/components/widgets/resources/cpu.jsx

@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
 
 export default function Cpu({ expanded }) {
   const { t } = useTranslation();
@@ -13,29 +13,67 @@ export default function Cpu({ expanded }) {
   });
 
   if (error || data?.error) {
-    return <Error />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Resource icon={FiCpu} value="-" label={t("resources.cpu")} expandedValue="-"
-                     expandedLabel={t("resources.load")} percentage="0" expanded={expanded} />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">-</div>
+            <div className="pr-1">{t("resources.cpu")}</div>
+          </div>
+          {expanded && (
+            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5 pr-1">-</div>
+              <div className="pr-1">{t("resources.load")}</div>
+            </div>
+          )}
+          <UsageBar percent={0} />
+        </div>
+      </div>
+    );
   }
 
-  return <Resource
-    icon={FiCpu}
-    value={t("common.number", {
-      value: data.cpu.usage,
-      style: "unit",
-      unit: "percent",
-      maximumFractionDigits: 0,
-    })}
-    label={t("resources.cpu")}
-    expandedValue={t("common.number", {
-      value: data.cpu.load,
-      maximumFractionDigits: 2,
-    })}
-    expandedLabel={t("resources.load")}
-    percentage={data.cpu.usage}
-    expanded={expanded}
-  />
+  const percent = data.cpu.usage;
+
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5 pr-1">
+            {t("common.number", {
+              value: data.cpu.usage,
+              style: "unit",
+              unit: "percent",
+              maximumFractionDigits: 0,
+            })}
+          </div>
+          <div className="pr-1">{t("resources.cpu")}</div>
+        </div>
+        {expanded && (
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">
+              {t("common.number", {
+                value: data.cpu.load,
+                maximumFractionDigits: 2,
+              })}
+            </div>
+            <div className="pr-1">{t("resources.load")}</div>
+          </div>
+        )}
+        <UsageBar percent={percent} />
+      </div>
+    </div>
+  );
 }

src/components/widgets/resources/cputemp.jsx

@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaThermometerHalf } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
 
 function convertToFahrenheit(t) {
   return t * 9/5 + 32
@@ -17,18 +17,34 @@ export default function CpuTemp({ expanded, units }) {
   });
 
   if (error || data?.error) {
-    return <Error />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
   }
 
   if (!data || !data.cputemp) {
-    return <Resource
-      icon={FaThermometerHalf}
-      value="-"
-      label={t("resources.temp")}
-      expandedValue="-"
-      expandedLabel={t("resources.max")}
-      expanded={expanded}
-    />;
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.temp")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.max")}</div>
+            </span>
+          )}
+        </div>
+      </div>
+    );
   }
 
   let mainTemp = data.cputemp.main;
@@ -38,24 +54,38 @@ export default function CpuTemp({ expanded, units }) {
   const unit = units === "imperial" ? "fahrenheit" : "celsius";
   mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
   const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);
+  const percent = Math.round((mainTemp / maxTemp) * 100);
 
-  return  <Resource
-    icon={FaThermometerHalf}
-    value={t("common.number", {
-      value: mainTemp,
-      maximumFractionDigits: 1,
-      style: "unit",
-      unit
-    })}
-    label={t("resources.temp")}
-    expandedValue={t("common.number", {
-      value: maxTemp,
-      maximumFractionDigits: 1,
-      style: "unit",
-      unit
-    })}
-    expandedLabel={t("resources.max")}
-    percentage={Math.round((mainTemp / maxTemp) * 100)}
-    expanded={expanded}
-  />;
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">
+            {t("common.number", { 
+              value: mainTemp,
+              maximumFractionDigits: 1,
+              style: "unit",
+              unit
+            })}
+          </div>
+          <div className="pr-1">{t("resources.temp")}</div>
+        </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">
+              {t("common.number", {
+                value: maxTemp,
+                maximumFractionDigits: 1,
+                style: "unit",
+                unit
+              })}
+            </div>
+            <div className="pr-1">{t("resources.max")}</div>
+          </span>
+        )}
+        <UsageBar percent={percent} />
+      </div>
+    </div>
+  );
 }

src/components/widgets/resources/disk.jsx

@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
 
 export default function Disk({ options, expanded }) {
   const { t } = useTranslation();
@@ -13,31 +13,56 @@ export default function Disk({ options, expanded }) {
   });
 
   if (error || data?.error) {
-    return <Error options={options} />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Resource
-      icon={FiHardDrive}
-      value="-"
-      label={t("resources.free")}
-      expandedValue="-"
-      expandedLabel={t("resources.total")}
-      expanded={expanded}
-      percentage="0"
-    />;
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5 pr-1">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={0} />
+        </div>
+      </div>
+    );
   }
 
   // data.drive.used not accurate?
   const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);
 
-  return <Resource
-    icon={FiHardDrive}
-    value={t("common.bytes", { value: data.drive.available })}
-    label={t("resources.free")}
-    expandedValue={t("common.bytes", { value: data.drive.size })}
-    expandedLabel={t("resources.total")}
-    percentage={percent}
-    expanded={expanded}
-  />;
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.available })}</div>
+          <div className="pr-1">{t("resources.free")}</div>
+        </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.size })}</div>
+            <div className="pr-1">{t("resources.total")}</div>
+          </span>
+        )}
+        <UsageBar percent={percent} />
+      </div>
+    </div>
+  );
 }

src/components/widgets/resources/memory.jsx

@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
 
 export default function Memory({ expanded }) {
   const { t } = useTranslation();
@@ -13,30 +13,63 @@ export default function Memory({ expanded }) {
   });
 
   if (error || data?.error) {
-    return <Error />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Resource
-      icon={FaMemory}
-      value="-"
-      label={t("resources.free")}
-      expandedValue="-"
-      expandedLabel={t("resources.total")}
-      expanded={expanded}
-      percentage="0"
-    />;
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5 pr-1">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={0} />
+        </div>
+      </div>
+    );
   }
 
   const percent = Math.round((data.memory.active / data.memory.total) * 100);
 
-  return <Resource
-    icon={FaMemory}
-    value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
-    label={t("resources.free")}
-    expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
-    expandedLabel={t("resources.total")}
-    percentage={percent}
-    expanded={expanded}
-  />;
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5 pr-1">
+            {t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
+          </div>
+          <div className="pr-1">{t("resources.free")}</div>
+        </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5 pr-1">
+              {t("common.bytes", {
+                value: data.memory.total,
+                maximumFractionDigits: 1,
+                binary: true,
+              })}
+            </div>
+            <div className="pr-1">{t("resources.total")}</div>
+          </span>
+        )}
+        <UsageBar percent={percent} />
+      </div>
+    </div>
+  );
 }

src/components/widgets/resources/resources.jsx

@@ -1,6 +1,3 @@
-import Container from "../widget/container";
-import Raw from "../widget/raw";
-
 import Disk from "./disk";
 import Cpu from "./cpu";
 import Memory from "./memory";
@@ -9,8 +6,8 @@ import Uptime from "./uptime";
 
 export default function Resources({ options }) {
   const { expanded, units } = options;
-  return <Container options={options}>
-    <Raw>
+  return (
+    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
         {options.cpu && <Cpu expanded={expanded} />}
         {options.memory && <Memory expanded={expanded} />}
@@ -23,6 +20,6 @@ export default function Resources({ options }) {
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
       )}
-    </Raw>
-  </Container>;
+    </div>
+  );
 }

src/components/widgets/resources/uptime.jsx

@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaRegClock } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
 
 export default function Uptime() {
   const { t } = useTranslation();
@@ -13,24 +13,54 @@ export default function Uptime() {
   });
 
   if (error || data?.error) {
-    return <Error />
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.temp")}</div>
+          </span>
+        </div>
+      </div>
+    );
   }
 
   const mo = Math.floor(data.uptime / (3600 * 24 * 31));
   const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24));
   const h = Math.floor(data.uptime % (3600 * 24) / 3600);
   const m = Math.floor(data.uptime % 3600 / 60);
-
+  
   let uptime;
   if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`;
   else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
   else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
 
-  const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();
+  const percent = Math.round((new Date().getSeconds() / 60) * 100);
 
-  return <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">
+            {uptime}
+          </div>
+          <div className="pr-1">{t("resources.uptime")}</div>
+        </span>
+        <UsageBar percent={percent} />
+      </div>
+    </div>
+  );
 }