From 11dffdee9a7f0da4116dd0010e626ba06d2adf10 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 1 Aug 2022 13:29:49 +1200
Subject: [PATCH] feat(ui): update dashboard table & items EE-3474 (#7351)

---
 app/assets/css/colors.json                    |  2 +-
 app/assets/ico/tachometer.svg                 |  6 ++--
 app/kubernetes/views/dashboard/dashboard.html | 27 ++++++++------
 .../components/datatables/datatable.css       |  8 ++---
 .../DashboardItem/DashboardItem.tsx           | 36 +++++++++++++++----
 5 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/app/assets/css/colors.json b/app/assets/css/colors.json
index 53b2f2a84..55f2922e5 100644
--- a/app/assets/css/colors.json
+++ b/app/assets/css/colors.json
@@ -150,7 +150,7 @@
     "3": "#f5f5f4",
     "4": "#e7e5e4",
     "5": "#d7d3d0",
-    "6": "#d7d3d0",
+    "6": "#a9a29d",
     "7": "#79716b",
     "8": "#57534e",
     "9": "#44403c",
diff --git a/app/assets/ico/tachometer.svg b/app/assets/ico/tachometer.svg
index 6de37c58e..c3e722c10 100644
--- a/app/assets/ico/tachometer.svg
+++ b/app/assets/ico/tachometer.svg
@@ -1,3 +1,3 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50 8.33337V18.75M50 8.33337C26.9881 8.33337 8.33334 26.9882 8.33334 50M50 8.33337C73.0119 8.33337 91.6667 26.9882 91.6667 50M50 81.25V91.6667M50 91.6667C73.0119 91.6667 91.6667 73.0119 91.6667 50M50 91.6667C26.9881 91.6667 8.33334 73.0119 8.33334 50M18.75 50H8.33334M91.6667 50H81.25M79.4935 79.4935L72.1029 72.1029M20.5068 79.4935L27.9048 72.0955M20.5068 20.8334L27.742 28.0686M79.4935 20.8334L56.2496 43.75M58.3333 50C58.3333 54.6024 54.6024 58.3334 50 58.3334C45.3976 58.3334 41.6667 54.6024 41.6667 50C41.6667 45.3977 45.3976 41.6667 50 41.6667C54.6024 41.6667 58.3333 45.3977 58.3333 50Z" stroke="black" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.7453 16C18.5362 14.8661 19 13.4872 19 12C19 11.4851 18.9444 10.9832 18.8389 10.5M6.25469 16C5.46381 14.8662 5 13.4872 5 12C5 8.13401 8.13401 5 12 5C12.4221 5 12.8355 5.03737 13.2371 5.10897M16.4999 7.5L11.9999 12M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/app/kubernetes/views/dashboard/dashboard.html b/app/kubernetes/views/dashboard/dashboard.html
index 649a16147..996a04464 100644
--- a/app/kubernetes/views/dashboard/dashboard.html
+++ b/app/kubernetes/views/dashboard/dashboard.html
@@ -6,22 +6,27 @@
   <div class="row" ng-if="ctrl.endpoint">
     <div class="col-sm-12">
       <rd-widget>
-        <rd-widget-header icon="fa-tachometer-alt" title-text="Environment info"></rd-widget-header>
-        <rd-widget-body classes="no-padding">
+        <div class="toolBar vertical-center w-full">
+          <div class="toolBarTitle vertical-center p-5">
+            <pr-icon icon="'svg-tachometer'" class-name="'icon-nested-blue [&>svg]:!h-5 [&>svg]:!w-5'" mode="'primary'" class="vertical-center"></pr-icon>
+            Environment info
+          </div>
+        </div>
+        <rd-widget-body classes="!px-5 !py-0">
           <table class="table">
             <tbody>
               <tr>
-                <td>Environment</td>
-                <td>
+                <td class="!pl-0 !border-none">Environment</td>
+                <td class="!border-none">
                   {{ ctrl.endpoint.Name }}
                 </td>
               </tr>
               <tr ng-if="ctrl.showEnvUrl">
-                <td>URL</td>
-                <td>{{ ctrl.endpoint.URL | stripprotocol }}</td>
+                <td class="!pl-0 !border-t">URL</td>
+                <td class="!border-t">{{ ctrl.endpoint.URL | stripprotocol }}</td>
               </tr>
               <tr>
-                <td>Tags</td>
+                <td class="!pl-0">Tags</td>
                 <td>{{ ctrl.endpointTags }}</td>
               </tr>
             </tbody>
@@ -34,23 +39,23 @@
   <div class="dashboard-grid mx-4">
     <div ng-if="ctrl.pools" data-cy="k8sDashboard-namespaces">
       <a ui-sref="kubernetes.resourcePools">
-        <dashboard-item icon="'fa-layer-group'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
+        <dashboard-item feather-icon="true" icon="'layers'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
       </a>
     </div>
 
     <div ng-if="ctrl.applications" data-cy="k8sDashboard-applications">
       <a ui-sref="kubernetes.applications">
-        <dashboard-item icon="'fa-laptop-code'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
+        <dashboard-item feather-icon="true" icon="'box'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
       </a>
     </div>
     <div ng-if="ctrl.configurations" data-cy="k8sDashboard-configurations">
       <a ui-sref="kubernetes.configurations">
-        <dashboard-item icon="'fa-file-code'" type="'Configuration'" value="ctrl.configurations.length"></dashboard-item>
+        <dashboard-item feather-icon="true" icon="'lock'" type="'Configuration'" value="ctrl.configurations.length"></dashboard-item>
       </a>
     </div>
     <div ng-if="ctrl.volumes" data-cy="k8sDashboard-volumes">
       <a ui-sref="kubernetes.volumes">
-        <dashboard-item icon="'fa-database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
+        <dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
       </a>
     </div>
   </div>
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 4b92dd92a..f808afd5a 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -334,13 +334,13 @@
   width: 30px;
 }
 
