fix(ui): kubernetes-consistent-styling EE-3820 (#7425)

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.module.css

@@ -6,14 +6,20 @@
   width: 100vw;
   z-index: 1000;
   height: 495px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
 .root.minimized {
   height: 35px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
 .header {
   height: 35px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,11 +27,11 @@
   background: rgb(245, 245, 245);
   border-top: 1px solid rgb(190, 190, 190);
 
-  padding: 0 30px;
+  padding: 0 16px;
 }
 
 .title {
-  font-weight: bold;
+  font-weight: 500;
   font-size: 14px;
 }
 
@@ -36,5 +42,6 @@
 
 .terminal-container .loading-message {
   position: fixed;
+  padding: 10px 16px 0px 16px;
   color: #fff;
 }

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx

@@ -12,6 +12,7 @@ import { EnvironmentId } from '@/portainer/environments/types';
 import { error as notifyError } from '@/portainer/services/notifications';
 import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
 
+import { Icon } from '@@/Icon';
 import { Button } from '@@/buttons';
 
 import styles from './KubectlShell.module.css';
@@ -125,27 +126,26 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
   return (
     <div className={clsx(styles.root, { [styles.minimized]: shell.minimized })}>
       <div className={styles.header}>
-        <div className={styles.title}>
-          <i className="fas fa-terminal space-right" />
+        <div className={clsx(styles.title, 'vertical-center')}>
+          <Icon icon="terminal" feather />
           kubectl shell
         </div>
         <div className={clsx(styles.actions, 'space-x-8')}>
           <Button color="link" onClick={clearScreen}>
-            <i className="fas fa-redo-alt" data-cy="k8sShell-refreshButton" />
+            <Icon icon="rotate-cw" feather size="md" />
           </Button>
           <Button color="link" onClick={toggleMinimize}>
-            <i
-              className={clsx(
-                'fas',
-                shell.minimized ? 'fa-window-restore' : 'fa-window-minimize'
-              )}
+            <Icon
+              icon={shell.minimized ? 'maximize-2' : 'minimize-2'}
+              feather
+              size="md"
               data-cy={
                 shell.minimized ? 'k8sShell-restore' : 'k8sShell-minimise'
               }
             />
           </Button>
           <Button color="link" onClick={handleClose}>
-            <i className="fas fa-times" data-cy="k8sShell-closeButton" />
+            <Icon icon="x" feather size="md" />
           </Button>
         </div>
       </div>

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.module.css

@@ -1,5 +1,5 @@
 .root {
   display: block;
-  margin: 0 auto;
+  margin: -5px auto -8px auto;
   padding-bottom: 5px;
 }

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -5,6 +6,7 @@ import { EnvironmentId } from '@/portainer/environments/types';
 import { useAnalytics } from '@/angulartics.matomo/analytics-services';
 
 import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
 
 import { KubeCtlShell } from './KubectlShell';
 import styles from './KubectlShellButton.module.css';
@@ -19,13 +21,14 @@ export function KubectlShellButton({ environmentId }: Props) {
     <>
       <Button
         color="primary"
-        size="xsmall"
+        size="small"
         disabled={open}
         data-cy="k8sSidebar-shellButton"
         onClick={() => handleOpen()}
-        className={styles.root}
+        className={clsx(styles.root, '!flex')}
       >
-        <i className="fa fa-terminal space-right" /> kubectl shell
+        <Icon icon="terminal" feather className="vertical-center" size="md" />{' '}
+        kubectl shell
       </Button>
 
       {open &&