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

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

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 {
-  background: var(--selected-item-color);
+.boxselector_wrapper input[type='radio']:checked + label,
+.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';
-  font-size: 16px;
-  font-weight: bold;
-  position: absolute;
-  top: -15px;
-  left: 50%;
-  transform: translateX(-50%);
-  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);
+}
+
+:root[theme='highcontrast'] .box_selector_mask_icon,
+:root[theme='dark'] .box_selector_mask_icon {
+  color: var(--bg-boxselector-wrapper-disabled-color);
+}
+
+.box_selector_mask_icon {
+  color: var(--bg-boxselector-color);
 }
 
 @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_header">
+        <div className="boxselector_img_container">
           {!!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,