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

src/components/widgets/glances/glances.jsx

@@ -1,13 +1,11 @@
 import useSWR from "swr";
 import { useContext } from "react";
+import { BiError } from "react-icons/bi";
 import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
 import { FiCpu, FiHardDrive } from "react-icons/fi";
 import { useTranslation } from "next-i18next";
 
-import Error from "../widget/error";
-import Resource from "../widget/resource";
-import Resources from "../widget/resources";
-import WidgetLabel from "../widget/widget_label";
+import UsageBar from "../resources/usage-bar";
 
 import { SettingsContext } from "utils/contexts/settings";
 
@@ -28,17 +26,52 @@ export default function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return <Error options={options} />
+    return (
+      <div className="flex flex-col justify-center first:ml-0 ml-4">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-row items-center">
+            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+            <div className="flex flex-col ml-3 text-left">
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Resources options={options}>
-      <Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
-      <Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
-      { options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
-      { options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
-      { options.label && <WidgetLabel label={options.label} /> }
-    </Resources>;
+    return (
+      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4">
+        <div className="flex flex-row self-center flex-wrap justify-between">
+           <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 text-xs">
+                  {t("glances.wait")}
+                </div>
+              </div>
+              <UsageBar percent="0" />
+            </div>
+          </div>
+          <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]">
+              <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+                <div className="pl-0.5 text-xs">
+                  {t("glances.wait")}
+                </div>
+              </div>
+              <UsageBar percent="0" />
+            </div>
+          </div>
+        </div>
+        {options.label && (
+          <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
+        )}
+      </div>
+    );
   }
 
   const unit = options.units === "imperial" ? "fahrenheit" : "celsius";
@@ -68,84 +101,131 @@ export default function Widget({ options }) {
   }
 
   return (
-    <Resources options={options} target={settings.target ?? "_blank"}>
-      <Resource
-        icon={FiCpu}
-        value={t("common.number", {
-          value: data.cpu.total,
-          style: "unit",
-          unit: "percent",
-          maximumFractionDigits: 0,
-        })}
-        label={t("glances.cpu")}
-        expandedValue={t("common.number", {
-          value: data.load.min15,
-          style: "unit",
-          unit: "percent",
-          maximumFractionDigits: 0
-        })}
-        expandedLabel={t("glances.load")}
-        percentage={data.cpu.total}
-        expanded={options.expanded}
-      />
-      <Resource
-        icon={FaMemory}
-        value={t("common.bytes", {
-          value: data.mem.free,
-          maximumFractionDigits: 1,
-          binary: true,
-        })}
-        label={t("glances.free")}
-        expandedValue={t("common.bytes", {
-          value: data.mem.total,
-          maximumFractionDigits: 1,
-          binary: true,
-        })}
-        expandedLabel={t("glances.total")}
-        percentage={data.mem.percent}
-        expanded={options.expanded}
-      />
-      {disks.map((disk) => (
-        <Resource key={disk.mnt_point}
-          icon={FiHardDrive}
-          value={t("common.bytes", { value: disk.free })}
-          label={t("glances.free")}
-          expandedValue={t("common.bytes", { value: disk.size })}
-          expandedLabel={t("glances.total")}
-          percentage={disk.percent}
-          expanded={options.expanded}
-        />
-      ))}
-      {options.cputemp && mainTemp > 0 &&
-        <Resource
-          icon={FaThermometerHalf}
-          value={t("common.number", {
-            value: mainTemp,
-            maximumFractionDigits: 1,
-            style: "unit",
-            unit
-          })}
-          label={t("glances.temp")}
-          expandedValue={t("common.number", {
-            value: maxTemp,
-            maximumFractionDigits: 1,
-            style: "unit",
-            unit
-          })}
-          expandedLabel={t("glances.warn")}
-          percentage={tempPercent}
-          expanded={options.expanded}
-        />
-      }
-      {options.uptime && data.uptime &&
-        <Resource
-          icon={FaRegClock}
-          value={data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
-          label={t("glances.uptime")}
-          percentage={Math.round((new Date().getSeconds() / 60) * 100).toString()}
-        />
-      }
-      {options.label && <WidgetLabel label={options.label} />}
-    </Resources>
+    <a href={options.url} target={settings.target ?? "_blank"} 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">
+         <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">
+                {t("common.number", {
+                  value: data.cpu.total,
+                  style: "unit",
+                  unit: "percent",
+                  maximumFractionDigits: 0,
+                })}
+              </div>
+              <div className="pr-1">{t("glances.cpu")}</div>
+            </div>
+            {options.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.number", {
+                  value: data.load.min15,
+                  style: "unit",
+                  unit: "percent",
+                  maximumFractionDigits: 0,
+                })}
+                </div>
+                <div className="pr-1">{t("glances.load")}</div>
+              </span>
+            )}
+            <UsageBar percent={data.cpu.total} />
+          </div>
+        </div>
+        <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]">
+            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">
+                {t("common.bytes", {
+                  value: data.mem.free,
+                  maximumFractionDigits: 1,
+                  binary: true,
+                })}
+              </div>
+              <div className="pr-1">{t("glances.free")}</div>
+            </div>
+            {options.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.mem.total,
+                    maximumFractionDigits: 1,
+                    binary: true,
+                  })}
+                </div>
+                <div className="pr-1">{t("glances.total")}</div>
+              </span>
+            )}
+            <UsageBar percent={data.mem.percent} />
+          </div>
+        </div>
+        {disks.map((disk) => (
+          <div key={disk.mnt_point} 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">{t("common.bytes", { value: disk.free })}</div>
+                <div className="pr-1">{t("glances.free")}</div>
+              </span>
+              {options.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: disk.size })}</div>
+                  <div className="pr-1">{t("glances.total")}</div>
+                </span>
+              )}
+              <UsageBar percent={disk.percent} />
+            </div>
+          </div>))}
+        {options.cputemp && mainTemp > 0 &&
+            (<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("glances.temp")}</div>
+              </span>
+              {options.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.number", { 
+                    value: maxTemp,
+                    maximumFractionDigits: 1,
+                    style: "unit",
+                    unit
+                  })}
+                  </div>
+                  <div className="pr-1">{t("glances.warn")}</div>
+                </span>
+              )}
+              <UsageBar percent={tempPercent} />
+            </div>
+          </div>)}
+        {options.uptime && data.uptime &&
+            (<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">
+                  {data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
+                </div>
+                <div className="pr-1">{t("glances.uptime")}</div>
+              </span>
+              <UsageBar percent={Math.round((new Date().getSeconds() / 60) * 100)} />
+            </div>
+          </div>)}
+      </div>
+      {options.label && (
+        <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
+      )}
+    </a>
   );
 }