fix(kubeconfig): update button and modal styles (#7481)

EE-3947

app/portainer/home/EnvironmentList/EnvironmentList.module.css

@@ -9,7 +9,6 @@
 
 .refresh-environments-button {
   margin-left: 0 !important;
-  padding: 8px 15px;
 }
 
 .filter-container {
@@ -73,7 +72,6 @@
 .filterSearchbar {
   display: inline-block;
   width: 100%;
-  padding-left: 10px;
 }
 
 .filterSearchbar input[type='text'] {

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -192,8 +192,10 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                     <Button
                       onClick={onRefresh}
                       data-cy="home-refreshEndpointsButton"
+                      size="medium"
+                      color="secondary"
                       className={clsx(
-                        'vertical-center',
+                        'vertical-center !ml-0',
                         styles.refreshEnvironmentsButton
                       )}
                     >
@@ -215,7 +217,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                     }}
                   />
                 </div>
-                <div className={styles.filterSearchbar}>
+                <div className={clsx(styles.filterSearchbar, 'ml-3')}>
                   <FilterSearchBar
                     value={searchBarValue}
                     onChange={setSearchBarValue}

app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.module.css

@@ -1,3 +0,0 @@
-.kubeconfig-button {
-  padding: 8px 15px;
-}

app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx

@@ -8,7 +8,6 @@ import { Query } from '@/portainer/environments/queries/useEnvironmentList';
 
 import { Button } from '@@/buttons';
 
-import styles from './KubeconfigButton.module.css';
 import { KubeconfigPrompt } from './KubeconfigPrompt';
 
 import '@reach/dialog/styles.css';
@@ -30,8 +29,8 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
 
   return (
     <>
-      <Button className={styles.kubeconfigButton} onClick={handleClick}>
-        <Download className="feather-icon-white" aria-hidden="true" />{' '}
+      <Button onClick={handleClick} size="medium" className="!ml-3">
+        <Download className="feather icon-white" aria-hidden="true" />{' '}
         Kubeconfig
       </Button>
       {prompt()}

app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx

@@ -1,3 +1,5 @@
+import { X } from 'react-feather';
+import clsx from 'clsx';
 import { useState } from 'react';
 import { DialogOverlay } from '@reach/dialog';
 
@@ -59,7 +61,7 @@ export function KubeconfigPrompt({
         <div className="modal-content">
           <div className="modal-header">
             <button type="button" className="close" onClick={onClose}>
-              ×
+              <X />
             </button>
             <h5 className="modal-title">Download kubeconfig file</h5>
           </div>
@@ -74,16 +76,24 @@ export function KubeconfigPrompt({
               </div>
             </form>
             <br />
-            <Checkbox
-              id="settings-container-truncate-nae"
-              label="Select all (in this page)"
-              checked={isAllPageSelected}
-              onChange={handleSelectAll}
-            />
+            <div className="h-8 flex items-center">
+              <Checkbox
+                id="settings-container-truncate-name"
+                label="Select all (in this page)"
+                checked={isAllPageSelected}
+                onChange={handleSelectAll}
+              />
+            </div>
             <div className="datatable">
               <div className="bootbox-checkbox-list">
                 {environments.map((env) => (
-                  <div className={styles.checkbox}>
+                  <div
+                    key={env.Id}
+                    className={clsx(
+                      styles.checkbox,
+                      'h-8 flex items-center pt-1'
+                    )}
+                  >
                     <Checkbox
                       id={`${env.Id}`}
                       label={`${env.Name} (${env.URL})`}
@@ -95,7 +105,7 @@ export function KubeconfigPrompt({
                   </div>
                 ))}
               </div>
-              <div className="footer">
+              <div className="pt-3 flex justify-end w-full">
                 <PaginationControls
                   showAll={totalCount <= 100}
                   page={page}
@@ -111,7 +121,9 @@ export function KubeconfigPrompt({
             <Button onClick={onClose} color="default">
               Cancel
             </Button>
-            <Button onClick={handleDownload}>Download File</Button>
+            <Button onClick={handleDownload} disabled={selectionSize < 1}>
+              Download File
+            </Button>
           </div>
         </div>
       </div>
@@ -143,7 +155,7 @@ export function KubeconfigPrompt({
 }
 
 export function expiryMessage(expiry: string) {
-  const prefix = 'Kubeconfig file will';
+  const prefix = 'The kubeconfig file will';
   switch (expiry) {
     case '24h':
       return `${prefix} expire in 1 day.`;

app/react/components/datatables/FilterSearchBar.module.css

@@ -1,15 +0,0 @@
-.searchBar {
-  padding: 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-}
-
-.searchBar .iconSpan {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.searchBar .textSpan {
-  display: inline-block;
-  width: 90%;
-}

app/react/components/datatables/FilterSearchBar.tsx

@@ -1,6 +1,6 @@
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { Search } from 'react-feather';
 
-import styles from './FilterSearchBar.module.css';
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
 
 interface Props {
   value: string;
@@ -14,19 +14,16 @@ export function FilterSearchBar({
   onChange,
 }: Props) {
   return (
-    <div className={styles.searchBar}>
-      <span className={styles.iconSpan}>
-        <i className="fa fa-search" aria-hidden="true" />
-      </span>
-      <span className={styles.textSpan}>
-        <input
-          type="text"
-          className="searchInput"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-        />
-      </span>
+    <div className="searchBar items-center flex h-[34px]">
+      <Search className="searchIcon feather" />
+      <input
+        type="text"
+        className="searchInput"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        data-cy="home-environmentSearch"
+      />
     </div>
   );
 }