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;