fix(ui): box-selector fixes [EE-3949] (#7489)

app/portainer/access-control/EditDetails/EditDetails.tsx

@@ -47,16 +47,12 @@ export function EditDetails({
 
   return (
     <>
-      <div className="form-group">
-        <div className="col-sm-12">
-          <BoxSelector
-            radioName={withNamespace('ownership')}
-            value={values.ownership}
-            options={options}
-            onChange={(ownership) => handleChangeOwnership(ownership)}
-          />
-        </div>
-      </div>
+      <BoxSelector
+        radioName={withNamespace('ownership')}
+        value={values.ownership}
+        options={options}
+        onChange={(ownership) => handleChangeOwnership(ownership)}
+      />
 
       {values.ownership === ResourceControlOwnership.RESTRICTED && (
         <div aria-label="extra-options">

app/portainer/access-control/EditDetails/useOptions.tsx

@@ -6,6 +6,7 @@ import { ownershipIcon } from '@/portainer/filters/filters';
 import { Team } from '@/portainer/teams/types';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 import { ResourceControlOwnership } from '../types';
 
@@ -15,7 +16,7 @@ const publicOption: BoxSelectorOption<ResourceControlOwnership> = {
   id: 'access_public',
   description:
     'I want any user with access to this environment to be able to manage this resource',
-  icon: ownershipIcon('public'),
+  icon: <BadgeIcon icon={ownershipIcon('public')} />,
 };
 
 export function useOptions(
@@ -40,14 +41,14 @@ function adminOptions() {
   return [
     buildOption(
       'access_administrators',
-      ownershipIcon('administrators'),
+      <BadgeIcon icon={ownershipIcon('administrators')} />,
       'Administrators',
       'I want to restrict the management of this resource to administrators only',
       ResourceControlOwnership.ADMINISTRATORS
     ),
     buildOption(
       'access_restricted',
-      ownershipIcon('restricted'),
+      <BadgeIcon icon={ownershipIcon('restricted')} />,
       'Restricted',
       'I want to restrict the management of this resource to a set of users and/or teams',
       ResourceControlOwnership.RESTRICTED
@@ -58,7 +59,7 @@ function nonAdminOptions(teams?: Team[]) {
   return _.compact([
     buildOption(
       'access_private',
-      ownershipIcon('private'),
+      <BadgeIcon icon={ownershipIcon('private')} />,
       'Private',
       'I want to this resource to be manageable by myself only',
       ResourceControlOwnership.PRIVATE
@@ -67,7 +68,7 @@ function nonAdminOptions(teams?: Team[]) {
       teams.length > 0 &&
       buildOption(
         'access_restricted',
-        ownershipIcon('restricted'),
+        <BadgeIcon icon={ownershipIcon('restricted')} />,
         'Restricted',
         teams.length === 1
           ? `I want any member of my team (${teams[0].Name})  to be able to manage this resource`

app/portainer/components/BoxSelector/utils.ts

@@ -1,15 +1,16 @@
 import { FeatureId } from '@/portainer/feature-flags/enums';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
+import { IconProps } from '@@/Icon';
 
 export function buildOption<T extends number | string>(
   id: string,
-  icon: string,
+  icon: IconProps['icon'],
   label: string,
   description: string,
   value: T,
   feature?: FeatureId,
-  featherIcon?: boolean
+  featherIcon?: IconProps['featherIcon']
 ): BoxSelectorOption<T> {
   return { id, icon, label, description, value, feature, featherIcon };
 }

app/portainer/components/accessControlForm/porAccessControlForm.html

@@ -15,51 +15,54 @@
   </div>
   <!-- !access-control-switch -->
   <!-- restricted-access -->
-  <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled" style="margin-bottom: 0">
-    <div class="boxselector_wrapper px-[15px]">
-      <div ng-if="$ctrl.isAdmin">
-        <input type="radio" id="access_administrators" ng-model="$ctrl.formData.Ownership" value="administrators" />
-        <label for="access_administrators" data-cy="portainer-selectAdminAccess">
-          <div class="boxselector_header">
-            <pr-icon icon="'eye-off'" feather="true"></pr-icon>
-            Administrators
-          </div>
-          <p class="boxselector_content">I want to restrict the management of this resource to administrators only</p>
-        </label>
-      </div>
-      <div ng-if="$ctrl.isAdmin">
-        <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
-        <label for="access_restricted" data-cy="portainer-selectRestrictedAccess">
-          <div class="boxselector_header">
-            <pr-icon icon="'users'" feather="true"></pr-icon>
-            Restricted
-          </div>
-          <p class="boxselector_content"> I want to restrict the management of this resource to a set of users and/or teams </p>
-        </label>
-      </div>
-      <div ng-if="!$ctrl.isAdmin">
-        <input type="radio" id="access_private" ng-model="$ctrl.formData.Ownership" value="private" />
-        <label for="access_private">
-          <div class="boxselector_header">
-            <i ng-class="'private' | ownershipicon" aria-hidden="true" style="margin-right: 2px"></i>
-            Private
-          </div>
-          <p> I want to this resource to be manageable by myself only </p>
-        </label>
-      </div>
-      <div ng-if="!$ctrl.isAdmin && $ctrl.availableTeams.length > 0">
-        <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
-        <label for="access_restricted">
-          <div class="boxselector_header">
-            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px"></i>
-            Restricted
-          </div>
-          <p ng-if="$ctrl.availableTeams.length === 1">
-            I want any member of my team (<b>{{ $ctrl.availableTeams[0].Name }}</b
-            >) to be able to manage this resource
-          </p>
-          <p ng-if="$ctrl.availableTeams.length > 1"> I want to restrict the management of this resource to one or more of my teams </p>
-        </label>
+  <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled">
+    <div class="col-sm-12">
+      <div class="boxselector_wrapper">
+        <div ng-if="$ctrl.isAdmin">
+          <input type="radio" id="access_administrators" ng-model="$ctrl.formData.Ownership" value="administrators" />
+          <label for="access_administrators" data-cy="portainer-selectAdminAccess">
+            <div class="boxselector_header">
+              <pr-icon icon="'eye-off'" feather="true"></pr-icon>
+              Administrators
+            </div>
+            <p class="boxselector_content">I want to restrict the management of this resource to administrators only</p>
+          </label>
+        </div>
+        <div ng-if="$ctrl.isAdmin">
+          <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
+          <label for="access_restricted" data-cy="portainer-selectRestrictedAccess">
+            <div class="boxselector_header">
+              <pr-icon icon="'users'" feather="true"></pr-icon>
+              Restricted
+            </div>
+            <p class="boxselector_content"> I want to restrict the management of this resource to a set of users and/or teams </p>
+          </label>
+        </div>
+        <div ng-if="!$ctrl.isAdmin">
+          <input type="radio" id="access_private" ng-model="$ctrl.formData.Ownership" value="private" />
+          <label for="access_private">
+            <div class="boxselector_header">
+              <pr-icon icon="'eye-off'" feather="true"></pr-icon>
+              Private
+            </div>
+            <p> I want to this resource to be manageable by myself only </p>
+          </label>
+        </div>
+        <div ng-if="!$ctrl.isAdmin && $ctrl.availableTeams.length > 0">
+          <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
+          <label for="access_restricted">
+            <div class="boxselector_header">
+              <pr-icon icon="'users'" feather="true"></pr-icon>
+
+              Restricted
+            </div>
+            <p ng-if="$ctrl.availableTeams.length === 1">
+              I want any member of my team (<b>{{ $ctrl.availableTeams[0].Name }}</b
+              >) to be able to manage this resource
+            </p>
+            <p ng-if="$ctrl.availableTeams.length > 1"> I want to restrict the management of this resource to one or more of my teams </p>
+          </label>
+        </div>
       </div>
     </div>
   </div>

app/portainer/components/endpointSecurity/porEndpointSecurity.html

@@ -24,47 +24,49 @@
   </div>
   <div class="form-group"></div>
   <!-- endpoint-tls-mode -->
-  <div class="form-group" style="margin-bottom: 0" ng-if="$ctrl.formData.TLS">
-    <div class="boxselector_wrapper">
-      <div>
-        <input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca" />
-        <label for="tls_client_ca">
-          <div class="boxselector_header">
-            <pr-icon icon="'shield'" feather="true"></pr-icon>
-            TLS with server and client verification
-          </div>
-          <p>Use client certificates and server verification</p>
-        </label>
-      </div>
-      <div>
-        <input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca" />
-        <label for="tls_client_noca">
-          <div class="boxselector_header">
-            <pr-icon icon="'shield'" feather="true"></pr-icon>
-            TLS with client verification only
-          </div>
-          <p>Use client certificates without server verification</p>
-        </label>
-      </div>
-      <div>
-        <input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca" />
-        <label for="tls_ca">
-          <div class="boxselector_header">
-            <pr-icon icon="'shield'" feather="true"></pr-icon>
-            TLS with server verification only
-          </div>
-          <p>Only verify the server certificate</p>
-        </label>
-      </div>
-      <div>
-        <input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only" />
-        <label for="tls_only">
-          <div class="boxselector_header">
-            <pr-icon icon="'shield'" feather="true"></pr-icon>
-            TLS only
-          </div>
-          <p>No server/client verification</p>
-        </label>
+  <div class="form-group" ng-if="$ctrl.formData.TLS">
+    <div class="col-sm-12">
+      <div class="boxselector_wrapper">
+        <div>
+          <input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca" />
+          <label for="tls_client_ca">
+            <div class="boxselector_header">
+              <pr-icon icon="'shield'" feather="true"></pr-icon>
+              TLS with server and client verification
+            </div>
+            <p>Use client certificates and server verification</p>
+          </label>
+        </div>
+        <div>
+          <input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca" />
+          <label for="tls_client_noca">
+            <div class="boxselector_header">
+              <pr-icon icon="'shield'" feather="true"></pr-icon>
+              TLS with client verification only
+            </div>
+            <p>Use client certificates without server verification</p>
+          </label>
+        </div>
+        <div>
+          <input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca" />
+          <label for="tls_ca">
+            <div class="boxselector_header">
+              <pr-icon icon="'shield'" feather="true"></pr-icon>
+              TLS with server verification only
+            </div>
+            <p>Only verify the server certificate</p>
+          </label>
+        </div>
+        <div>
+          <input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only" />
+          <label for="tls_only">
+            <div class="boxselector_header">
+              <pr-icon icon="'shield'" feather="true"></pr-icon>
+              TLS only
+            </div>
+            <p>No server/client verification</p>
+          </label>
+        </div>
       </div>
     </div>
   </div>

app/portainer/components/theme/theme-settings.html

@@ -2,10 +2,8 @@
   <rd-widget>
     <rd-widget-header icon="sliders" feather-icon="true" title-text="User theme"></rd-widget-header>
     <rd-widget-body>
-      <form class="theme-panel">
-        <!-- Theme Selector-->
+      <form class="form-horizontal">
         <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
-        <!-- !Theme -->
       </form>
       <p class="mt-2 vertical-center">
         <pr-icon icon="'alert-circle'" class-name="'icon-primary'" feather="true"></pr-icon>

app/portainer/filters/filters.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import _ from 'lodash-es';
 import filesize from 'filesize';
 
+import { Eye, EyeOff, Users } from 'react-feather';
 import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
 
 export function truncateLeftRight(text, max, left, right) {
@@ -106,13 +107,13 @@ export function environmentTypeIcon(type) {
 export function ownershipIcon(ownership) {
   switch (ownership) {
     case RCO.PRIVATE:
-      return 'eye-off';
+      return EyeOff;
     case RCO.ADMINISTRATORS:
-      return 'eye-off';
+      return EyeOff;
     case RCO.RESTRICTED:
-      return 'users';
+      return Users;
     default:
-      return 'eye';
+      return Eye;
   }
 }
 

app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx

@@ -1,8 +1,11 @@
+import { Edit } from 'react-feather';
+
 import { FeatureId } from '@/portainer/feature-flags/enums';
 import Microsoft from '@/assets/ico/vendor/microsoft.svg?c';
 import Google from '@/assets/ico/vendor/google.svg?c';
 import Github from '@/assets/ico/vendor/github.svg?c';
-import Custom from '@/assets/ico/custom.svg?c';
+
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 export const options = [
   {
@@ -32,7 +35,7 @@ export const options = [
   },
   {
     id: 'custom',
-    icon: Custom,
+    icon: <BadgeIcon icon={Edit} />,
     label: 'Custom',
     description: 'Custom OAuth provider',
     value: 'custom',

app/portainer/react/components/index.ts

@@ -15,6 +15,7 @@ import { TableColumnHeaderAngular } from '@@/datatables/TableHeaderCell';
 import { DashboardItem } from '@@/DashboardItem';
 import { SearchBar } from '@@/datatables/SearchBar';
 import { FallbackImage } from '@@/FallbackImage';
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -83,4 +84,8 @@ export const componentsModule = angular
   .component(
     'datatableSearchbar',
     r2a(SearchBar, ['data-cy', 'onChange', 'value', 'placeholder'])
+  )
+  .component(
+    'boxSelectorBadgeIcon',
+    react2angular(BadgeIcon, ['featherIcon', 'icon'])
   ).name;

app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx

@@ -1,6 +1,9 @@
+import { Edit } from 'react-feather';
+
 import { FeatureId } from '@/portainer/feature-flags/enums';
 import Openldap from '@/assets/ico/vendor/openldap.svg?c';
-import Custom from '@/assets/ico/custom.svg?c';
+
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 const SERVER_TYPES = {
   CUSTOM: 0,
@@ -11,7 +14,7 @@ const SERVER_TYPES = {
 export const options = [
   {
     id: 'ldap_custom',
-    icon: Custom,
+    icon: <BadgeIcon icon={Edit} />,
     label: 'Custom',
     value: SERVER_TYPES.CUSTOM,
   },

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -15,38 +15,39 @@
           <!-- build-method -->
           <div ng-if="!$ctrl.state.fromStack">
             <div class="col-sm-12 form-section-title"> Build method </div>
-            <div class="form-group"></div>
-            <div class="form-group mb-0">
-              <div class="boxselector_wrapper">
-                <div>
-                  <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
-                  <label for="method_editor">
-                    <div class="boxselector_header">
-                      <pr-icon icon="'edit'" feather="true"></pr-icon>
-                      Web editor
-                    </div>
-                    <p>Use our Web editor</p>
-                  </label>
-                </div>
-                <div>
-                  <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
-                  <label for="method_upload">
-                    <div class="boxselector_header">
-                      <pr-icon icon="'upload'" feather="true"></pr-icon>
-                      Upload
-                    </div>
-                    <p>Upload from your computer</p>
-                  </label>
-                </div>
-                <div>
-                  <input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
-                  <label for="method_repository">
-                    <div class="boxselector_header">
-                      <pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
-                      Repository
-                    </div>
-                    <p>Use a git repository</p>
-                  </label>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <div class="boxselector_wrapper">
+                  <div>
+                    <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
+                    <label for="method_editor">
+                      <div class="boxselector_header">
+                        <pr-icon icon="'edit'" feather="true"></pr-icon>
+                        Web editor
+                      </div>
+                      <p>Use our Web editor</p>
+                    </label>
+                  </div>
+                  <div>
+                    <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
+                    <label for="method_upload">
+                      <div class="boxselector_header">
+                        <pr-icon icon="'upload'" feather="true"></pr-icon>
+                        Upload
+                      </div>
+                      <p>Upload from your computer</p>
+                    </label>
+                  </div>
+                  <div>
+                    <input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
+                    <label for="method_repository">
+                      <div class="boxselector_header">
+                        <pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
+                        Repository
+                      </div>
+                      <p>Use a git repository</p>
+                    </label>
+                  </div>
                 </div>
               </div>
             </div>

app/portainer/views/devices/profiles/add/addProfile.html

@@ -16,18 +16,19 @@
           <!-- !name-input -->
           <!-- build-method -->
           <div class="col-sm-12 form-section-title"> Profile configuration </div>
-          <div class="form-group"></div>
-          <div class="form-group" style="margin-bottom: 0">
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="method_editor" ng-model="state.method" value="editor" />
-                <label for="method_editor">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'edit'" feather="true"></pr-icon>
-                    Web editor
-                  </div>
-                  <p>Use our Web editor</p>
-                </label>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <div class="boxselector_wrapper">
+                <div>
+                  <input type="radio" id="method_editor" ng-model="state.method" value="editor" />
+                  <label for="method_editor">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'edit'" feather="true"></pr-icon>
+                      Web editor
+                    </div>
+                    <p>Use our Web editor</p>
+                  </label>
+                </div>
               </div>
             </div>
           </div>

app/portainer/views/devices/profiles/edit/editProfile.html

@@ -17,17 +17,19 @@
           <!-- build-method -->
           <div class="col-sm-12 form-section-title"> Profile configuration </div>
           <div class="form-group"></div>
-          <div class="form-group" style="margin-bottom: 0">
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="method_editor" ng-model="state.method" value="editor" />
-                <label for="method_editor">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'edit'" feather="true"></pr-icon>
-                    Web editor
-                  </div>
-                  <p>Use our Web editor</p>
-                </label>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <div class="boxselector_wrapper">
+                <div>
+                  <input type="radio" id="method_editor" ng-model="state.method" value="editor" />
+                  <label for="method_editor">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'edit'" feather="true"></pr-icon>
+                      Web editor
+                    </div>
+                    <p>Use our Web editor</p>
+                  </label>
+                </div>
               </div>
             </div>
           </div>

app/portainer/views/init/admin/initAdmin.html

@@ -138,29 +138,33 @@
               </div>
             </div>
             <!-- !note -->
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="restore_file" checked="checked" />
-                <label for="restore_file" data-cy="init-selectLocalFile">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'upload'" feather="true"></pr-icon>
-                    Upload backup file
+            <div class="form-group">
+              <div class="col-sm-12">
+                <div class="boxselector_wrapper">
+                  <div>
+                    <input type="radio" id="restore_file" checked="checked" />
+                    <label for="restore_file" data-cy="init-selectLocalFile">
+                      <div class="boxselector_header">
+                        <pr-icon icon="'upload'" feather="true"></pr-icon>
+                        Upload backup file
+                      </div>
+                      <p></p>
+                    </label>
                   </div>
-                  <p></p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="restore_s3" disabled />
-                <label for="restore_s3" class="boxselector_disabled">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'download'" feather="true"></pr-icon>
-                    Retrieve from S3
+                  <div>
+                    <input type="radio" id="restore_s3" disabled />
+                    <label for="restore_s3" class="boxselector_disabled">
+                      <div class="boxselector_header">
+                        <pr-icon icon="'download'" feather="true"></pr-icon>
+                        Retrieve from S3
+                      </div>
+                      <p
+                        >This feature is available in
+                        <a class="hyperlink" href="https://www.portainer.io/business-upsell?from=restore-s3-form" target="_blank"> Portainer Business Edition</a></p
+                      >
+                    </label>
                   </div>
-                  <p
-                    >This feature is available in
-                    <a class="hyperlink" href="https://www.portainer.io/business-upsell?from=restore-s3-form" target="_blank"> Portainer Business Edition</a></p
-                  >
-                </label>
+                </div>
               </div>
             </div>
             <!-- note -->

app/portainer/views/init/endpoint/initEndpoint.html

@@ -21,17 +21,19 @@
             </div>
             <!-- !note -->
             <!-- environment-type -->
-            <div class="form-group" style="margin-bottom: 0">
-              <div class="boxselector_wrapper">
-                <div ng-repeat="type in ctrl.endpointSections">
-                  <input type="radio" id="{{ type.Id }}" ng-model="ctrl.formValues.ConnectionType" ng-value="type.Value" />
-                  <label for="{{ type.Id }}">
-                    <div class="boxselector_header">
-                      <i ng-class="type.Classes" aria-hidden="true" style="margin-right: 2px"></i>
-                      {{ type.Title }}
-                    </div>
-                    <p>{{ type.Description }}</p>
-                  </label>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <div class="boxselector_wrapper">
+                  <div ng-repeat="type in ctrl.endpointSections">
+                    <input type="radio" id="{{ type.Id }}" ng-model="ctrl.formValues.ConnectionType" ng-value="type.Value" />
+                    <label for="{{ type.Id }}">
+                      <div class="boxselector_header">
+                        <i ng-class="type.Classes" aria-hidden="true" style="margin-right: 2px"></i>
+                        {{ type.Title }}
+                      </div>
+                      <p>{{ type.Description }}</p>
+                    </label>
+                  </div>
                 </div>
               </div>
             </div>

app/portainer/views/registries/create/createRegistry.html

@@ -7,11 +7,7 @@
         <form class="form-horizontal">
           <div class="col-sm-12 form-section-title"> Registry provider </div>
 
-          <div class="form-group"></div>
-
-          <div class="form-group" style="margin-bottom: 0">
-            <box-selector radio-name="'registry'" value="$ctrl.state.registryValue" options="$ctrl.state.availableRegistry" on-change="($ctrl.setRegistry)"></box-selector>
-          </div>
+          <box-selector radio-name="'availableRegistry'" value="$ctrl.state.registryValue" options="$ctrl.state.availableRegistry" on-change="($ctrl.setRegistry)"></box-selector>
 
           <registry-form-quay
             ng-if="$ctrl.model.Type === $ctrl.RegistryTypes.QUAY"

app/portainer/views/registries/create/options.tsx

@@ -1,10 +1,13 @@
+import { Edit } from 'react-feather';
+
 import Docker from '@/assets/ico/vendor/docker.svg?c';
 import Ecr from '@/assets/ico/vendor/ecr.svg?c';
 import Quay from '@/assets/ico/vendor/quay.svg?c';
 import Proget from '@/assets/ico/vendor/proget.svg?c';
 import Azure from '@/assets/ico/vendor/azure.svg?c';
 import Gitlab from '@/assets/ico/vendor/gitlab.svg?c';
-import Custom from '@/assets/ico/custom.svg?c';
+
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 export const options = [
   {
@@ -51,7 +54,7 @@ export const options = [
   },
   {
     id: 'registry_custom',
-    icon: Custom,
+    icon: <BadgeIcon icon={Edit} />,
     label: 'Custom registry',
     description: 'Define your own registry',
     value: '3',

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

@@ -1,12 +1,16 @@
+import { ArrowDownCircle } from 'react-feather';
+
 import { FeatureId } from '@/portainer/feature-flags/enums';
 import Microsoft from '@/assets/ico/vendor/microsoft.svg?c';
 import Ldap from '@/assets/ico/ldap.svg?c';
-import Oauth from '@/assets/ico/oauth.svg?c';
+import OAuth from '@/assets/ico/oauth.svg?c';
+
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
 
 export const options = [
   {
     id: 'auth_internal',
-    icon: 'svg-internal',
+    icon: <BadgeIcon icon={ArrowDownCircle} />,
     label: 'Internal',
     description: 'Internal authentication mechanism',
     value: 1,
@@ -28,7 +32,7 @@ export const options = [
   },
   {
     id: 'auth_oauth',
-    icon: Oauth,
+    icon: OAuth,
     label: 'OAuth',
     description: 'OAuth authentication',
     value: 3,

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

@@ -29,6 +29,7 @@
           </div>
 
           <div class="col-sm-12 form-section-title"> Authentication method </div>
+
           <box-selector radio-name="'authOptions'" value="authMethod" options="authOptions" on-change="(onChangeAuthMethod)"></box-selector>
 
           <internal-auth

app/portainer/views/settings/options.tsx

@@ -1,16 +1,20 @@
+import { DownloadCloud, UploadCloud } from 'react-feather';
+
 import { FeatureId } from '@/portainer/feature-flags/enums';
 
+import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
+
 export const options = [
   {
     id: 'backup_file',
-    icon: 'download',
+    icon: <BadgeIcon icon={DownloadCloud} />,
     featherIcon: true,
     label: 'Download backup file',
     value: 'file',
   },
   {
     id: 'backup_s3',
-    icon: 'upload',
+    icon: <BadgeIcon icon={UploadCloud} />,
     featherIcon: true,
     label: 'Store in S3',
     description: 'Define a cron schedule',

app/portainer/views/settings/settings.html

@@ -209,7 +209,9 @@
       <rd-widget-body>
         <form class="form-horizontal" ng-submit="backupPortainer()" name="backupPortainerForm">
           <div class="col-sm-12 form-section-title"> Backup configuration </div>
+
           <box-selector options="backupOptions" value="formValues.backupFormType" on-change="(onBackupOptionsChange)" radio-name="'backupOptions'"></box-selector>
+
           <div ng-if="formValues.backupFormType === BACKUP_FORM_TYPES.S3">
             <!-- Schedule automatic backups -->
             <div class="form-group mt-3">

app/portainer/views/stacks/create/createstack.html

@@ -49,48 +49,49 @@
           </div>
           <!-- build-method -->
           <div class="col-sm-12 form-section-title"> Build method </div>
-          <div class="form-group"></div>
-          <div class="form-group" style="margin-bottom: 0">
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" />
-                <label for="method_editor">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'edit'" feather="true"></pr-icon>
-                    Web editor
-                  </div>
-                  <p>Use our Web editor</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" />
-                <label for="method_upload">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'upload'" feather="true"></pr-icon>
-                    Upload
-                  </div>
-                  <p>Upload from your computer</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" />
-                <label for="method_repository">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
-                    Repository
-                  </div>
-                  <p>Use a git repository</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="method_template" ng-model="state.Method" value="template" />
-                <label for="method_template">
-                  <div class="boxselector_header">
-                    <pr-icon icon="'edit'" feather="true"></pr-icon>
-                    Custom template
-                  </div>
-                  <p>Use a custom template</p>
-                </label>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <div class="boxselector_wrapper">
+                <div>
+                  <input type="radio" id="method_editor" ng-model="state.Method" value="editor" />
+                  <label for="method_editor">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'edit'" feather="true"></pr-icon>
+                      Web editor
+                    </div>
+                    <p>Use our Web editor</p>
+                  </label>
+                </div>
+                <div>
+                  <input type="radio" id="method_upload" ng-model="state.Method" value="upload" />
+                  <label for="method_upload">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'upload'" feather="true"></pr-icon>
+                      Upload
+                    </div>
+                    <p>Upload from your computer</p>
+                  </label>
+                </div>
+                <div>
+                  <input type="radio" id="method_repository" ng-model="state.Method" value="repository" />
+                  <label for="method_repository">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
+                      Repository
+                    </div>
+                    <p>Use a git repository</p>
+                  </label>
+                </div>
+                <div>
+                  <input type="radio" id="method_template" ng-model="state.Method" value="template" />
+                  <label for="method_template">
+                    <div class="boxselector_header">
+                      <pr-icon icon="'edit'" feather="true"></pr-icon>
+                      Custom template
+                    </div>
+                    <p>Use a custom template</p>
+                  </label>
+                </div>
               </div>
             </div>
           </div>