fix(app/home): env tile hover style [EE-5299] (#8765)

* fix(app/home): environment item hover

* fix(app/home): remove white border above env list footer

* fix(app/home): icon color on edit buttons hover in high contrast theme

app/assets/css/app.css

@@ -216,6 +216,14 @@ input[type='checkbox'] {
   color: var(--text-blocklist-item-selected-color);
 }
 
+.blocklist-item:not(.blocklist-item-not-interactive):hover {
+  @apply border border-blue-7;
+  cursor: pointer;
+
+  background-color: var(--bg-blocklist-hover-color);
+  color: var(--text-blocklist-hover-color);
+}
+
 .blocklist-item-box {
   display: flex;
 }

app/react/components/datatables/TableFooter.tsx

@@ -1,5 +1,9 @@
+import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
-export function TableFooter({ children }: PropsWithChildren<unknown>) {
+export function TableFooter({
-  return <footer className="footer">{children}</footer>;
+  children,
+  className,
+}: PropsWithChildren<unknown> & { className?: string }) {
+  return <footer className={clsx('footer', className)}>{children}</footer>;
 }

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx

@@ -23,7 +23,9 @@ export function EditButtons({ environment }: { environment: Environment }) {
 
   const buttonsClasses = clsx(
     'w-full h-full !ml-0 !rounded-none',
-    'hover:bg-gray-3 th-dark:hover:bg-gray-9 th-highcontrast:hover:bg-white'
+    'hover:bg-gray-3',
+    'th-dark:hover:bg-gray-9',
+    'th-highcontrast:hover:bg-white th-highcontrast:hover:text-black'
   );
 
   return (
@@ -85,8 +87,13 @@ function ButtonsGrid({
   return (
     <div
       className={clsx(
-        'grid rounded-r-lg border border-solid',
+        'grid',
-        'border-gray-5 th-highcontrast:border-white th-dark:border-gray-9',
+        // trace borders but make them transparent so
+        // * hovering the env item won't make env box borders clip with the grid borders
+        // * hovering the buttons won't make the button's icon flicker
+        'rounded-r-lg border border-solid',
+        'border-y-transparent border-r-transparent',
+        'border-l-gray-5 th-highcontrast:border-l-white th-dark:border-l-gray-9',
         'overflow-hidden',
         className
       )}
@@ -95,7 +102,7 @@ function ButtonsGrid({
         <div
           key={index}
           className={clsx({
-            'border-0 border-b border-solid border-b-inherit':
+            'border-0 border-b border-solid border-b-gray-5 th-highcontrast:border-b-white th-dark:border-b-gray-9':
               index < children.length - 1,
           })}
         >

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx

@@ -229,7 +229,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
               ))
             )}
           </div>
-          <TableFooter>
+          <TableFooter className="!border-t-0">
             <PaginationControls
               className="!mr-0"
               showAll={totalCount <= 100}