Make this nice

src/components/widgets/resources/network.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
+import { FaNetworkWired } from "react-icons/fa";
 import { useTranslation } from "next-i18next";
 
 import Resource from "../widget/resource";
@@ -7,6 +7,7 @@ import Error from "../widget/error";
 
 export default function Network({ options, refresh = 1500 }) {
   const { t } = useTranslation();
+  // eslint-disable-next-line no-param-reassign
   if (options.network === true) options.network = "default";
 
   const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
@@ -21,11 +22,12 @@ export default function Network({ options, refresh = 1500 }) {
     return (
       <Resource
         icon={FaNetworkWired}
-        value="-"
-        label={<FaAngleUp />}
-        expandedValue="-"
-        expandedLabel={<FaAngleDown />}
+        value="- ↑"
+        label="- ↓"
+        expandedValue="- ↑"
+        expandedLabel="- ↓"
         percentage="0"
+        wide
       />
     );
   }
@@ -33,16 +35,12 @@ export default function Network({ options, refresh = 1500 }) {
   return (
     <Resource
       icon={FaNetworkWired}
-      value={`${t("common.byterate", { value: data?.network?.tx_sec })} / ${t("common.byterate", {
-        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}
+      value={`${t("common.byterate", { value: data?.network?.tx_sec })} ↑`}
+      label={`${t("common.byterate", { value: data?.network?.rx_sec })} ↓`}
+      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} ↑`}
+      expandedLabel={`${t("common.bbytes", { value: data?.network?.rx_bytes })} ↓`}
       expanded={options.expanded}
-      wide={true}
+      wide
       percentage="0"
     />
   );

src/components/widgets/widget/resource.jsx

@@ -20,8 +20,8 @@ export default function Resource({
     >
       <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" : ""} ${
-          wide ? " min-w-[170px]" : ""
+        className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
+          wide ? " min-w-[120px]" : "min-w-[85px]"
         }`}
       >
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">