From 203332934274d31bb060159627dad85a6f66ff0a Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sbx.pm>
Date: Mon, 20 Jun 2022 15:35:38 +0200
Subject: [PATCH] linted all front code, excepted profile-completion/ and
 prrofile-custom-fields/

---
 .eslintrc                                     |  2 +-
 .../oauth2-data-mapping-form.tsx              |  4 ++++
 .../openid-connect-data-mapping-form.tsx      |  4 ++++
 .../openid-connect-form.tsx                   |  3 +++
 .../components/base/text-editor/menu-bar.tsx  |  4 ++--
 .../components/events/event-card.tsx          |  3 +++
 .../components/group/change-group.tsx         |  3 +++
 .../components/machines/machine-card.tsx      |  7 +++++--
 .../components/machines/machines-filters.tsx  |  3 +++
 .../components/machines/reserve-button.tsx    | 14 ++++++++------
 .../payment-schedules-table.tsx               |  3 +++
 .../update-payment-mean-modal.tsx             |  3 +++
 .../components/payment/card-payment-modal.tsx | 10 ++++++----
 .../local-payment/local-payment-modal.tsx     | 10 ++++++----
 .../payzen/payzen-card-update-modal.tsx       |  3 +++
 .../components/payment/payzen/payzen-form.tsx |  5 ++++-
 .../payment/payzen/payzen-keys-form.tsx       |  8 +++++---
 .../stripe/stripe-card-update-modal.tsx       |  5 ++++-
 .../payment/stripe/stripe-keys-form.tsx       |  8 +++++---
 .../payment/stripe/stripe-modal.tsx           |  2 +-
 .../components/payment/update-card-modal.tsx  |  8 +++++---
 .../plan-categories/delete-plan-category.tsx  |  8 +++++---
 .../plan-categories/manage-plan-category.tsx  | 10 ++++++----
 .../plan-categories/plan-category-form.tsx    | 11 ++++++++---
 .../components/plans/plans-filter.tsx         |  3 +++
 .../prepaid-packs/packs-summary.tsx           | 19 +++++++++++++------
 .../pricing/machines/delete-pack.tsx          |  8 +++++---
 .../profile-form-option.tsx                   |  7 +++++++
 .../components/settings/boolean-setting.tsx   |  8 ++++----
 .../settings/user-validation-setting.tsx      |  7 ++++---
 .../components/socials/edit-socials.tsx       | 10 ++++++++++
 .../components/socials/fab-socials.tsx        | 19 ++++++++++++++++---
 .../components/user/user-validation.tsx       |  7 ++++---
 .../src/javascript/typings/date-iso.d.ts      |  8 --------
 app/frontend/src/stylesheets/application.scss |  3 +++
 .../modules/base/fab-text-editor.scss         |  2 +-
 .../payzen/payzen-card-update-modal.scss      |  2 +-
 .../modules/payment/payzen/payzen-modal.scss  |  2 +-
 .../stripe/stripe-card-update-modal.scss      |  2 ++
 .../modules/payment/stripe/stripe-modal.scss  |  2 ++
 .../plan-categories/manage-plan-category.scss |  6 ++++++
 .../modules/prepaid-packs/packs-summary.scss  |  7 +++++++
 .../modules/settings/boolean-setting.scss     | 18 ++++++++++++++++++
 .../settings/user-validation-setting.scss     |  8 ++++++++
 .../modules/socials/fab-socials.scss          |  7 +++++++
 .../modules/user/user-validation.scss         | 11 +++++++++++
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++++----
 48 files changed, 238 insertions(+), 79 deletions(-)
 create mode 100644 app/frontend/src/stylesheets/modules/settings/boolean-setting.scss
 create mode 100644 app/frontend/src/stylesheets/modules/settings/user-validation-setting.scss
 create mode 100644 app/frontend/src/stylesheets/modules/socials/fab-socials.scss
 create mode 100644 app/frontend/src/stylesheets/modules/user/user-validation.scss

