refactor(app): redesign dashboard-item component [EE-3634] (#7175)

app/react/components/DashboardItem/DashboardGrid.css

@@ -0,0 +1,3 @@
+.dashboard-grid {
+  @apply grid grid-cols-2 gap-3;
+}

app/react/components/DashboardItem/DashboardGrid.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import './DashboardGrid.css';
+
+export function DashboardGrid({ children }: PropsWithChildren<unknown>) {
+  return <div className="dashboard-grid">{children}</div>;
+}

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -34,3 +34,11 @@ export function WithLink() {
     </Link>
   );
 }
+
+export function WithChildren() {
+  return (
+    <DashboardItem value={1} icon="fa fa-th-list" type="Example resource">
+      <div>Children</div>
+    </DashboardItem>
+  );
+}

app/react/components/DashboardItem/DashboardItem.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
+import clsx from 'clsx';
 
 import { Icon, IconProps } from '@/react/components/Icon';
-
-import { Widget, WidgetBody } from '@@/Widget';
+import { pluralize } from '@/portainer/helpers/strings';
 
 interface Props extends IconProps {
   value?: number;
@@ -18,21 +18,29 @@ export function DashboardItem({
   featherIcon,
 }: Props) {
   return (
-    <div className="col-sm-12 col-md-6" aria-label={type}>
-      <Widget>
-        <WidgetBody>
-          <div className="widget-icon blue pull-left">
-            <Icon icon={icon} feather={featherIcon} />
+    <div
+      className={clsx(
+        'border-solid rounded-lg border-2 hover:border-2 border-gray-5 hover:border-blue-7',
+        'bg-gray-2 hover:bg-blue-2',
+        'p-3'
+      )}
+    >
+      <div className="flex items-center" aria-label={type}>
+        <div className="icon-badge text-2xl bg-blue-3 text-blue-8 mr-4">
+          <Icon icon={icon} feather={featherIcon} className="feather" />
+        </div>
+
+        <div className="flex flex-col justify-around">
+          <div className="text-gray-9 font-medium text-2xl" aria-label="value">
+            {typeof value !== 'undefined' ? value : '-'}
           </div>
-          <div className="pull-right">{children}</div>
-          <div className="title" aria-label="value">
-            {value}
+          <div className="text-gray-7 text-xl" aria-label="resourceType">
+            {pluralize(value || 0, type)}
           </div>
-          <div className="comment" aria-label="resourceType">
-            {type}
-          </div>
-        </WidgetBody>
-      </Widget>
+        </div>
+
+        <div className="ml-auto">{children}</div>
+      </div>
     </div>
   );
 }