-.table tr > th:first-child,
-.table tr > td:first-child {
+.table-responsive tr > th:first-child,
+.table-responsive tr > td:first-child {
   padding-left: 20px;
 }
 
-.table tr > th:last-child,
-.table tr > last-child {
+.table-responsive tr > th:last-child,
+.table-responsive tr > last-child {
   padding-right: 20px;
 }
 
diff --git a/app/react/components/DashboardItem/DashboardItem.tsx b/app/react/components/DashboardItem/DashboardItem.tsx
index 6f4b50f56..c1809e8da 100644
--- a/app/react/components/DashboardItem/DashboardItem.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.tsx
@@ -20,21 +20,45 @@ export function DashboardItem({
   return (
     <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'
+        'border-solid rounded-lg border p-3',
+        'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
+        'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
+        'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
       )}
     >
       <div className="flex items-center" aria-label={type}>
-        <div className="icon-badge text-2xl bg-blue-3 text-blue-8 mr-4">
+        <div
+          className={clsx(
+            'icon-badge text-2xl mr-4 !p-2',
+            'bg-blue-3 text-blue-8',
+            'th-dark:bg-blue-3 th-dark:text-blue-8',
+            'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
+          )}
+        >
           <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">
+          <div
+            className={clsx(
+              'font-medium text-2xl',
+              'text-gray-9',
+              'th-dark:text-white',
+              'th-highcontrast:text-white'
+            )}
+            aria-label="value"
+          >
             {typeof value !== 'undefined' ? value : '-'}
           </div>
-          <div className="text-gray-7 text-xl" aria-label="resourceType">
+          <div
+            className={clsx(
+              'text-xl',
+              'text-gray-7',
+              'th-dark:text-gray-warm-5',
+              'th-highcontrast:text-gray-warm-5'
+            )}
+            aria-label="resourceType"
+          >
             {pluralize(value || 0, type)}
           </div>
         </div>