feat(ui): portainer wizard ui change for ce EE-3576 (#7405)

* ui change for wizard

app/react/components/BoxSelector/BoxSelectorItem.css

@@ -10,6 +10,8 @@
   margin-bottom: 5px;
   font-weight: bold;
   user-select: none;
+  color: var(--text-boxselector-header);
+  padding: 0px 10px;
 }
 
 .boxselector_header .fa,
@@ -115,6 +117,16 @@
   padding-left: 20px;
 }
 
+.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
+.box-selector-item input[type='radio']:not(:disabled) ~ label {
+  background-color: var(--bg-boxselector-color);
+}
+
+.boxselector_img_container {
+  line-height: 90px;
+  margin-bottom: 0;
+}
+
 .box-selector-item p {
   margin-bottom: 0;
 }

app/react/components/NavTabs/NavTabs.tsx

@@ -19,7 +19,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
   const selected = options.find((option) => option.id === selectedId);
 
   return (
-    <>
+    <div className="nav-container">
       <ul className="nav nav-tabs">
         {options.map((option) => (
           <li
@@ -49,7 +49,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
       {selected && selected.children && (
         <div className="tab-content">{selected.children}</div>
       )}
-    </>
+    </div>
   );
 
   function handleSelect(option: Option) {

app/react/components/Stepper/Stepper.module.css

@@ -18,18 +18,18 @@
   position: absolute;
   content: '';
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: -100%;
   z-index: 2;
-  border-bottom: 5px solid var(--bg-stepper-item-counter);
+  border-bottom: 3px solid var(--border-stepper-color);
 }
 
 .step-wrapper::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid var(--bg-stepper-item-counter);
+  border-bottom: 3px solid var(--border-stepper-color);
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: 0;
   z-index: 2;
 }
@@ -46,11 +46,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
-  background: var(--bg-stepper-item-counter);
+  /* background: var(--ui-white); */
+  background: var(--bg-stepper-color);
   margin-bottom: 6px;
+  border: 1px solid var(--ui-gray-6);
 }
 
 .step-wrapper.active {
@@ -59,27 +61,29 @@
 }
 
 .step-wrapper.active .step {
-  background: #337ab7;
+  background: var(--bg-stepper-active-color);
+  border: 2px solid var(--ui-blue-8);
 }
 
 .step-wrapper.active .step-counter {
-  color: #fff;
+  color: var(--text-stepper-active-color);
 }
 
 .step-wrapper.completed .step {
-  background-color: #48b400;
+  background: var(--bg-stepper-active-color);
+  border: 2px solid var(--ui-blue-8);
 }
 
 .step-wrapper.completed .step-counter {
-  color: #fff;
+  color: var(--text-stepper-active-color);
 }
 
 .step-wrapper.completed::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid #48b400;
+  border-bottom: 3px solid var(--ui-blue-8);
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: 0;
   z-index: 3;
 }

app/react/components/Svg.tsx

@@ -3,6 +3,12 @@ import automode from '@/assets/ico/theme/auto.svg?c';
 import darkmode from '@/assets/ico/theme/darkmode.svg?c';
 import lightmode from '@/assets/ico/theme/lightmode.svg?c';
 import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
+// wizard icons
+import agent from '@/assets/ico/wizard/agent.svg?c';
+import api from '@/assets/ico/wizard/api.svg?c';
+import edgeagent from '@/assets/ico/wizard/edge-agent.svg?c';
+import cloudimport from '@/assets/ico/wizard/import.svg?c';
+import socket from '@/assets/ico/wizard/socket.svg?c';
 // general icons
 import arrowsupdown from '@/assets/ico/arrows-updown.svg?c';
 import arrowright from '@/assets/ico/arrow-right-long.svg?c';
@@ -25,6 +31,7 @@ import heartbeat from '@/assets/ico/heartbeat.svg?c';
 import laptop from '@/assets/ico/laptop.svg?c';
 import laptopcode from '@/assets/ico/laptop-code.svg?c';
 import ldap from '@/assets/ico/ldap.svg?c';
+import magic from '@/assets/ico/magic.svg?c';
 import magicwand from '@/assets/ico/magic-wand.svg?c';
 import memory from '@/assets/ico/memory.svg?c';
 import objectgroup from '@/assets/ico/object-group.svg?c';
@@ -71,6 +78,11 @@ import internal from '@/assets/ico/vendor/internal.svg?c';
 const placeholder = Placeholder;
 
 export const SvgIcons = {
+  agent,
+  api,
+  edgeagent,
+  cloudimport,
+  socket,
   automode,
   darkmode,
   lightmode,
@@ -96,6 +108,7 @@ export const SvgIcons = {
   laptop,
   laptopcode,
   ldap,
+  magic,
   magicwand,
   memory,
   objectgroup,

app/react/components/form-components/FileUpload/FileUploadField.tsx

@@ -46,7 +46,7 @@ export function FileUploadField({
       </Button>
 
       <span className="vertical-center">
-        {value ? value.name : <Icon icon="x" feather mode="danger" />}
+        {value ? value.name : <Icon icon="x-circle" feather mode="danger" />}
       </span>
     </div>
   );