feat(app): ui additional css class [EE-3594] (#7157)

* feat(app): ui additional css class [EE-3594]

app/assets/css/app.css

@@ -90,6 +90,7 @@ body,
   margin-bottom: 15px;
   color: var(--text-form-section-title-color);
   padding-left: 0;
+  font-weight: 500;
 }
 
 .form-horizontal .control-label.text-left {

app/assets/css/bootstrap-override.css

@@ -1,14 +1,45 @@
-/* Main Color UI Override*/
+/* Label, Section Title */
+
+.control-label {
+  color: var(--ui-gray-7);
+  font-weight: 500;
+}
+
+.form-section-title {
+  color: var(--ui-gray-9);
+  font-size: 16px;
+}
+
+.vertical-center {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
 
 .blue {
   background: var(--bg-dashboard-item) !important;
 }
 
-/* Button */
 .btn {
   border-radius: 5px;
+  display: inline-flex;
+  justify-content: space-around;
+  gap: 5px;
+}
+
+pr-icon {
+  display: inline-block;
+}
+
+.btn.active {
+  box-shadow: none;
+}
+
+.form-control {
+  border-radius: 5px;
 }
 
+/* Button Primary */
 .btn-primary {
   background-color: var(--ui-blue-8);
 }
@@ -16,7 +47,19 @@
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active .active {
-  background-color: var(--ui-blue-2);
+  background-color: var(--ui-blue-9);
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+  background-color: var(--ui-blue-9);
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  background-color: var(--ui-blue-8);
 }
 
 .btn-danger {
@@ -27,6 +70,69 @@
   background-color: var(--ui-success-7);
 }
 
+.btn-dangerlight {
+  background-color: var(--ui-error-2) !important;
+  border: 1px solid var(--border-button-group);
+  color: var(--ui-error-8);
+}
+
+.btn-dangerlight:hover {
+  color: var(--ui-error-9) !important;
+  background-color: var(--ui-error-3) !important;
+}
+
+.btn-light {
+  background-color: var(--bg-button-group);
+  border: 1px solid var(--border-button-group);
+  color: var(--text-button-group);
+}
+
+.btn-light:hover {
+  background-color: var(--ui-gray-2) !important;
+}
+
+.btn-light:active,
+.btn-light.active,
+.open > .dropdown-toggle.btn-light {
+  background-color: var(--ui-gray-3);
+}
+
+/* Button Secondary */
+.btn-secondary {
+  background-color: var(--ui-blue-2);
+  border: 1px solid var(--ui-blue-8);
+  color: var(--ui-blue-9);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary:active .active {
+  background-color: var(--ui-blue-3) !important;
+  color: var(--ui-blue-9) !important;
+}
+
+.btn-secondary:disabled {
+  background-color: var(--ui-blue-1);
+  border: 1px solid var(--ui-blue-1);
+  color: var(--ui-blue-5);
+}
+
+/* Input Group Addon */
+.input-group-addon:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.input-group .form-control:not(:first-child):not(:last-child) {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.input-group-btn:last-child .btn {
+  margin-left: 5px;
+  border-radius: 5px;
+}
+
 /* Toggle switch */
 .switch {
   position: relative;
@@ -41,6 +147,10 @@
   height: 0;
 }
 
+.switch input[type='checkbox']:disabled + .slider {
+  background-color: var(--ui-gray-3);
+}
+
 /* Toggle */
 
 .slider {
@@ -196,6 +306,7 @@ input:checked + .slider:before {
 
 .toolBar > .settings {
   width: 60px;
+  text-align: right;
 }
 
 .datatable .toolBar .settings {
@@ -212,48 +323,6 @@ input:checked + .slider:before {
   border-top: 1px solid var(--border-table-color);
 }
 
-/* Button Group */
-.input-group-addon:first-child {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-
-.input-group .form-control:not(:first-child):not(:last-child) {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.input-group-btn:last-child .btn {
-  margin-left: 5px;
-  border-radius: 5px;
-}
-
-.form-control {
-  border-radius: 5px;
-}
-
-.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-  background-color: var(--bg-button-group);
-  border: 1px solid var(--border-button-group);
-  color: var(--text-button-group);
-}
-
-.btn-group .btn-light {
-  background-color: var(--bg-button-group);
-  border: 1px solid var(--border-button-group);
-  color: var(--text-button-group);
-}
-
-.btn-group .btn-dangerlight {
-  background-color: var(--ui-error-2);
-  border: 1px solid var(--border-button-group);
-  color: var(--ui-error-8);
-}
-
-.btn.active {
-  box-shadow: none;
-}
-
 /* Toaster */
 
 #toast-container > .toast-success {
@@ -375,33 +444,6 @@ input:checked + .slider:before {
   border: 0px;
 }
 
-/* Boxselector */
-
-.boxselector_wrapper input[type='radio']:checked + label,
-.box-selector-item input[type='radio']:checked + label {
-  background: var(--ui-blue-3) !important;
-  color: black !important;
-  border-radius: 8px;
-  border-color: var(--ui-blue-7);
-  padding: 15px;
-  box-shadow: none;
-}
-
-.boxselector_wrapper input[type='radio']:not(:disabled) + label,
-.box-selector-item input[type='radio']:not(:disabled) + label {
-  background: var(--ui-gray-2);
-  color: var(--black-color) !important;
-  border-radius: 8px;
-  border-color: var(--ui-gray-5);
-  padding: 15px;
-  box-shadow: none;
-}
-
-.row.header {
-  background-color: var(--bg-body-color) !important;
-  margin-bottom: 5px !important;
-}
-
 /* Databatle Setting Menu */
 
 .tableMenu {
@@ -421,48 +463,112 @@ input:checked + .slider:before {
   border: 0px;
 }
 
-/* Myaccount Dropdown Menu */
+/* Status Indicator Inside Table Section Label Style */
-
+.table .label {
-.myaccount-dropdown {
-  color: var(--text-body-color);
-  font-size: 17px;
-}
-
-.myaccount-container {
-  margin-top: -25px;
-}
-
-.myaccount-icon {
-  padding-left: 8px;
-}
-
-.myaccount-link {
-  display: inline;
-  border: 0px;
-  background: none;
-  padding: 10px 0px;
-}
-
-/* Status Indicator Label Style */
-.label {
   border-radius: 8px !important;
 }
 
-.label-danger {
+.table .label .label-danger {
   background-color: var(--ui-error-8);
 }
 
-.label-success {
+.table .label .label-success {
   background-color: var(--ui-success-7);
 }
 
-/* Feather Icon */
+/* Feather Icon Variants */
 
 .feather {
+  display: block;
+  color: var(--text-body-color);
   height: 18px;
   width: 18px;
-  position: relative;
+}
-  top: 3px;
+
-  margin-right: 5px;
+.icon-xs {
-  color: var(--text-body-color);
+  height: 10px;
+  width: 10px;
+}
+
+.icon-sm {
+  height: 14px;
+  width: 14px;
+}
+
+.icon-md {
+  height: 16px;
+  width: 16px;
+}
+
+.icon-lg {
+  height: 22px;
+  width: 22px;
+}
+
+.icon-xl {
+  height: 26px;
+  width: 26px;
+}
+
+.icon-primary {
+  color: var(--ui-blue-8);
+}
+
+.icon-white {
+  color: var(--white-color);
+}
+
+.icon-dark {
+  color: var(--ui-black);
+}
+
+.icon-secondary {
+  color: var(--ui-gray-8);
+}
+
+.icon-warning {
+  color: var(--ui-warning-8);
+}
+
+.icon-danger {
+  color: var(--ui-error-8);
+}
+
+.icon-success {
+  color: var(--ui-success-6);
+}
+
+.icon-nested-gray {
+  width: 18px;
+  height: 18px;
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-gray-4);
+  margin-right: 5px;
+}
+
+.icon-nested-blue {
+  width: 18px;
+  height: 18px;
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-blue-3);
+  margin-right: 5px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}
+/* Required Label with asterisk */
+
+.required:after {
+  content: '*';
+  color: var(--ui-error-9);
 }

app/assets/css/rdash.css

@@ -98,6 +98,7 @@ div.input-mask {
   color: var(--text-widget-header-color);
   padding: 10px 15px;
   line-height: 30px;
+  font-weight: 500;
 }
 .widget .widget-header i {
   margin-right: 5px;

app/assets/css/theme.css

@@ -165,8 +165,7 @@
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
-  --text-sidebar-title-color: var(--blue-3);
+  --text-widget-header-color: var(--ui-gray-11);
-  --text-widget-header-color: var(--grey-7);
   --text-form-control-color: var(--grey-25);
   --text-muted-color: var(--grey-26);
   --text-link-color: var(--blue-2);
@@ -346,7 +345,6 @@
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
-  --text-sidebar-title-color: var(--grey-8);
   --text-widget-header-color: var(--white-color);
   --text-form-control-color: var(--white-color);
   --text-muted-color: var(--grey-8);
@@ -526,7 +524,6 @@
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
-  --text-sidebar-title-color: var(--grey-8);
   --text-widget-header-color: var(--white-color);
   --text-link-color: var(--blue-9);
   --text-link-hover-color: var(--blue-9);

app/assets/css/vendor-override.css

@@ -53,7 +53,7 @@ a:focus {
 }
 
 .text-danger {
-  color: var(--text-danger-color);
+  color: var(--ui-error-9);
 }
 
 .table .table {
@@ -373,6 +373,10 @@ input:-webkit-autofill {
   color: var(--white-color);
 }
 
+.btn-success:hover {
+  color: var(--white-color);
+}
+
 /* Overide Vendor CSS */
 
 .btn.disabled,

app/assets/ico/checked.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" fill="#0086C9"/>
+<path d="M12.0474 5.5L7.4641 10.0833L5.38077 8" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" stroke="#0086C9"/>
+</svg>

app/assets/ico/ldap.svg

@@ -0,0 +1,6 @@
+<svg width="79" height="44" viewBox="0 0 79 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.3224 11.3193L54.6351 27.3044L63.9515 43.2856H45.3224H26.6934L36.006 27.3044L45.3224 11.3193Z" fill="#CB2026"/>
+<path d="M64.1569 38.7032H79.0003L69.6839 22.7181L60.3713 6.73692L52.9496 19.4733L59.1631 30.1388L64.1569 38.7032Z" fill="#CB2026"/>
+<path d="M31.9306 29.5575L27.9455 22.7181L18.6291 6.73692L9.31645 22.7181L0 38.7032H18.6291H26.5993L29.2151 34.2158L31.9306 29.5575Z" fill="#CB2026"/>
+<path d="M33.2951 27.2245L33.763 26.4228L40.4214 15.0011L31.78 0.174988L24.6575 12.3984L30.5258 22.4674L33.2951 27.2245Z" fill="#CB2026"/>
+</svg>

app/assets/ico/microsoft.svg

@@ -0,0 +1,6 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.6796 0.74147H0V25.1903H24.6796V0.74147Z" fill="#F35325"/>
+<path d="M52.0165 0.741547H27.3369V25.1904H52.0165V0.741547Z" fill="#81BC06"/>
+<path d="M24.6796 27.8229H0V52.2718H24.6796V27.8229Z" fill="#05A6F0"/>
+<path d="M52.0165 27.8229H27.3369V52.2718H52.0165V27.8229Z" fill="#FFBA08"/>
+</svg>

app/assets/ico/oauth.svg

@@ -0,0 +1,4 @@
+<svg width="51" height="57" viewBox="0 0 51 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.4176 17.75L43.882 0.819107H7.28089L1.74531 17.75C1.74531 17.75 -4.79215 34.8935 10.4787 45.4348C24.3922 55.0404 25.5814 56.2077 25.5814 56.2077C25.5814 56.2077 26.7707 55.038 40.6842 45.4348C55.955 34.8935 49.4176 17.75 49.4176 17.75Z" fill="#F4552A"/>
+<path d="M25.5851 0.984695L31.4835 17.6745L49.4453 18.0361L35.1283 28.7097L40.3323 45.6217L25.5851 35.5293L10.838 45.6217L16.042 28.7097L1.72498 18.0361L19.6868 17.6745L25.5851 0.984695Z" fill="white"/>
+</svg>

app/docker/views/containers/edit/container.html

@@ -11,18 +11,20 @@
 >
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-cogs" title-text="Actions"></rd-widget-header>
+      <rd-widget-header icon="settings" feather-icon="true" title-text="Actions"></rd-widget-header>
       <rd-widget-body classes="padding">
         <div class="btn-group" role="group" aria-label="...">
-          <button authorization="DockerContainerStart" class="btn btn-light btn-sm" ng-click="start()" ng-disabled="container.State.Running || container.IsPortainer"
+          <button authorization="DockerContainerStart" class="btn btn-light btn-sm" ng-click="start()" ng-disabled="container.State.Running || container.IsPortainer">
-            ><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button
+            <pr-icon icon="'play'" feather="true" class-name="'feather'"></pr-icon>
-          >
+            Start
-          <button authorization="DockerContainerStop" class="btn btn-light btn-sm" ng-click="stop()" ng-disabled="!container.State.Running || container.IsPortainer"
+          </button>
-            ><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button
+          <button authorization="DockerContainerStop" class="btn btn-light btn-sm" ng-click="stop()" ng-disabled="!container.State.Running || container.IsPortainer">
-          >
+            <pr-icon icon="'square'" feather="true"></pr-icon>
-          <button authorization="DockerContainerKill" class="btn btn-light btn-sm" ng-click="kill()" ng-disabled="!container.State.Running || container.IsPortainer"
+            Stop
-            ><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button
+          </button>
-          >
+          <button authorization="DockerContainerKill" class="btn btn-light btn-sm" ng-click="kill()" ng-disabled="!container.State.Running || container.IsPortainer">
+            <i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
+          </button>
           <button authorization="DockerContainerRestart" class="btn btn-light btn-sm" ng-click="restart()" ng-disabled="!container.State.Running || container.IsPortainer"
             ><i class="fa fa-sync space-right" aria-hidden="true"></i>Restart</button
           >

app/docker/views/dashboard/dashboard.html

@@ -1,7 +1,4 @@
-<rd-header>
+<page-header title="'Dashboard'" breadcrumbs="['Environment summary']"> </page-header>
-  <rd-header-title title-text="Dashboard"></rd-header-title>
-  <rd-header-content>Environment summary</rd-header-content>
-</rd-header>
 
 <div class="row" ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
   <div class="col-sm-12">

app/global.d.ts

@@ -5,6 +5,10 @@ declare module '*.png' {
   export default '' as string;
 }
 
+declare module '*.svg' {
+  export default '' as string;
+}
+
 type SvgrComponent = React.StatelessComponent<React.SVGAttributes<SVGElement>>;
 
 declare module '*.svg?c' {

app/portainer/components/datatables/datatable.css

@@ -12,6 +12,8 @@
 .datatable .toolBar .toolBarTitle {
   float: left;
   margin: 5px 0 0 10px;
+  color: var(--text-widget-header-color);
+  font-weight: 500;
 }
 
 .datatable .toolBar .settings {
@@ -37,7 +39,7 @@
 .datatable .searchInput {
   background: none;
   border: none;
-  width: 95%;
+  width: 90%;
 }
 
 .datatable .searchIcon {

app/portainer/components/widget/rd-widget-title.ts

@@ -12,7 +12,7 @@ export const rdWidgetTitle = {
   template: `
     <div class="widget-header">
       <div class="row">
-        <span ng-class="$ctrl.classes" class="pull-left">
+        <span ng-class="$ctrl.classes" class="pull-left vertical-center">
           <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
           <span ng-transclude="title">{{ $ctrl.titleText }}</span>
         </span>

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

@@ -9,6 +9,7 @@
 
 .refresh-environments-button {
   margin-left: 0 !important;
+  padding: 8px 15px;
 }
 
 .filter-container {

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
 import clsx from 'clsx';
+import { RefreshCcw } from 'react-feather';
 
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
 import {
@@ -287,10 +288,13 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                     <Button
                       onClick={onRefresh}
                       data-cy="home-refreshEndpointsButton"
-                      className={clsx(styles.refreshEnvironmentsButton)}
+                      className={clsx(
+                        'vertical-center',
+                        styles.refreshEnvironmentsButton
+                      )}
                     >
-                      <i
+                      <RefreshCcw
-                        className="fa fa-sync space-right"
+                        className="feather icon-sm icon-white"
                         aria-hidden="true"
                       />
                       Refresh

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

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

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Download } from 'react-feather';
 
 import { Environment } from '@/portainer/environments/types';
 import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service/index';
@@ -7,6 +8,7 @@ import { trackEvent } from '@/angulartics.matomo/analytics-services';
 
 import { Button } from '@@/buttons';
 
+import styles from './KubeconfigButton.module.css';
 import { KubeconfigPrompt } from './KubeconfigPrompt';
 import '@reach/dialog/styles.css';
 
@@ -27,8 +29,9 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
 
   return (
     <>
-      <Button onClick={handleClick}>
+      <Button className={styles.kubeconfigButton} onClick={handleClick}>
-        <i className="fas fa-download space-right" /> kubeconfig
+        <Download className="feather-icon-white" aria-hidden="true" />{' '}
+        Kubeconfig
       </Button>
       {prompt()}
     </>

app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.module.css

@@ -12,7 +12,7 @@
   padding: 10px;
   background-color: var(--bg-tooltip-color);
   min-width: max-content;
-  color: var(--black);
+  color: var(--text-tooltip-color);
   box-shadow: var(--shadow-box-color);
 }
 

app/portainer/views/settings/authentication/options.tsx

@@ -0,0 +1,37 @@
+import { FeatureId } from '@/portainer/feature-flags/enums';
+import Microsoft from '@/assets/ico/microsoft.svg?c';
+import Ldap from '@/assets/ico/ldap.svg?c';
+import Oauth from '@/assets/ico/oauth.svg?c';
+
+export const options = [
+  {
+    id: 'auth_internal',
+    icon: 'user',
+    featherIcon: true,
+    label: 'Internal',
+    description: 'Internal authentication mechanism',
+    value: 1,
+  },
+  {
+    id: 'auth_ldap',
+    icon: Ldap,
+    label: 'LDAP',
+    description: 'LDAP authentication',
+    value: 2,
+  },
+  {
+    id: 'auth_ad',
+    icon: Microsoft,
+    label: 'Microsoft Active Directory',
+    description: 'AD authentication',
+    value: 4,
+    feature: FeatureId.HIDE_INTERNAL_AUTH,
+  },
+  {
+    id: 'auth_oauth',
+    icon: Oauth,
+    label: 'OAuth',
+    description: 'OAuth authentication',
+    value: 3,
+  },
+];

app/portainer/views/settings/authentication/settingsAuthentication.html

@@ -22,7 +22,10 @@
             </div>
           </div>
           <div class="form-group">
-            <span class="col-sm-12 text-muted small"> Changing from default is only recommended if you have additional layers of authentication in front of Portainer. </span>
+            <span class="col-sm-12 text-muted small"
+              ><pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon> Changing from default is only recommended if you have additional layers
+              of authentication in front of Portainer.
+            </span>
           </div>
 
           <div class="col-sm-12 form-section-title"> Authentication method </div>

app/portainer/views/settings/authentication/settingsAuthenticationController.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 
-import { FeatureId } from '@/portainer/feature-flags/enums';
 import { buildLdapSettingsModel, buildAdSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
+import { options } from './options';
 
 angular.module('portainer.app').controller('SettingsAuthenticationController', SettingsAuthenticationController);
 
@@ -46,12 +46,7 @@ function SettingsAuthenticationController($q, $scope, $state, Notifications, Set
     },
   };
 
-  $scope.authOptions = [
+  $scope.authOptions = options;
-    { id: 'auth_internal', icon: 'fa fa-users', label: 'Internal', description: 'Internal authentication mechanism', value: 1 },
-    { id: 'auth_ldap', icon: 'fa fa-users', label: 'LDAP', description: 'LDAP authentication', value: 2 },
-    { id: 'auth_ad', icon: 'fab fa-microsoft', label: 'Microsoft Active Directory', description: 'AD authentication', value: 4, feature: FeatureId.HIDE_INTERNAL_AUTH },
-    { id: 'auth_oauth', icon: 'fa fa-users', label: 'OAuth', description: 'OAuth authentication', value: 3 },
-  ];
 
   $scope.onChangeAuthMethod = function onChangeAuthMethod(value) {
     $scope.authMethod = value;

app/portainer/views/templates/templates.html

@@ -1,11 +1,4 @@
-<rd-header id="view-top">
+<page-header title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
-  <rd-header-title title-text="Application templates list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Templates</rd-header-content>
-</rd-header>
 
 <div class="row">
   <!-- stack-form -->

app/react/components/BoxSelector/BoxSelector.css

@@ -2,3 +2,34 @@
   display: flex;
   flex-flow: row wrap;
 }
+
+@media only screen and (max-width: 700px) {
+  .boxselector_wrapper {
+    flex-direction: column;
+  }
+}
+
+.boxselector_wrapper input[type='radio']:checked + label,
+.box-selector-item input[type='radio']:checked + label {
+  background-color: var(--bg-blocklist-hover-color) !important;
+  color: black !important;
+  border-radius: 8px;
+  border-color: var(--ui-blue-7);
+  padding: 15px;
+  box-shadow: none;
+}
+
+.boxselector_wrapper input[type='radio']:not(:disabled) + label,
+.box-selector-item input[type='radio']:not(:disabled) + label {
+  background: var(--ui-gray-2);
+  color: var(--black-color) !important;
+  border-radius: 8px;
+  border-color: var(--ui-gray-5);
+  padding: 15px;
+  box-shadow: none;
+}
+
+.row.header {
+  background-color: var(--bg-body-color) !important;
+  margin-bottom: 5px !important;
+}

app/react/components/BoxSelector/BoxSelector.module.css

@@ -1,3 +1,4 @@
 .root {
   width: 100%;
+  overflow: auto;
 }

app/react/components/BoxSelector/BoxSelectorItem.css

@@ -24,6 +24,8 @@
 .boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
   cursor: pointer;
   background-color: var(--bg-boxselector-wrapper-disabled-color);
+  text-align: left;
+  height: 100%;
 }
 
 .boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover {
@@ -38,7 +40,7 @@
   border: 1px solid var(--border-boxselector-color);
   border-radius: 2px;
   padding: 10px 10px 0 10px;
-  text-align: center;
+  text-align: left;
   box-shadow: var(--shadow-boxselector-color);
   position: relative;
 }
@@ -52,31 +54,30 @@
   pointer-events: none;
 }
 
-.boxselector_wrapper input[type='radio']:checked + label {
+.boxselector_wrapper input[type='radio']:checked + label,
-  background: var(--selected-item-color);
+.box-selector-item input[type='radio']:checked + label {
   color: white;
-  padding-top: 20px;
+  background-image: url(../../../assets/ico/checked.svg);
+  background-repeat: no-repeat;
+  background-position: right 15px top 15px;
   border-color: var(--selected-item-color);
 }
 
-.boxselector_wrapper input[type='radio']:checked + label::after {
+.box-selector-item input[type='radio']:checked:disabled + label {
+  color: #787878;
+}
+
+.boxselector_wrapper input[type='radio']:checked + label .box_selector_mask_icon {
   color: var(--selected-item-color);
-  font-family: 'Font Awesome 5 Free';
+}
-  border: 2px solid var(--selected-item-color);
+
-  content: '\f00c';
+:root[theme='highcontrast'] .box_selector_mask_icon,
-  font-size: 16px;
+:root[theme='dark'] .box_selector_mask_icon {
-  font-weight: bold;
+  color: var(--bg-boxselector-wrapper-disabled-color);
-  position: absolute;
+}
-  top: -15px;
+
-  left: 50%;
+.box_selector_mask_icon {
-  transform: translateX(-50%);
+  color: var(--bg-boxselector-color);
-  height: 30px;
-  width: 30px;
-  line-height: 26px;
-  text-align: center;
-  border-radius: 50%;
-  background: white;
-  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
 }
 
 @media only screen and (max-width: 700px) {
@@ -110,3 +111,23 @@
 .box-selector-item.limited.business :checked + label {
   color: initial;
 }
+
+.boxselector_img_container {
+  width: 100%;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.boxselector_img {
+  height: 48px;
+  width: 48px;
+  left: 5px;
+}
+
+.boxselector_icon,
+.boxselector_icon img {
+  height: 48px;
+  width: 48px;
+  color: var(--ui-blue-4);
+  font-size: 48px;
+}

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -49,19 +49,19 @@ export function BoxSelectorItem<T extends number | string>({
         disabled={disabled}
         onChange={() => onChange(option.value, limitedToBE)}
       />
+
       <label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
         {limitedToBE && <i className="fas fa-briefcase limited-icon" />}
-
+        <div className="boxselector_img_container">
-        <div className="boxselector_header">
           {!!option.icon && (
             <Icon
               icon={option.icon}
               feather={option.featherIcon}
-              className="space-right"
+              className="boxselector_icon space-right"
             />
           )}
-          {option.label}
         </div>
+        <div className="boxselector_header">{option.label}</div>
 
         <p className="box-selector-item-description">{option.description}</p>
       </label>

app/react/components/BoxSelector/types.ts

@@ -1,9 +1,9 @@
 import type { FeatureId } from '@/portainer/feature-flags/enums';
 
-export interface BoxSelectorOption<T> {
+import { IconProps } from '@@/Icon';
+
+export interface BoxSelectorOption<T> extends IconProps {
   id: string;
-  icon: string;
-  featherIcon?: boolean;
   label: string;
   description: string;
   value: T;

app/react/components/PageHeader/HeaderTitle.module.css

@@ -3,6 +3,8 @@
   font-size: 17px;
   background: none;
   margin-right: 15px;
+  display: flex;
+  align-items: center;
 }
 
 .menu-list {
@@ -23,6 +25,13 @@
   font-size: 14px;
   color: var(--text-dropdown-menu-color);
   text-decoration: none !important;
+  border-radius: 5px;
+}
+
+.arrow-down {
+  width: 18px;
+  height: 18px;
+  margin-left: 10px;
 }
 
 .menu-link:hover {

app/react/components/PageHeader/HeaderTitle.tsx

@@ -28,9 +28,9 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
       <span className="header_title_content">{children}</span>
       <Menu>
         <MenuButton className={clsx('pull-right', styles.menuButton)}>
-          <User className="feather" />
+          <User className="icon-nested-gray" />
           {user && <span>{user.Username}</span>}
-          <ChevronDown className="feather" />
+          <ChevronDown className={styles.arrowDown} />
         </MenuButton>
 
         <MenuList className={styles.menuList}>

app/react/components/PageHeader/PageHeader.tsx

@@ -33,6 +33,9 @@ export function PageHeader({
 
   return (
     <HeaderContainer>
+      <HeaderContent>
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </HeaderContent>
       <HeaderTitle title={title}>
         {reload && (
           <Button
@@ -46,9 +49,6 @@ export function PageHeader({
           </Button>
         )}
       </HeaderTitle>
-      <HeaderContent>
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-      </HeaderContent>
     </HeaderContainer>
   );
 }

app/react/components/buttons/Button.tsx

@@ -7,6 +7,7 @@ type Type = 'submit' | 'button' | 'reset';
 type Color =
   | 'default'
   | 'primary'
+  | 'secondary'
   | 'success'
   | 'warning'
   | 'danger'

app/react/components/form-components/ReactSelect.module.css

@@ -30,16 +30,17 @@
 .root :global .selector__menu {
   background-color: var(--bg-multiselect-color);
   border: 1px solid var(--border-multiselect);
+  padding: 5px;
 }
 
 .root :global .selector__option {
   background-color: var(--bg-multiselect-color);
-  border: 1px solid var(--border-multiselect);
+  border-radius: 5px;
 }
 
 .root :global .selector__option:active,
 .root :global .selector__option--is-focused {
-  background-color: var(--blue-8);
+  background-color: var(--ui-gray-3);
 }
 
 :global :root[theme='dark'] :local .root :global .selector__option:active,