Override React-select styles

app/frontend/src/stylesheets/application.scss

@@ -29,9 +29,7 @@
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
 @import "modules/calendar/calendar";
-@import "modules/form/form-input";
-@import "modules/form/form-item";
-@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-input.scss

@@ -1,74 +0,0 @@
-.form-input {
-  width: 100%;
-  margin-bottom: 1.6rem;
-
-  &-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 0.8rem;
-    p { 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: 4px;
-    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;
-      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,5 +1,4 @@
-.form-select,
-.form-multi-select {
+.form-input {
   width: 100%;
   margin-bottom: 1.6rem;
 
@@ -9,10 +8,7 @@
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 0.8rem;
-    p {
-      @include text-sm;
-      margin: 0;
-    }
+    p { margin: 0; }
   }
   &.is-required &-header p::after {
     content: "*";
@@ -23,11 +19,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,
@@ -43,17 +38,49 @@
       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);
       padding: 0 0.8rem;
       color: var(--gray-hard-darkest);
       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);

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
@@ -570,8 +570,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
@@ -681,8 +681,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"
@@ -691,8 +691,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"