diff --git a/.eslintrc b/.eslintrc
index 089ae0a20..bd4107a0c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,7 +6,7 @@
   ],
   "rules": {
     "semi": ["error", "always"],
-    "no-use-before-define": "off",
+    "no-use-before-define": "off"
   },
   "globals": {
     "Application": true,
diff --git a/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
index 24ede2224..5fd93d8d2 100644
--- a/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
@@ -13,6 +13,10 @@ interface Oauth2DataMappingFormProps<TFieldValues, TContext extends object> {
   index: number,
 }
 
+/**
+ * Partial form to set the data mapping for an OAuth 2.0 provider.
+ * The data mapping is the way to bind data from the authentication provider API to the Fab-manager's database
+ */
 export const Oauth2DataMappingForm = <TFieldValues extends FieldValues, TContext extends object>({ register, control, index }: Oauth2DataMappingFormProps<TFieldValues, TContext>) => {
   const { t } = useTranslation('admin');
 
diff --git a/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
index 8a8eb410d..fad276dff 100644
--- a/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
@@ -16,6 +16,10 @@ interface OpenidConnectDataMappingFormProps<TFieldValues> {
   index: number,
 }
 
+/**
+ * Partial form to set the data mapping for an OpenID Connect provider.
+ * The data mapping is the way to bind data from the OIDC claims to the Fab-manager's database
+ */
 export const OpenidConnectDataMappingForm = <TFieldValues extends FieldValues>({ register, setValue, currentFormValues, index }: OpenidConnectDataMappingFormProps<TFieldValues>) => {
   const { t } = useTranslation('admin');
 
diff --git a/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx b/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
index af8e29231..28532652d 100644
--- a/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
@@ -20,6 +20,9 @@ interface OpenidConnectFormProps<TFieldValues, TContext extends object> {
   setValue: UseFormSetValue<TFieldValues>,
 }
 
+/**
+ * Partial form to fill the OpenID Connect (OIDC) settings for a new/existing authentication provider.
+ */
 export const OpenidConnectForm = <TFieldValues extends FieldValues, TContext extends object>({ register, control, currentFormValues, formState, setValue }: OpenidConnectFormProps<TFieldValues, TContext>) => {
   const { t } = useTranslation('admin');
 
diff --git a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
index b28c7e476..503b71323 100644
--- a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
@@ -168,7 +168,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
           >
             <Quotes size={24} />
           </button>
-          <span className='divider'></span>
+          <span className='menu-divider'></span>
         </>)
         }
         <button
@@ -203,7 +203,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
         >
           <LinkSimpleHorizontal size={24} />
         </button>
-        { (video || image) && <span className='divider'></span> }
+        { (video || image) && <span className='menu-divider'></span> }
         { video &&
         (<>
           <button
diff --git a/app/frontend/src/javascript/components/events/event-card.tsx b/app/frontend/src/javascript/components/events/event-card.tsx
index 12db5d72e..fc834976a 100644
--- a/app/frontend/src/javascript/components/events/event-card.tsx
+++ b/app/frontend/src/javascript/components/events/event-card.tsx
@@ -13,6 +13,9 @@ interface EventCardProps {
   cardType: 'sm' | 'md' | 'lg'
 }
 
+/**
+ * This component is a box showing the picture of the given event, and a short description of it.
+ */
 export const EventCard: React.FC<EventCardProps> = ({ event, cardType }) => {
   const { t } = useTranslation('public');
 
diff --git a/app/frontend/src/javascript/components/group/change-group.tsx b/app/frontend/src/javascript/components/group/change-group.tsx
index 21e5b74d6..3f4c42e34 100644
--- a/app/frontend/src/javascript/components/group/change-group.tsx
+++ b/app/frontend/src/javascript/components/group/change-group.tsx
@@ -30,6 +30,9 @@ interface ChangeGroupProps {
  */
 type selectOption = { value: number, label: string };
 
+/**
+ * Component to display the group of the provided user, and allow him to change his group.
+ */
 export const ChangeGroup: React.FC<ChangeGroupProps> = ({ user, onSuccess, onError, allowChange, className }) => {
   const { t } = useTranslation('shared');
 
diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx
index 6e87cf31a..10a360634 100644
--- a/app/frontend/src/javascript/components/machines/machine-card.tsx
+++ b/app/frontend/src/javascript/components/machines/machine-card.tsx
@@ -40,6 +40,9 @@ const MachineCard: React.FC<MachineCardProps> = ({ user, machine, onShowMachine,
     onShowMachine(machine);
   };
 
+  /**
+   * Return the machine's picture or a placeholder
+   */
   const machinePicture = (): ReactNode => {
     if (!machine.machine_image) {
       return <div className="machine-picture no-picture" />;
@@ -82,10 +85,10 @@ const MachineCard: React.FC<MachineCardProps> = ({ user, machine, onShowMachine,
   );
 };
 
-const MachineCardWrapper: React.FC<MachineCardProps> = ({ user, machine, onShowMachine, onReserveMachine, onError, onSuccess, onLoginRequested, onEnrollRequested, canProposePacks }) => {
+const MachineCardWrapper: React.FC<MachineCardProps> = (props) => {
   return (
     <Loader>
-      <MachineCard user={user} machine={machine} onShowMachine={onShowMachine} onReserveMachine={onReserveMachine} onError={onError} onSuccess={onSuccess} onLoginRequested={onLoginRequested} onEnrollRequested={onEnrollRequested} canProposePacks={canProposePacks} />
+      <MachineCard {...props} />
     </Loader>
   );
 };
diff --git a/app/frontend/src/javascript/components/machines/machines-filters.tsx b/app/frontend/src/javascript/components/machines/machines-filters.tsx
index 4176fe5fa..747050b41 100644
--- a/app/frontend/src/javascript/components/machines/machines-filters.tsx
+++ b/app/frontend/src/javascript/components/machines/machines-filters.tsx
@@ -12,6 +12,9 @@ interface MachinesFiltersProps {
  */
 type selectOption = { value: boolean, label: string };
 
+/**
+ * Allows filtering on machines list
+ */
 export const MachinesFilters: React.FC<MachinesFiltersProps> = ({ onStatusSelected }) => {
   const { t } = useTranslation('public');
 
diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx
index 1a0bb6bea..e0f68aaaf 100644
--- a/app/frontend/src/javascript/components/machines/reserve-button.tsx
+++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx
@@ -31,7 +31,7 @@ interface ReserveButtonProps {
 /**
  * Button component that makes the training verification before redirecting the user to the reservation calendar
  */
-const ReserveButtonComponent: React.FC<ReserveButtonProps> = ({ currentUser, machineId, onLoginRequested, onLoadingStart, onLoadingEnd, onError, onSuccess, onReserveMachine, onEnrollRequested, className, children, canProposePacks }) => {
+const ReserveButton: React.FC<ReserveButtonProps> = ({ currentUser, machineId, onLoginRequested, onLoadingStart, onLoadingEnd, onError, onSuccess, onReserveMachine, onEnrollRequested, className, children, canProposePacks }) => {
   const { t } = useTranslation('shared');
 
   const [machine, setMachine] = useState<Machine>(null);
@@ -183,14 +183,16 @@ const ReserveButtonComponent: React.FC<ReserveButtonProps> = ({ currentUser, mac
   );
 };
 
-export const ReserveButton: React.FC<ReserveButtonProps> = ({ currentUser, machineId, onLoginRequested, onLoadingStart, onLoadingEnd, onError, onSuccess, onReserveMachine, onEnrollRequested, className, children, canProposePacks }) => {
+const ReserveButtonWrapper: React.FC<ReserveButtonProps> = (props) => {
   return (
     <Loader>
-      <ReserveButtonComponent currentUser={currentUser} machineId={machineId} onError={onError} onSuccess={onSuccess} onLoadingStart={onLoadingStart} onLoadingEnd={onLoadingEnd} onReserveMachine={onReserveMachine} onLoginRequested={onLoginRequested} onEnrollRequested={onEnrollRequested} className={className} canProposePacks={canProposePacks}>
-        {children}
-      </ReserveButtonComponent>
+      <ReserveButton {...props}>
+        {props.children}
+      </ReserveButton>
     </Loader>
   );
 };
 
-Application.Components.component('reserveButton', react2angular(ReserveButton, ['currentUser', 'machineId', 'onLoadingStart', 'onLoadingEnd', 'onError', 'onSuccess', 'onReserveMachine', 'onLoginRequested', 'onEnrollRequested', 'className', 'canProposePacks']));
+export { ReserveButtonWrapper as ReserveButton };
+
+Application.Components.component('reserveButton', react2angular(ReserveButtonWrapper, ['currentUser', 'machineId', 'onLoadingStart', 'onLoadingEnd', 'onError', 'onSuccess', 'onReserveMachine', 'onLoginRequested', 'onEnrollRequested', 'className', 'canProposePacks']));
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
index 3236bf49b..e1e259f12 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
@@ -123,6 +123,9 @@ const PaymentSchedulesTable: React.FC<PaymentSchedulesTableProps> = ({ paymentSc
     refreshList();
   };
 
+  /**
+   * Return the JSX table element that list all payment schedules and allows to perform actions on them.
+   */
   const renderPaymentSchedulesTable = (): ReactElement => {
     return (
       <table className="payment-schedules-table">
diff --git a/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx b/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
index 20974e132..e051191b2 100644
--- a/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
@@ -19,6 +19,9 @@ interface UpdatePaymentMeanModalProps {
  */
 type selectOption = { value: PaymentMethod, label: string };
 
+/**
+ * Component to allow the member to change his payment mean for the given payment schedule (e.g. from card to transfer)
+ */
 export const UpdatePaymentMeanModal: React.FC<UpdatePaymentMeanModalProps> = ({ isOpen, toggleModal, onError, afterSuccess, paymentSchedule }) => {
   const { t } = useTranslation('admin');
 
diff --git a/app/frontend/src/javascript/components/payment/card-payment-modal.tsx b/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
index 00d8b95ef..cb6b5847b 100644
--- a/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
@@ -29,7 +29,7 @@ interface CardPaymentModalProps {
  * This component open a modal dialog for the configured payment gateway, allowing the user to input his card data
  * to process an online payment.
  */
-const CardPaymentModalComponent: React.FC<CardPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, currentUser, schedule, cart, customer }) => {
+const CardPaymentModal: React.FC<CardPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, currentUser, schedule, cart, customer }) => {
   const { t } = useTranslation('shared');
 
   const [gateway, setGateway] = useState<Setting>(null);
@@ -89,12 +89,14 @@ const CardPaymentModalComponent: React.FC<CardPaymentModalProps> = ({ isOpen, to
   }
 };
 
-export const CardPaymentModal: React.FC<CardPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, currentUser, schedule, cart, customer }) => {
+const CardPaymentModalWrapper: React.FC<CardPaymentModalProps> = (props) => {
   return (
     <Loader>
-      <CardPaymentModalComponent isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} onError={onError} currentUser={currentUser} schedule={schedule} cart={cart} customer={customer} />
+      <CardPaymentModal {...props} />
     </Loader>
   );
 };
 
-Application.Components.component('cardPaymentModal', react2angular(CardPaymentModal, ['isOpen', 'toggleModal', 'afterSuccess', 'onError', 'currentUser', 'schedule', 'cart', 'customer']));
+export { CardPaymentModalWrapper as CardPaymentModal };
+
+Application.Components.component('cardPaymentModal', react2angular(CardPaymentModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess', 'onError', 'currentUser', 'schedule', 'cart', 'customer']));
diff --git a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
index 4facd9dcf..242cc576b 100644
--- a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
@@ -28,7 +28,7 @@ interface LocalPaymentModalProps {
 /**
  * This component enables a privileged user to confirm a local payments.
  */
-const LocalPaymentModalComponent: React.FC<LocalPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, cart, updateCart, currentUser, schedule, customer }) => {
+const LocalPaymentModal: React.FC<LocalPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, cart, updateCart, currentUser, schedule, customer }) => {
   const { t } = useTranslation('admin');
 
   /**
@@ -93,12 +93,14 @@ const LocalPaymentModalComponent: React.FC<LocalPaymentModalProps> = ({ isOpen,
   );
 };
 
-export const LocalPaymentModal: React.FC<LocalPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, currentUser, schedule, cart, updateCart, customer }) => {
+const LocalPaymentModalWrapper: React.FC<LocalPaymentModalProps> = (props) => {
   return (
     <Loader>
-      <LocalPaymentModalComponent isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} onError={onError} currentUser={currentUser} schedule={schedule} cart={cart} updateCart={updateCart} customer={customer} />
+      <LocalPaymentModal {...props} />
     </Loader>
   );
 };
 
-Application.Components.component('localPaymentModal', react2angular(LocalPaymentModal, ['isOpen', 'toggleModal', 'afterSuccess', 'onError', 'currentUser', 'schedule', 'cart', 'updateCart', 'customer']));
+export { LocalPaymentModalWrapper as LocalPaymentModal };
+
+Application.Components.component('localPaymentModal', react2angular(LocalPaymentModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess', 'onError', 'currentUser', 'schedule', 'cart', 'updateCart', 'customer']));
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
index f172caf60..eb1dce7f2 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
@@ -16,6 +16,9 @@ interface PayzenCardUpdateModalProps {
   operator: User
 }
 
+/**
+ * Modal dialog to allow the member to update his payment card for a payment schedule, when the PayZen gateway is used
+ */
 export const PayzenCardUpdateModal: React.FC<PayzenCardUpdateModalProps> = ({ isOpen, toggleModal, onSuccess, schedule, operator }) => {
   const { t } = useTranslation('shared');
 
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
index 897fd1d74..55278d051 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
@@ -143,6 +143,9 @@ export const PayzenForm: React.FC<PayzenFormProps> = ({ onSubmit, onSuccess, onE
     }
   };
 
+  /**
+   * Return a loader
+   */
   const Loader: FunctionComponent = () => {
     return (
       <div className={`fa-3x ${loadingClass}`}>
@@ -154,7 +157,7 @@ export const PayzenForm: React.FC<PayzenFormProps> = ({ onSubmit, onSuccess, onE
   return (
     <form onSubmit={handleSubmit} id={formId} className={`payzen-form ${className || ''}`}>
       <Loader />
-      <div className="container">
+      <div className="payzen-container">
         <div id="payzenPaymentForm" />
       </div>
       {children}
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
index 1b9d649f6..7d3d9613c 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
@@ -28,7 +28,7 @@ let pendingKeysValidation = false;
 /**
  * Form to set the PayZen's username, password and public key
  */
-const PayzenKeysFormComponent: React.FC<PayzenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+const PayzenKeysForm: React.FC<PayzenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
   const { t } = useTranslation('admin');
 
   // values of the PayZen settings
@@ -205,10 +205,12 @@ const PayzenKeysFormComponent: React.FC<PayzenKeysFormProps> = ({ onValidKeys, o
   );
 };
 
-export const PayzenKeysForm: React.FC<PayzenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+const PayzenKeysFormWrapper: React.FC<PayzenKeysFormProps> = (props) => {
   return (
     <Loader>
-      <PayzenKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
+      <PayzenKeysForm {...props} />
     </Loader>
   );
 };
+
+export { PayzenKeysFormWrapper as PayzenKeysForm };
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
index 6cb0df7eb..b56d0debf 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
@@ -16,6 +16,9 @@ interface StripeCardUpdateModalProps {
   operator: User
 }
 
+/**
+ * Modal dialog to allow the member to update his payment card for a payment schedule, when the Stripe gateway is used
+ */
 export const StripeCardUpdateModal: React.FC<StripeCardUpdateModalProps> = ({ isOpen, toggleModal, onSuccess, schedule, operator }) => {
   const { t } = useTranslation('shared');
 
@@ -30,7 +33,7 @@ export const StripeCardUpdateModal: React.FC<StripeCardUpdateModalProps> = ({ is
   const logoFooter = (): ReactNode => {
     return (
       <div className="stripe-modal-icons">
-        <i className="fa fa-lock fa-2x m-r-sm pos-rlt" />
+        <i className="fa fa-lock fa-2x" />
         <img src={stripeLogo} alt="powered by stripe" />
         <img src={mastercardLogo} alt="mastercard" />
         <img src={visaLogo} alt="visa" />
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
index 9a32b93de..42a6c562b 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
@@ -15,7 +15,7 @@ interface StripeKeysFormProps {
 /**
  * Form to set the stripe's public and private keys
  */
-const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+const StripeKeysForm: React.FC<StripeKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
   const { t } = useTranslation('admin');
 
   // used to prevent promises from resolving if the component was unmounted
@@ -153,10 +153,12 @@ const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys, o
   );
 };
 
-export const StripeKeysForm: React.FC<StripeKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+const StripeKeysFormWrapper: React.FC<StripeKeysFormProps> = (props) => {
   return (
     <Loader>
-      <StripeKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
+      <StripeKeysForm {...props} />
     </Loader>
   );
 };
+
+export { StripeKeysFormWrapper as StripeKeysForm };
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
index 1993b6206..f4974615f 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
@@ -36,7 +36,7 @@ export const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, a
   const logoFooter = (): ReactNode => {
     return (
       <div className="stripe-modal-icons">
-        <i className="fa fa-lock fa-2x m-r-sm pos-rlt" />
+        <i className="fa fa-lock fa-2x" />
         <img src={stripeLogo} alt="powered by stripe" />
         <img src={mastercardLogo} alt="mastercard" />
         <img src={visaLogo} alt="visa" />
diff --git a/app/frontend/src/javascript/components/payment/update-card-modal.tsx b/app/frontend/src/javascript/components/payment/update-card-modal.tsx
index a57093dee..5d34d0b4c 100644
--- a/app/frontend/src/javascript/components/payment/update-card-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/update-card-modal.tsx
@@ -19,7 +19,7 @@ interface UpdateCardModalProps {
  * This component open a modal dialog for the configured payment gateway, allowing the user to input his card data
  * to process an online payment.
  */
-const UpdateCardModalComponent: React.FC<UpdateCardModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, operator, schedule }) => {
+const UpdateCardModal: React.FC<UpdateCardModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, operator, schedule }) => {
   const { t } = useTranslation('shared');
   const [gateway, setGateway] = useState<string>('');
 
@@ -68,10 +68,12 @@ const UpdateCardModalComponent: React.FC<UpdateCardModalProps> = ({ isOpen, togg
   }
 };
 
-export const UpdateCardModal: React.FC<UpdateCardModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, operator, schedule }) => {
+const UpdateCardModalWrapper: React.FC<UpdateCardModalProps> = (props) => {
   return (
     <Loader>
-      <UpdateCardModalComponent isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} onError={onError} operator={operator} schedule={schedule} />
+      <UpdateCardModal {...props} />
     </Loader>
   );
 };
+
+export { UpdateCardModalWrapper as UpdateCardModal };
diff --git a/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx b/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
index 35a3026ea..2ab1d4500 100644
--- a/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
@@ -16,7 +16,7 @@ interface DeletePlanCategoryProps {
  * This component shows a button.
  * When clicked, we show a modal dialog to ask the user for confirmation about the deletion of the provided plan-category.
  */
-const DeletePlanCategoryComponent: React.FC<DeletePlanCategoryProps> = ({ onSuccess, onError, category }) => {
+const DeletePlanCategory: React.FC<DeletePlanCategoryProps> = ({ onSuccess, onError, category }) => {
   const { t } = useTranslation('admin');
 
   const [deletionModal, setDeletionModal] = useState<boolean>(false);
@@ -56,10 +56,12 @@ const DeletePlanCategoryComponent: React.FC<DeletePlanCategoryProps> = ({ onSucc
   );
 };
 
-export const DeletePlanCategory: React.FC<DeletePlanCategoryProps> = ({ onSuccess, onError, category }) => {
+const DeletePlanCategoryWrapper: React.FC<DeletePlanCategoryProps> = (props) => {
   return (
     <Loader>
-      <DeletePlanCategoryComponent onSuccess={onSuccess} onError={onError} category={category} />
+      <DeletePlanCategory {...props} />
     </Loader>
   );
 };
+
+export { DeletePlanCategoryWrapper as DeletePlanCategory };
diff --git a/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx b/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
index 927213ae8..d347c5da3 100644
--- a/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
@@ -17,7 +17,7 @@ interface ManagePlanCategoryProps {
  * This component shows a button.
  * When clicked, we show a modal dialog allowing to fill the parameters of a plan-category (create new or update existing).
  */
-const ManagePlanCategoryComponent: React.FC<ManagePlanCategoryProps> = ({ category, action, onSuccess, onError }) => {
+const ManagePlanCategory: React.FC<ManagePlanCategoryProps> = ({ category, action, onSuccess, onError }) => {
   const { t } = useTranslation('admin');
 
   // is the creation modal open?
@@ -61,7 +61,7 @@ const ManagePlanCategoryComponent: React.FC<ManagePlanCategoryProps> = ({ catego
         return (
           <FabButton type='button'
             icon={<i className='fa fa-plus' />}
-            className="btn-warning"
+            className="create-button"
             onClick={toggleModal}>
             {t('app.admin.manage_plan_category.create_category.title')}
           </FabButton>
@@ -90,10 +90,12 @@ const ManagePlanCategoryComponent: React.FC<ManagePlanCategoryProps> = ({ catego
   );
 };
 
-export const ManagePlanCategory: React.FC<ManagePlanCategoryProps> = ({ category, action, onSuccess, onError }) => {
+const ManagePlanCategoryWrapper: React.FC<ManagePlanCategoryProps> = (props) => {
   return (
     <Loader>
-      <ManagePlanCategoryComponent category={category} action={action} onSuccess={onSuccess} onError={onError} />
+      <ManagePlanCategory {...props} />
     </Loader>
   );
 };
+
+export { ManagePlanCategoryWrapper as ManagePlanCategory };
diff --git a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
index 2b0a572ae..f0ad906f3 100644
--- a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
@@ -16,7 +16,10 @@ interface PlanCategoryFormProps {
   onError: (message: string) => void
 }
 
-const PlanCategoryFormComponent: React.FC<PlanCategoryFormProps> = ({ action, category, onSuccess, onError }) => {
+/**
+ * Form to create/edit a plan category
+ */
+const PlanCategoryForm: React.FC<PlanCategoryFormProps> = ({ action, category, onSuccess, onError }) => {
   const { t } = useTranslation('admin');
 
   const { register, control, handleSubmit } = useForm<PlanCategory>({ defaultValues: { ...category } });
@@ -58,10 +61,12 @@ const PlanCategoryFormComponent: React.FC<PlanCategoryFormProps> = ({ action, ca
   );
 };
 
-export const PlanCategoryForm: React.FC<PlanCategoryFormProps> = ({ action, category, onSuccess, onError }) => {
+const PlanCategoryFormWrapper: React.FC<PlanCategoryFormProps> = (props) => {
   return (
     <Loader>
-      <PlanCategoryFormComponent action={action} category={category} onSuccess={onSuccess} onError={onError} />
+      <PlanCategoryForm {...props} />
     </Loader>
   );
 };
+
+export { PlanCategoryFormWrapper as PlanCategoryForm };
diff --git a/app/frontend/src/javascript/components/plans/plans-filter.tsx b/app/frontend/src/javascript/components/plans/plans-filter.tsx
index d9d598323..8a280bd62 100644
--- a/app/frontend/src/javascript/components/plans/plans-filter.tsx
+++ b/app/frontend/src/javascript/components/plans/plans-filter.tsx
@@ -20,6 +20,9 @@ interface PlansFilterProps {
  */
 type selectOption = { value: number, label: string };
 
+/**
+ * Allows filtering on plans list
+ */
 export const PlansFilter: React.FC<PlansFilterProps> = ({ user, groups, onGroupSelected, onError, onDurationSelected }) => {
   const { t } = useTranslation('public');
 
diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
index 4e455444b..1723bddc8 100644
--- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
+++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
@@ -14,6 +14,7 @@ import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
 import { PrepaidPack } from '../../models/prepaid-pack';
 import PrepaidPackAPI from '../../api/prepaid-pack';
+import { FabAlert } from '../base/fab-alert';
 
 declare const Application: IApplication;
 
@@ -29,7 +30,11 @@ interface PacksSummaryProps {
   refresh?: Promise<void>
 }
 
-const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => {
+/**
+ * Display a short summary of the prepaid-packs already bought by the provider customer, for the given item.
+ * May also allows members to buy directly some new prepaid-packs.
+ */
+const PacksSummary: React.FC<PacksSummaryProps> = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => {
   const { t } = useTranslation('logged');
 
   const [packs, setPacks] = useState<Array<PrepaidPack>>(null);
@@ -140,9 +145,9 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
           <span className="remaining-hours">
             {t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })}
             {isPackOnlyForSubscription && !customer.subscribed_plan &&
-              <div className="alert alert-warning m-t m-b">
+              <FabAlert level="warning">
                 {t('app.logged.packs_summary.unable_to_use_pack_for_subsription_is_expired')}
-              </div>
+              </FabAlert>
             }
           </span>
         </div>
@@ -178,12 +183,14 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
   );
 };
 
-export const PacksSummary: React.FC<PacksSummaryProps> = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => {
+const PacksSummaryWrapper: React.FC<PacksSummaryProps> = (props) => {
   return (
     <Loader>
-      <PacksSummaryComponent item={item} itemType={itemType} customer={customer} operator={operator} onError={onError} onSuccess={onSuccess} refresh={refresh} />
+      <PacksSummary {...props} />
     </Loader>
   );
 };
 
-Application.Components.component('packsSummary', react2angular(PacksSummary, ['item', 'itemType', 'customer', 'operator', 'onError', 'onSuccess', 'refresh']));
+export { PacksSummaryWrapper as PacksSummary };
+
+Application.Components.component('packsSummary', react2angular(PacksSummaryWrapper, ['item', 'itemType', 'customer', 'operator', 'onError', 'onSuccess', 'refresh']));
diff --git a/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx b/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
index bfd8a40a0..19c46b2f1 100644
--- a/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
@@ -16,7 +16,7 @@ interface DeletePackProps {
  * This component shows a button.
  * When clicked, we show a modal dialog to ask the user for confirmation about the deletion of the provided pack.
  */
-const DeletePackComponent: React.FC<DeletePackProps> = ({ onSuccess, onError, pack }) => {
+const DeletePack: React.FC<DeletePackProps> = ({ onSuccess, onError, pack }) => {
   const { t } = useTranslation('admin');
 
   const [deletionModal, setDeletionModal] = useState<boolean>(false);
@@ -56,10 +56,12 @@ const DeletePackComponent: React.FC<DeletePackProps> = ({ onSuccess, onError, pa
   );
 };
 
-export const DeletePack: React.FC<DeletePackProps> = ({ onSuccess, onError, pack }) => {
+const DeletePackWrapper: React.FC<DeletePackProps> = (props) => {
   return (
     <Loader>
-      <DeletePackComponent onSuccess={onSuccess} onError={onError} pack={pack} />
+      <DeletePack {...props} />
     </Loader>
   );
 };
+
+export { DeletePackWrapper as DeletePack };
diff --git a/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx b/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
index e6155e6bf..54260c948 100644
--- a/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
+++ b/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
@@ -20,6 +20,13 @@ interface ProfileFormOptionProps {
   onSuccess: (user: User) => void,
 }
 
+/**
+ * After first logged-in from a SSO, the user has two options:
+ * - complete his profile (*) ;
+ * - bind his profile to his existing account ;
+ * (*) This component handle the first case.
+ * It also deals with duplicate email addresses in database
+ */
 export const ProfileFormOption: React.FC<ProfileFormOptionProps> = ({ user, activeProvider, onError, onSuccess }) => {
   const { t } = useTranslation('logged');
 
diff --git a/app/frontend/src/javascript/components/settings/boolean-setting.tsx b/app/frontend/src/javascript/components/settings/boolean-setting.tsx
index 752014ece..ae37d76f6 100644
--- a/app/frontend/src/javascript/components/settings/boolean-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/boolean-setting.tsx
@@ -97,10 +97,10 @@ export const BooleanSetting: React.FC<BooleanSettingProps> = ({ name, label, cla
   };
 
   return (
-    <div className={`boolean-setting form-group ${className || ''}`}>
-      <label htmlFor={`setting-${name}`} className="control-label m-r">{label}</label>
-      <Switch checked={value} id={`setting-${name}}`} onChange={handleChanged} className="v-middle"></Switch>
-      {!hideSave && <FabButton className="btn btn-warning m-l" onClick={handleSave}>{t('app.admin.check_list_setting.save')}</FabButton> }
+    <div className={`boolean-setting ${className || ''}`}>
+      <label htmlFor={`setting-${name}`}>{label}</label>
+      <Switch checked={value} id={`setting-${name}}`} onChange={handleChanged} className="switch"></Switch>
+      {!hideSave && <FabButton className="save-btn" onClick={handleSave}>{t('app.admin.check_list_setting.save')}</FabButton> }
     </div>
   );
 };
diff --git a/app/frontend/src/javascript/components/settings/user-validation-setting.tsx b/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
index 49d1a8353..0084d9bd6 100644
--- a/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
@@ -8,6 +8,7 @@ import { Loader } from '../base/loader';
 import { FabButton } from '../base/fab-button';
 import { BooleanSetting } from './boolean-setting';
 import { CheckListSetting } from './check-list-setting';
+import { FabAlert } from '../base/fab-alert';
 
 declare const Application: IApplication;
 
@@ -82,9 +83,9 @@ export const UserValidationSetting: React.FC<UserValidationSettingProps> = ({ on
           <p>
             {t('app.admin.settings.compte.user_validation_required_list_info')}
           </p>
-          <p className="alert alert-warning">
+          <FabAlert level="warning">
             {t('app.admin.settings.compte.user_validation_required_list_other_info')}
-          </p>
+          </FabAlert>
           <CheckListSetting name={SettingName.UserValidationRequiredList}
             label=""
             availableOptions={userValidationRequiredOptions}
@@ -96,7 +97,7 @@ export const UserValidationSetting: React.FC<UserValidationSettingProps> = ({ on
           </CheckListSetting>
         </div>
       }
-      <FabButton className="btn btn-warning m-t" onClick={handleSave}>{t('app.admin.check_list_setting.save')}</FabButton>
+      <FabButton className="save-btn" onClick={handleSave}>{t('app.admin.check_list_setting.save')}</FabButton>
     </div>
   );
 };
diff --git a/app/frontend/src/javascript/components/socials/edit-socials.tsx b/app/frontend/src/javascript/components/socials/edit-socials.tsx
index 39132636c..9f78c3855 100644
--- a/app/frontend/src/javascript/components/socials/edit-socials.tsx
+++ b/app/frontend/src/javascript/components/socials/edit-socials.tsx
@@ -16,6 +16,9 @@ interface EditSocialsProps<TFieldValues> {
   disabled: boolean|((id: string) => boolean),
 }
 
+/**
+ * Allow a user to edit its personnal social networks
+ */
 export const EditSocials = <TFieldValues extends FieldValues>({ register, setValue, networks, formState, disabled }: EditSocialsProps<TFieldValues>) => {
   const { t } = useTranslation('shared');
   // regular expression to validate the the input fields
@@ -23,10 +26,17 @@ export const EditSocials = <TFieldValues extends FieldValues>({ register, setVal
 
   const initSelectedNetworks = networks.filter(el => !['', null, undefined].includes(el.url));
   const [selectedNetworks, setSelectedNetworks] = useState(initSelectedNetworks);
+
+  /**
+   * Callback triggered when the user adds a network, from the list of available networks, to the editable networks.
+   */
   const selectNetwork = (network) => {
     setSelectedNetworks([...selectedNetworks, network]);
   };
 
+  /**
+   * Return a derivated state of the selected networks list, depending on the given action.
+   */
   const reducer = (state, action) => {
     switch (action.type) {
       case 'delete':
diff --git a/app/frontend/src/javascript/components/socials/fab-socials.tsx b/app/frontend/src/javascript/components/socials/fab-socials.tsx
index 96752eed1..a6076c05b 100644
--- a/app/frontend/src/javascript/components/socials/fab-socials.tsx
+++ b/app/frontend/src/javascript/components/socials/fab-socials.tsx
@@ -20,6 +20,9 @@ interface FabSocialsProps {
   onSuccess: (message: string) => void
 }
 
+/**
+ * Allows the Fablab to edit its corporate social networks, or to display them read-only to the end users (show=true)
+ */
 export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, onSuccess }) => {
   const { t } = useTranslation('shared');
   // regular expression to validate the the input fields
@@ -42,6 +45,9 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
     setSelectedNetworks(fabNetworks.filter(el => el.url !== ''));
   }, [fabNetworks]);
 
+  /**
+   * Callback triggered when the social networks are saved
+   */
   const onSubmit = (data) => {
     const updatedNetworks = new Map<SettingName, string>();
     Object.keys(data).forEach(key => updatedNetworks.set(key as SettingName, data[key]));
@@ -55,17 +61,24 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
     });
   };
 
+  /**
+   * Callback triggered when the user adds a network, from the list of available networks, to the editable networks.
+   */
   const selectNetwork = (network) => {
     setSelectedNetworks([...selectedNetworks, network]);
   };
 
+  /**
+   * Callback triggered when the user removes a network, from the list of editables networks, add put it back to the
+   * list of avaiable networks.
+   */
   const remove = (network) => {
     setSelectedNetworks(selectedNetworks.filter(el => el !== network));
     setValue(network.name, '');
   };
 
   return (
-    <>{show
+    <div className="fab-socials">{show
       ? (selectedNetworks.length > 0) && <>
           <h2>{t('app.shared.fab_socials.follow_us')}</h2>
           <div className='social-icons'>
@@ -107,11 +120,11 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
           )}
         </div>}
         <FabButton type='submit'
-                  className='btn-warning'>
+                  className='save-btn'>
           {t('app.shared.buttons.save')}
         </FabButton>
       </form>
-    }</>
+    }</div>
   );
 };
 
diff --git a/app/frontend/src/javascript/components/user/user-validation.tsx b/app/frontend/src/javascript/components/user/user-validation.tsx
index 235994e0a..677ba59c0 100644
--- a/app/frontend/src/javascript/components/user/user-validation.tsx
+++ b/app/frontend/src/javascript/components/user/user-validation.tsx
@@ -6,6 +6,7 @@ import { User } from '../../models/user';
 import { IApplication } from '../../models/application';
 import { react2angular } from 'react2angular';
 import MemberAPI from '../../api/member';
+import { TDateISO } from '../../typings/date-iso';
 
 declare const Application: IApplication;
 
@@ -34,7 +35,7 @@ export const UserValidation: React.FC<UserValidationProps> = ({ member, onSucces
     setValue(_value);
     const _member = _.clone(member);
     if (_value) {
-      _member.validated_at = new Date();
+      _member.validated_at = new Date().toISOString() as TDateISO;
     } else {
       _member.validated_at = null;
     }
@@ -49,8 +50,8 @@ export const UserValidation: React.FC<UserValidationProps> = ({ member, onSucces
 
   return (
     <div className="user-validation">
-      <label htmlFor="user-validation-switch" className="control-label m-r">{t('app.admin.members_edit.validate_account')}</label>
-      <Switch checked={value} id="user-validation-switch" onChange={handleChanged} className="v-middle"></Switch>
+      <label htmlFor="user-validation-switch">{t('app.admin.members_edit.validate_account')}</label>
+      <Switch checked={value} id="user-validation-switch" onChange={handleChanged} className="switch"></Switch>
     </div>
   );
 };
diff --git a/app/frontend/src/javascript/typings/date-iso.d.ts b/app/frontend/src/javascript/typings/date-iso.d.ts
index fbe43d178..c86e84a06 100644
--- a/app/frontend/src/javascript/typings/date-iso.d.ts
+++ b/app/frontend/src/javascript/typings/date-iso.d.ts
@@ -1,13 +1,5 @@
 // from https://gist.github.com/MrChocolatine/367fb2a35d02f6175cc8ccb3d3a20054
 
-interface Date {
-  /**
-   * Give a more precise return type to the method `toISOString()`:
-   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
-   */
-  toISOString(): TDateISO;
-}
-
 type TYear = `${number}${number}${number}${number}`;
 type TMonth = `${number}${number}`;
 type TDay = `${number}${number}`;
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index 0575162e7..b1898bd43 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -76,7 +76,10 @@
 @import "modules/profile-completion/completion-header-info";
 @import "modules/profile-completion/profile-form-option";
 @import "modules/select-gateway-modal";
+@import "modules/settings/boolean-setting";
 @import "modules/settings/check-list-setting";
+@import "modules/settings/user-validation-setting";
+@import "modules/socials/fab-socials";
 @import "modules/subscriptions/free-extend-modal";
 @import "modules/subscriptions/renew-modal";
 @import "modules/user/avatar";
diff --git a/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss b/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
index daf2d2f2a..f661aa9d1 100644
--- a/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
+++ b/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
@@ -39,7 +39,7 @@
     }
 
     button { @include button(4rem); }
-    .divider {
+    .menu-divider {
       width: 2px;
       height: 2.4rem;
       background-color: var(--gray-soft-dark);
diff --git a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss
index fb59142ef..deaed8234 100644
--- a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss
@@ -24,7 +24,7 @@
       left: 190px;
       z-index: 1;
     }
-    .container {
+    .payzen-container {
       display: flex;
       justify-content: center;
       width: inherit;
diff --git a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss
index ef6a8b63f..dc4491dde 100644
--- a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss
@@ -12,7 +12,7 @@
       left: 190px;
       z-index: 1;
     }
-    .container {
+    .payzen-container {
       display: flex;
       justify-content: center;
       width: inherit;
diff --git a/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss
index cada094d0..d78500825 100644
--- a/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss
@@ -47,6 +47,8 @@
       .fa.fa-lock {
         top: 7px;
         color: #9edd78;
+        margin-right: 10px;
+        position: relative;
       }
 
       img {
diff --git a/app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss
index 1340cf746..24efd1d43 100644
--- a/app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss
@@ -5,6 +5,8 @@
     .fa.fa-lock {
       top: 7px;
       color: #9edd78;
+      margin-right: 10px;
+      position: relative;
     }
 
     img {
diff --git a/app/frontend/src/stylesheets/modules/plan-categories/manage-plan-category.scss b/app/frontend/src/stylesheets/modules/plan-categories/manage-plan-category.scss
index 4932f14dc..507e62268 100644
--- a/app/frontend/src/stylesheets/modules/plan-categories/manage-plan-category.scss
+++ b/app/frontend/src/stylesheets/modules/plan-categories/manage-plan-category.scss
@@ -1,4 +1,10 @@
 .manage-plan-category {
   display: inline;
   margin-right: 5px;
+
+  .create-button {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: var(--secondary-text-color);
+  }
 }
diff --git a/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss b/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss
index 7a3fc4caa..be46f01e2 100644
--- a/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss
+++ b/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss
@@ -16,6 +16,13 @@
   .content {
     padding: 15px;
 
+    .remaining-hours {
+      .fab-alert {
+        margin-top: 15px;
+        margin-bottom: 15px;
+      }
+    }
+
     .button-wrapper {
       text-align: center;
 
diff --git a/app/frontend/src/stylesheets/modules/settings/boolean-setting.scss b/app/frontend/src/stylesheets/modules/settings/boolean-setting.scss
new file mode 100644
index 000000000..bf8d86c96
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/settings/boolean-setting.scss
@@ -0,0 +1,18 @@
+.boolean-setting {
+  margin-bottom: 15px;
+
+  label {
+    margin-bottom: 0;
+    vertical-align: middle;
+    margin-right: 15px;
+  }
+  .switch {
+    vertical-align: middle;
+  }
+  .save-btn {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: var(--secondary-text-color);
+    margin-left: 15px;
+  }
+}
diff --git a/app/frontend/src/stylesheets/modules/settings/user-validation-setting.scss b/app/frontend/src/stylesheets/modules/settings/user-validation-setting.scss
new file mode 100644
index 000000000..ec368ce3d
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/settings/user-validation-setting.scss
@@ -0,0 +1,8 @@
+.user-validation-setting {
+  .save-btn {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: var(--secondary-text-color);
+    margin-top: 15px;
+  }
+}
diff --git a/app/frontend/src/stylesheets/modules/socials/fab-socials.scss b/app/frontend/src/stylesheets/modules/socials/fab-socials.scss
new file mode 100644
index 000000000..4404ae008
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/socials/fab-socials.scss
@@ -0,0 +1,7 @@
+.fab-socials {
+  .save-btn {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: var(--secondary-text-color);
+  }
+}
diff --git a/app/frontend/src/stylesheets/modules/user/user-validation.scss b/app/frontend/src/stylesheets/modules/user/user-validation.scss
new file mode 100644
index 000000000..81a741931
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/user/user-validation.scss
@@ -0,0 +1,11 @@
+.user-validation {
+  label {
+    margin-bottom: 0;
+    vertical-align: middle;
+    margin-right: 15px;
+  }
+
+  .switch {
+    vertical-align: middle;
+  }
+}
diff --git a/package.json b/package.json
index b0c7b1dac..cb7be620e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@typescript-eslint/parser": "^5.17.0",
     "eslint": "~8.12.0",
     "eslint-config-standard": "~17.0.0-1",
-    "eslint-plugin-fabmanager": "^0.4.2",
+    "eslint-plugin-fabmanager": "^0.4.8",
     "eslint-plugin-html-erb": "^1.0.1",
     "eslint-plugin-import": "~2.25.4",
     "eslint-plugin-n": "^15.1.0",
diff --git a/yarn.lock b/yarn.lock
index 020d09a3a..14e0a1660 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4082,10 +4082,10 @@ eslint-plugin-es@^4.1.0:
     eslint-utils "^2.0.0"
     regexpp "^3.0.0"
 
-eslint-plugin-fabmanager@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-fabmanager/-/eslint-plugin-fabmanager-0.4.2.tgz#87f18b13a29fe77dcbb9cb8c4a996b0b108f8a07"
-  integrity sha512-3SKm4YXXzrgQYnaCmk0/QLh+2YaCSMAZFazC7fFB57BBo0PR70YMrGNoyiEW4oQ52qYNeIMwlFHHNPEgWfcwsw==
+eslint-plugin-fabmanager@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-fabmanager/-/eslint-plugin-fabmanager-0.4.8.tgz#2104feddee06fa0245e64a3b8491412b17dcd16e"
+  integrity sha512-Heey9vsr2WmRjY4JOskwWK8H2qgfR9nVX0osQyOb5bc+r6gQPci0Q0eECcN3pT9tXjLl2oL0oxWA5DFhleBi2A==
   dependencies:
     requireindex "^1.2.0"