cherry pick from ee to ce

app/assets/css/theme.css

@@ -108,7 +108,6 @@
   --bg-md-checkbox-color: var(--grey-12);
   --bg-form-control-disabled-color: var(--grey-11);
   --bg-modal-content-color: var(--white-color);
-  --bg-code-color: var(--grey-15);
   --bg-navtabs-color: var(--white-color);
   --bg-navtabs-hover-color: var(--grey-16);
   --bg-table-selected-color: var(--grey-14);
@@ -162,6 +161,12 @@
   --bg-inputbox: var(--ui-gray-2);
   --bg-dropdown-hover: var(--ui-gray-3);
   --bg-webeditor-color: var(--ui-gray-3);
+  --bg-button-group-color: var(--ui-white);
+  --bg-pagination-disabled-color: var(--ui-white);
+  --bg-nav-container-color: var(--ui-gray-2);
+  --bg-code-script-color: var(--ui-white);
+  --bg-nav-tabs-active-color: var(--ui-gray-4);
+  --bg-stepper-color: var(--ui-white);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -175,7 +180,7 @@
   --text-blocklist-hover-color: var(--grey-37);
   --text-dashboard-item-color: var(--grey-32);
   --text-danger-color: var(--red-1);
-  --text-code-color: var(--red-2);
+  --text-code-color: var(--ui-gray-9);
   --text-navtabs-color: var(--grey-25);
   --text-form-section-title-color: var(--grey-26);
   --text-cm-default-color: var(--blue-1);
@@ -221,8 +226,8 @@
   --border-boxselector-color: var(--grey-6);
   --border-md-checkbox-color: var(--grey-19);
   --border-modal-header-color: var(--grey-45);
-  --border-navtabs-color: var(--grey-19);
-  --border-form-section-title-color: var(--grey-26);
+  --border-navtabs-color: var(--ui-white);
+  --border-form-section-title-color: var(--grey-33);
   --border-codemirror-cursor-color: var(--black-color);
   --border-codemirror-gutters-color: var(--grey-19);
   --border-pre-color: var(--grey-43);
@@ -244,6 +249,7 @@
   --border-bootbox: var(--ui-gray-5);
   --border-blocklist: var(--ui-gray-5);
   --border-widget: var(--ui-gray-5);
+  --border-nav-container-color: var(--ui-gray-5);
 
   --shadow-box-color: 0 3px 10px -2px var(--grey-50);
   --shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
