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

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

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
-                        className="fa fa-sync space-right"
+                      <RefreshCcw
+                        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}>
-        <i className="fas fa-download space-right" /> kubeconfig
+      <Button className={styles.kubeconfigButton} onClick={handleClick}>
+        <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 = [
-    { 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.authOptions = options;
 
   $scope.onChangeAuthMethod = function onChangeAuthMethod(value) {
     $scope.authMethod = value;

app/portainer/views/templates/templates.html

@@ -1,11 +1,4 @@
-<rd-header id="view-top">
-  <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>
+<page-header title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
 
 <div class="row">
   <!-- stack-form -->