From ccdf9c1659083be921e857958ea194fad557c461 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:41:48 -0800
Subject: [PATCH] Make compact

---
 src/components/widgets/resources/network.jsx | 40 +++++++-------------
 src/components/widgets/widget/resource.jsx   |  7 +++-
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index cee0d72d..4db49e01 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -26,36 +26,24 @@ export default function Network({ options, refresh = 1500 }) {
         expandedValue="-"
         expandedLabel={<FaAngleDown />}
         percentage="0"
-        expanded="true"
       />
     );
   }
 
   return (
-    <>
-      <Resource
-        icon={FaNetworkWired}
-        value={t("common.bits", { value: data?.network?.tx_sec })}
-        label={<FaAngleUp />}
-        expandedValue={t("common.bits", { value: data?.network?.rx_sec })}
-        expandedLabel={<FaAngleDown />}
-        percentage="0"
-        expanded="true"
-      >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
-      </Resource>
-
-      <Resource
-        icon={FaNetworkWired}
-        value={t("common.bbytes", { value: data?.network?.tx_bytes })}
-        label={<FaAngleUp />}
-        expandedValue={t("common.bbytes", { value: data?.network?.rx_bytes })}
-        expandedLabel={<FaAngleDown />}
-        percentage="0"
-        expanded="true"
-      >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
-      </Resource>
-    </>
+    <Resource
+      icon={FaNetworkWired}
+      value={`${t("common.bits", { value: data?.network?.tx_sec })} / ${t("common.bits", {
+        value: data?.network?.rx_sec,
+      })}`}
+      label={data.interface}
+      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
+        value: data?.network?.rx_bytes,
+      })}`}
+      expandedLabel={data.interface}
+      expanded={options.expanded}
+      wide={true}
+      percentage="0"
+    />
   );
 }
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
index 8c975928..a7cc982b 100644
--- a/src/components/widgets/widget/resource.jsx
+++ b/src/components/widgets/widget/resource.jsx
@@ -10,6 +10,7 @@ export default function Resource({
   percentage,
   expanded = false,
   additionalClassNames = "",
+  wide = false,
 }) {
   const Icon = icon;
 
@@ -18,7 +19,11 @@ export default function Resource({
       className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
     >
       <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
-      <div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
+      <div
+        className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${
+          wide ? " min-w-[170px]" : ""
+        }`}
+      >
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
           <div className="pl-0.5">{value}</div>
           <div className="pr-1">{label}</div>