Override React-select styles

app/frontend/src/javascript/components/form/form-input.tsx

@@ -19,7 +19,7 @@ interface FormInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElem
 export const FormInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: FormInputProps<TFieldValues>) => {
   // Compose classnames from props
   const classNames = `
-    form-input ${className || ''}
+    form-item ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${readOnly ? 'is-readOnly' : ''}
@@ -27,12 +27,12 @@ export const FormInput = <TFieldValues extends FieldValues>({ id, register, labe
 
   return (
     <label className={classNames}>
-      {label && <div className='form-input-header'>
+      {label && <div className='form-item-header'>
         <p>{label}</p>
         {/* TODO: Create tooltip component */}
         {tooltip && <span>{tooltip}</span>}
       </div>}
-      <div className='form-input-field'>
+      <div className='form-item-field'>
         {icon && <span className="icon">{icon}</span>}
         <input id={id}
           {...register(id as FieldPath<TFieldValues>, {
@@ -47,7 +47,7 @@ export const FormInput = <TFieldValues extends FieldValues>({ id, register, labe
           placeholder={placeholder} />
         {addOn && <span className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
       </div>
-      {(error && error[id]) && <div className="form-input-error">{error[id].message}</div> }
+      {(error && error[id]) && <div className="form-item-error">{error[id].message}</div> }
     </label>
   );
 };

app/frontend/src/javascript/components/form/form-select.tsx

@@ -24,22 +24,24 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
  */
 export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault, error, rules, disabled }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const classNames = `
-    form-select ${className || ''}
+    form-item ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${disabled ? 'is-disabled' : ''}`;
 
   return (
     <label className={classNames}>
-      {label && <div className="form-select-header">
+      {label && <div className="form-item-header">
         <p>{label}</p>
       </div>}
-      <div>
+      <div className="form-item-field">
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}
                     defaultValue={valueDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
                     render={({ field: { onChange, value, ref } }) =>
           <Select inputRef={ref}
+                  classNamePrefix="rs"
+                  className="rs"
                   value={options.find(c => c.value === value)}
                   onChange={val => onChange(val.value)}
                   placeholder={placeholder}

app/frontend/src/stylesheets/application.scss

@@ -22,8 +22,7 @@
 @import "modules/base/fab-popover";
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
-@import "modules/form/form-input";
-@import "modules/form/form-select";
+@import "modules/form/form";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";
 @import "modules/machines/machines-list";

app/frontend/src/stylesheets/modules/form/form-select.scss

@@ -1,79 +0,0 @@
-.form-select,
-.form-multi-select {
-  width: 100%;
-  margin-bottom: 1.6rem;
-
-  &-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 0.8rem;
-    p {
-      @include text-sm;
-      margin: 0;
-    }
-  }
-  &.is-required &-header p::after {
-    content: "*";
-    margin-left: 0.5ch;
-    color: var(--error);
-  }
-
-  &-field {
-    height: 4rem;
-    display: grid;
-    grid-template-areas: "icon input addon";
-    grid-template-columns: min-content 1fr min-content;
-    border: 1px solid var(--gray-soft-dark);
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    transition: border-color ease-in-out 0.15s;
-
-    .icon,
-    .addon {
-      width: 4rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--gray-hard-light);
-      background-color: var(--gray-soft);
-    }
-    .icon {
-      grid-area: icon;
-      border-right: 1px solid var(--gray-soft-dark);
-    }
-    &-input {
-      grid-area: input;
-      border: none;
-      border-radius: var(--border-radius);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
-      padding: 0 0.8rem;
-      color: var(--gray-hard-darkest);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .addon {
-      grid-area: addon;
-      border-left: 1px solid var(--gray-soft-dark);
-    }
-  }
-  &.is-incorrect &-field {
-    border-color: var(--error);
-    .icon {
-      color: var(--error);
-      border-color: var(--error);
-      background-color: var(--error-lightest);
-    }
-  }
-  &.is-disabled &-field input,
-  &.is-readOnly &-field input {
-    background-color: var(--gray-soft-light);
-  }
-
-  &-error {
-    margin-top: 0.4rem;
-    color: var(--error);
-  }
-}

app/frontend/src/stylesheets/modules/form/form.scss

@@ -1,4 +1,4 @@
-.form-input {
+.form-item {
   width: 100%;
   margin-bottom: 1.6rem;
 
@@ -22,11 +22,10 @@
   &-field {
     height: 4rem;
     display: grid;
-    grid-template-areas: "icon input addon";
+    grid-template-areas: "icon field addon";
     grid-template-columns: min-content 1fr min-content;
     border: 1px solid var(--gray-soft-dark);
     border-radius: var(--border-radius);
-    overflow: hidden;
     transition: border-color ease-in-out 0.15s;
 
     .icon,
@@ -42,8 +41,9 @@
       grid-area: icon;
       border-right: 1px solid var(--gray-soft-dark);
     }
-    input {
-      grid-area: input;
+
+    & > input {
+      grid-area: field;
       border: none;
       border-radius: var(--border-radius);
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
@@ -52,7 +52,39 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--information);
+      }
     }
+
+    // override React-select component's style
+    .rs {
+      grid-area: field;
+      &__control {
+        border: none;
+        border-radius: var(--border-radius);
+        &--is-focused {
+          box-shadow: 0 0 0 2px var(--information);
+        }
+      }
+      &__menu {
+        margin-top: 1px;
+        border: 1px solid var(--gray-soft-dark);
+        box-shadow: var(--shadow);
+      }
+      &__option {
+        color: #000000;
+        &:hover {
+          background-color: var(--information-lightest);
+        }
+        &--is-selected,
+        &--is-selected:hover {
+          background-color: var(--information-light);
+        }
+      }
+    }
+
     .addon {
       grid-area: addon;
       border-left: 1px solid var(--gray-soft-dark);
@@ -75,4 +107,4 @@
     margin-top: 0.4rem;
     color: var(--error);
   }
-}
+}

db/schema.rb

@@ -19,8 +19,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
   enable_extension "unaccent"
 
   create_table "abuses", id: :serial, force: :cascade do |t|
-    t.integer "signaled_id"
     t.string "signaled_type"
+    t.integer "signaled_id"
     t.string "first_name"
     t.string "last_name"
     t.string "email"
@@ -49,8 +49,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
     t.string "locality"
     t.string "country"
     t.string "postal_code"
-    t.integer "placeable_id"
     t.string "placeable_type"
+    t.integer "placeable_id"
     t.datetime "created_at"
     t.datetime "updated_at"
   end
@@ -64,8 +64,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
   end
 
   create_table "assets", id: :serial, force: :cascade do |t|
-    t.integer "viewable_id"
     t.string "viewable_type"
+    t.integer "viewable_id"
     t.string "attachment"
     t.string "type"
     t.datetime "created_at"
@@ -146,8 +146,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
   end
 
   create_table "credits", id: :serial, force: :cascade do |t|
-    t.integer "creditable_id"
     t.string "creditable_type"
+    t.integer "creditable_id"
     t.integer "plan_id"
     t.integer "hours"
     t.datetime "created_at"
@@ -369,15 +369,15 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
 
   create_table "notifications", id: :serial, force: :cascade do |t|
     t.integer "receiver_id"
-    t.integer "attached_object_id"
     t.string "attached_object_type"
+    t.integer "attached_object_id"
     t.integer "notification_type_id"
     t.boolean "is_read", default: false
     t.datetime "created_at"
     t.datetime "updated_at"
     t.string "receiver_type"
     t.boolean "is_send", default: false
-    t.jsonb "meta_data", default: {}
+    t.jsonb "meta_data", default: "{}"
     t.index ["notification_type_id"], name: "index_notifications_on_notification_type_id"
     t.index ["receiver_id"], name: "index_notifications_on_receiver_id"
   end
@@ -571,8 +571,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
   create_table "prices", id: :serial, force: :cascade do |t|
     t.integer "group_id"
     t.integer "plan_id"
-    t.integer "priceable_id"
     t.string "priceable_type"
+    t.integer "priceable_id"
     t.integer "amount"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
@@ -682,8 +682,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
     t.text "message"
     t.datetime "created_at"
     t.datetime "updated_at"
-    t.integer "reservable_id"
     t.string "reservable_type"
+    t.integer "reservable_id"
     t.integer "nb_reserve_places"
     t.integer "statistic_profile_id"
     t.index ["reservable_type", "reservable_id"], name: "index_reservations_on_reservable_type_and_reservable_id"
@@ -692,8 +692,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
 
   create_table "roles", id: :serial, force: :cascade do |t|
     t.string "name"
-    t.integer "resource_id"
     t.string "resource_type"
+    t.integer "resource_id"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.index ["name", "resource_type", "resource_id"], name: "index_roles_on_name_and_resource_type_and_resource_id"