Fixes for existing header styles, fix for glances

Signed-off-by: Denis Papec <denis.papec@gmail.com>

src/components/widgets/widget/container.jsx

@@ -6,10 +6,22 @@ import SecondaryText from "./secondary_text";
 import Raw from "./raw";
 
 export function getAllClasses(options, additionalClassNames = '') {
+  if (options?.style?.header === "boxedWidgets") {
+    return classNames(
+      "flex flex-col justify-center first:ml-0 ml-2 mr-2",
+      "mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3 pr-3",
+      additionalClassNames
+    );
+  }
+
+  let widgetAlignedClasses = "flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap";
+  if (options?.style?.isRightAligned) {
+    widgetAlignedClasses = "flex flex-col justify-center first:ml-auto ml-2 mr-2 ";
+  }
+
   return classNames(
-    "flex flex-col justify-center first:ml-0 ml-4 mr-2",
-    additionalClassNames,
-    options?.style === "boxedWidgets" && " ml-4 mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3",
+    widgetAlignedClasses,
+    additionalClassNames
   );
 }
 
@@ -18,8 +30,8 @@ export function getInnerBlock(children) {
   return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
     <div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
     <div className="flex flex-col ml-3 text-left">
-      <span className="text-theme-800 dark:text-theme-200 text-sm">{children.find(child => child.type === PrimaryText)}</span>
-      <span className="text-theme-800 dark:text-theme-200 text-xs">{children.find(child => child.type === SecondaryText)}</span>
+      {children.find(child => child.type === PrimaryText)}
+      {children.find(child => child.type === SecondaryText)}
     </div>
   </div>;
 }

src/components/widgets/widget/resource.jsx

@@ -1,9 +1,9 @@
 import UsageBar from "../resources/usage-bar";
 
-export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
+export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false }) {
   const Icon = icon;
 
-  return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
+  return <div className="flex-none flex flex-row items-center mr-3 py-1.5">
     <Icon 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">

src/components/widgets/widget/resources.jsx

@@ -4,12 +4,14 @@ import Raw from "./raw";
 import WidgetLabel from "./widget_label";
 
 export default function Resources({ options, children, target }) {
+  const widgetParts = [].concat(...children);
+
   return <ContainerLink options={options} target={target}>
     <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
-        { children.filter(child => child && child.type === Resource) }
+        { widgetParts.filter(child => child && child.type === Resource) }
       </div>
-      { children.filter(child => child && child.type === WidgetLabel) }
+      { widgetParts.filter(child => child && child.type === WidgetLabel) }
     </Raw>
   </ContainerLink>;
 }

src/components/widgets/widget/widget_label.jsx

@@ -1,3 +1,3 @@
 export default function WidgetLabel({ label = "" }) {
-  return <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+  return <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
 }