From d85149e328036ab0a5aabda7fd32ef9780a6fe6b Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 17 Aug 2022 14:01:04 +0600
Subject: [PATCH] fix(kubeconfig): update button and modal styles (#7481)

EE-3947
---
 .../EnvironmentList.module.css                |  2 --
 .../home/EnvironmentList/EnvironmentList.tsx  |  6 ++--
 .../KubeconfigButton.module.css               |  3 --
 .../KubeconfigButton/KubeconfigButton.tsx     |  5 ++-
 .../KubeconfigButton/KubeconfigPrompt.tsx     | 34 +++++++++++++------
 .../datatables/FilterSearchBar.module.css     | 15 --------
 .../components/datatables/FilterSearchBar.tsx | 27 +++++++--------
 7 files changed, 41 insertions(+), 51 deletions(-)
 delete mode 100644 app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.module.css
 delete mode 100644 app/react/components/datatables/FilterSearchBar.module.css

diff --git a/app/portainer/home/EnvironmentList/EnvironmentList.module.css b/app/portainer/home/EnvironmentList/EnvironmentList.module.css
index c7e8b55b8..6bcfa8cab 100644
--- a/app/portainer/home/EnvironmentList/EnvironmentList.module.css
+++ b/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'] {
diff --git a/app/portainer/home/EnvironmentList/EnvironmentList.tsx b/app/portainer/home/EnvironmentList/EnvironmentList.tsx
index abd48ca4c..02b63c016 100644
--- a/app/portainer/home/EnvironmentList/EnvironmentList.tsx
+++ b/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}
diff --git a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.module.css b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.module.css
deleted file mode 100644
index 34d538641..000000000
--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.kubeconfig-button {
-  padding: 8px 15px;
-}
diff --git a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
index 150e5bed4..6d8002b5a 100644
--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
+++ b/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()}
diff --git a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
index 178a817f7..d52706174 100644
--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
+++ b/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.`;
diff --git a/app/react/components/datatables/FilterSearchBar.module.css b/app/react/components/datatables/FilterSearchBar.module.css
deleted file mode 100644
index 9d1cf7cf8..000000000
--- a/app/react/components/datatables/FilterSearchBar.module.css
+++ /dev/null
@@ -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%;
-}
diff --git a/app/react/components/datatables/FilterSearchBar.tsx b/app/react/components/datatables/FilterSearchBar.tsx
index ebcbcfb19..acc7a42c6 100644
--- a/app/react/components/datatables/FilterSearchBar.tsx
+++ b/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>
   );
 }