@@ -278,10 +284,14 @@
 
 :root[theme='dark'] {
   --bg-card-color: var(--grey-1);
-  --bg-main-color: var(--grey-2);
-  --bg-body-color: var(--grey-2);
   --bg-checkbox-border-color: var(--grey-8);
-  --bg-widget-color: var(--grey-1);
+  --bg-code-color: var(--ui-gray-warm-11);
+  --bg-codemirror-color: var(--ui-gray-warm-11);
+  --bg-codemirror-gutters-color: var(--ui-gray-warm-8);
+  --bg-codemirror-selected-color: var(--ui-gray-warm-7);
+  --bg-dropdown-menu-color: var(--grey-1);
+  --bg-main-color: var(--grey-2);
+  --bg-widget-color: var(--ui-gray-warm-10);
   --bg-widget-header-color: var(--grey-1);
   --bg-widget-table-color: var(--grey-1);
   --bg-header-color: var(--grey-2);
@@ -295,8 +305,7 @@
   --bg-md-checkbox-color: var(--grey-31);
   --bg-form-control-disabled-color: var(--grey-3);
   --bg-modal-content-color: var(--grey-1);
-  --bg-code-color: var(--red-4);
-  --bg-navtabs-color: var(--grey-3);
+  --bg-navtabs-color: var(--ui-gray-warm-11);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-table-selected-color: var(--grey-3);
   --bg-codemirror-color: var(--ui-gray-warm-11);
@@ -346,6 +355,12 @@
   --bg-inputbox: var(--grey-2);
   --bg-dropdown-hover: var(--grey-3);
   --bg-webeditor-color: var(--ui-gray-warm-9);
+  --bg-button-group-color: var(--ui-black);
+  --bg-pagination-disabled-color: var(--grey-1);
+  --bg-nav-container-color: var(--ui-gray-iron-10);
+  --bg-code-script-color: var(--ui-gray-warm-11);
+  --bg-nav-tabs-active-color: var(--ui-gray-warm-9);
+  --bg-stepper-color: var(--ui-gray-iron-10);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -429,6 +444,8 @@
   --border-bootbox: var(--ui-gray-9);
   --border-blocklist: var(--ui-gray-9);
   --border-widget: var(--ui-gray-9);
+  --border-pagination-color: var(--grey-1);
+  --border-nav-container-color: var(--ui-gray-neutral-8);
 
   --blue-color: var(--blue-2);
   --button-close-color: var(--white-color);
@@ -512,7 +529,6 @@
   --bg-navtabs-color: var(--black-color);
   --bg-input-autofill-color: var(--black-color);
   --bg-code-color: var(--grey-2);
-  --bg-navtabs-color: var(--grey-2);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-btn-default-hover-color: var(--grey-3);
   --bg-btn-default-color: var(--black-color);
@@ -529,6 +545,11 @@
   --bg-searchbar: var(--black-color);
   --bg-dropdown-hover: var(--black-color);
   --bg-webeditor-color: var(--ui-gray-warm-9);
+  --bg-pagination-disabled-color: var(--ui-black);
+  --bg-pagination-hover-color: var(--ui-black);
+  --bg-nav-container-color: var(--ui-black);
+  --bg-code-script-color: var(--ui-black);
+  --bg-nav-tabs-active-color: var(--ui-black);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -603,6 +624,7 @@
   --border-bootbox: var(--black-color);
   --border-blocklist: var(--white-color);
   --border-widget: var(--white-color);
+  --border-nav-container-color: var(--ui-white);
 
   --shadow-box-color: none;
   --shadow-boxselector-color: none;

app/assets/css/vendor-override.css

@@ -403,12 +403,29 @@ fieldset[disabled] .btn {
 }
 
 .nav-tabs > li.active > a {
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
-  border-bottom: 3px solid red;
+  border: 0px;
 }
 
 .label-default {
   line-height: 11px;
 }
+
+/* Code Script Style */
+.code-script {
+  background-color: var(--bg-code-script-color);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 5px;
+}
+
+.nav-container {
+  border: 1px solid var(--border-nav-container-color);
+  background-color: var(--bg-nav-container-color);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.nav-tabs > li {
+  background-color: var(--bg-nav-tabs-active-color);
+  border-top-right-radius: 8px;
+}

app/assets/ico/cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>

app/assets/ico/upload-cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>

app/assets/ico/zap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>

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

@@ -49,7 +49,7 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background: var(--ui-white);
+  background: var(--bg-stepper-color);
   margin-bottom: 6px;
   border: 1px solid var(--ui-gray-6);
 }

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

@@ -45,16 +45,8 @@ export function FileUploadField({
         {title}
       </Button>
 
-      <span className="space-left vertical-center">
-        {value ? (
-          value.name
-        ) : (
-          <Icon
-            icon="x-circle"
-            feather
-            className="icon icon-sm icon-danger vertical-center"
-          />
-        )}
+      <span className="vertical-center">
+        {value ? value.name : <Icon icon="x-circle" feather mode="danger" />}
       </span>
     </div>
   );

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx

@@ -33,7 +33,7 @@ export function EnvironmentTypeSelectView() {
       <div className="row">
         <div className="col-sm-12">
           <Widget>
-            <WidgetTitle icon="svg-magic" title="Environment Wizard" />
+            <WidgetTitle icon="svg-magicwand" title="Environment Wizard" />
             <WidgetBody>
               <EnvironmentSelector
                 value={types}

app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx

@@ -65,7 +65,7 @@ export function EnvironmentCreationView() {
 
       <div className={styles.wizardWrapper}>
         <Widget>
-          <WidgetTitle icon="svg-magic" title="Environment Wizard" />
+          <WidgetTitle icon="svg-magicwand" title="Environment Wizard" />
           <WidgetBody>
             <Stepper steps={steps} currentStep={currentStepIndex + 1} />
 

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx

@@ -38,7 +38,7 @@ const initialValues: FormValues = {
   },
 };
 
-const options = [buildOption('api', 'svg-api', 'API', '', 'api')];
+const options = [buildOption('api', 'svg-dataflow2', 'API', '', 'api')];
 
 interface Props {
   onCreate(environment: Environment, analytics: AnalyticsStateKey): void;

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx

@@ -56,10 +56,12 @@ interface DeployCodeProps {
 function DeployCode({ code }: DeployCodeProps) {
   return (
     <>
-      <span className="text-muted small">
-        CLI script for installing agent on your environment with Docker Swarm:
-      </span>
-      <Code>{code}</Code>
+      <div className="code-script">
+        <span className="text-muted small">
+          CLI script for installing agent on your environment with Docker Swarm:
+        </span>
+        <Code>{code}</Code>
+      </div>
       <CopyButton copyText={code}>Copy command</CopyButton>
     </>
   );

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx

@@ -22,28 +22,30 @@ const defaultOptions: BoxSelectorOption<
 >[] = [
   {
     id: 'agent',
-    icon: 'svg-agent',
+    icon: 'zap',
+    featherIcon: true,
     label: 'Agent',
     description: '',
     value: 'agent',
   },
   {
     id: 'api',
-    icon: 'svg-api',
+    icon: 'svg-dataflow2',
     label: 'API',
     description: '',
     value: 'api',
   },
   {
     id: 'socket',
-    icon: 'svg-socket',
+    icon: 'svg-plug',
     label: 'Socket',
     description: '',
     value: 'socket',
   },
   {
     id: 'edgeAgent',
-    icon: 'svg-edgeagent', // Todo cloud with docker
+    icon: 'cloud',
+    featherIcon: true,
     label: 'Edge Agent',
     description: '',
     value: 'edgeAgent',

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx

@@ -25,14 +25,16 @@ interface Props {
 const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
   {
     id: 'agent_endpoint',
-    icon: 'svg-agent',
+    icon: 'zap',
+    featherIcon: true,
     label: 'Agent',
     value: EnvironmentCreationTypes.AgentEnvironment,
     description: '',
   },
   {
     id: 'edgeAgent',
-    icon: 'svg-edgeagent', // Todo cloud with docker
+    icon: 'cloud',
+    featherIcon: true,
     label: 'Edge Agent',
     description: '',
     value: EnvironmentCreationTypes.EdgeAgentEnvironment,
@@ -40,7 +42,8 @@ const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
   },
   {
     id: 'kubeconfig_endpoint',
-    icon: 'svg-import',
+    icon: 'upload-cloud',
+    featherIcon: true,
     label: 'Import',
     value: EnvironmentCreationTypes.KubeConfigEnvironment,
     description: 'Import an existing Kubernetes config',

app/react/portainer/environments/wizard/HomeView/HomeView.tsx

@@ -23,7 +23,7 @@ export function HomeView() {
       <div className="row">
         <div className="col-sm-12">
           <Widget>
-            <WidgetTitle title="Environment Wizard" icon="svg-magic" />
+            <WidgetTitle title="Environment Wizard" icon="svg-magicwand" />
             <WidgetBody>
               <div className="row">
                 <div className="col-sm-12 form-section-title">