sparate temperature & fix spaces

src/widgets/glances/metrics/cpu.jsx

@@ -18,24 +18,9 @@ function convertToFahrenheit(t) {
   return (t * 9) / 5 + 32;
 }
 
-export default function Component({ service }) {
+function TEMP({ sensorData, tempUnits = "metric" }) {
   const { t } = useTranslation();
-  const { widget } = service;
+  const unit = tempUnits === "imperial" ? "fahrenheit" : "celsius";
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
-
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
-
-  const { data, error } = useWidgetAPI(service.widget, "cpu", {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
-  });
-
-  const { data: sensorData, error: sensorError } = useWidgetAPI(service.widget, "sensors", {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
-  });
-
-  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook");
-
-  const unit = widget.tempUnits === "imperial" ? "fahrenheit" : "celsius";
   let mainTemp = 0;
   let maxTemp = 80;
   const cpuSensors = sensorData?.filter(
@@ -58,6 +43,48 @@ export default function Component({ service }) {
     }
   }
 
+  return (
+    mainTemp > 0 && (
+      <div className="text-xs flex">
+        <div className="opacity-75 mr-1">
+          {t("common.number", {
+            value: mainTemp,
+            maximumFractionDigits: 1,
+            style: "unit",
+            unit,
+          })}
+        </div>
+        <div className="opacity-50">
+          {"("}{t("glances.warn")}{" @ "}
+          {t("common.number", {
+            value: maxTemp,
+            maximumFractionDigits: 1,
+            style: "unit",
+            unit,
+          })}{")"}
+        </div>
+      </div>
+    )
+  );
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+
+  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(service.widget, "cpu", {
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
+  });
+
+  const { data: sensorData, error: sensorError } = useWidgetAPI(service.widget, "sensors", {
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
+  });
+
+  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook");
+
   useEffect(() => {
     if (data) {
       setDataPoints((prevDataPoints) => {
@@ -113,22 +140,7 @@ export default function Component({ service }) {
 
       {quicklookData && !quicklookError && (
         <Block position="bottom-3 left-3">
-          {mainTemp > 0 && (
+          <TEMP sensorData={sensorData} tempUnits={widget.tempUnits} />
-            <div className="text-xs opacity-50">
-              {t("common.number", {
-                value: mainTemp,
-                maximumFractionDigits: 1,
-                style: "unit",
-                unit,
-              })} ({t("glances.warn")} @&nbsp;
-              {t("common.number", {
-                value: maxTemp,
-                maximumFractionDigits: 1,
-                style: "unit",
-                unit,
-              })})
-            </div>
-          )}
 
           {quicklookData.cpu_name && chart && <div className="text-xs opacity-50">{quicklookData.cpu_name}</div>}
         </Block>

src/widgets/glances/metrics/info.jsx

@@ -13,7 +13,7 @@ function Swap({ quicklookData, className = "" }) {
     quicklookData &&
     quicklookData.swap !== 0 && (
       <div className="text-xs flex place-content-between">
-        <div className={className}>{t("glances.swap")}</div>
+        <div className={className + ' mr-1'}>{t("glances.swap")}</div>
         <div className={className}>
           {t("common.number", {
             value: quicklookData.swap,
@@ -34,7 +34,7 @@ function CPU({ quicklookData, className = "" }) {
     quicklookData &&
     quicklookData.cpu && (
       <div className="text-xs flex place-content-between">
-        <div className={className}>{t("glances.cpu")}</div>
+        <div className={className + ' mr-1'}>{t("glances.cpu")}</div>
         <div className={className}>
           {t("common.number", {
             value: quicklookData.cpu,
@@ -55,7 +55,7 @@ function Mem({ quicklookData, className = "" }) {
     quicklookData &&
     quicklookData.mem && (
       <div className="text-xs flex place-content-between">
-        <div className={className}>{t("glances.mem")}</div>
+        <div className={className + ' mr-1'}>{t("glances.mem")}</div>
         <div className={className}>
           {t("common.number", {
             value: quicklookData.mem,
@@ -140,7 +140,7 @@ export default function Component({ service }) {
       )}
 
       {!chart && (
-        <Block position="bottom-3 left-3 w-[3rem]">
+        <Block position="bottom-3 left-3">
           <CPU quicklookData={quicklookData} className="opacity-75" />
         </Block>
       )}