Improve language filter preferences look (#3184)

app/javascript/styles/forms.scss

@@ -12,6 +12,7 @@ code {
 .simple_form {
   .input {
     margin-bottom: 15px;
+    overflow: hidden;
   }
 
   span.hint {
@@ -44,11 +45,12 @@ code {
 
   .input.file,
   .input.select,
-  .input.radio_buttons {
+  .input.radio_buttons,
+  .input.check_boxes {
     padding: 15px 0;
     margin-bottom: 0;
 
-    label {
+    .label_input > label {
       font-family: inherit;
       font-size: 16px;
       color: $primary-text-color;
@@ -353,6 +355,19 @@ code {
 }
 
 .user_filtered_languages {
+
+  & > label {
+    font-family: inherit;
+    font-size: 16px;
+    color: $primary-text-color;
+    display: block;
+    padding-top: 5px;
+  }
+
+  .hint {
+    margin-bottom: 15px;
+  }
+
   li {
     float: left;
     width: 50%;

app/views/settings/preferences/show.html.haml

@@ -14,7 +14,7 @@
 
     = f.input :filtered_languages,
       collection: I18n.available_locales,
-      wrapper: :with_label,
+      wrapper: :with_block_label,
       include_blank: false,
       label_method: lambda { |locale| human_locale(locale) },
       required: false,

config/initializers/simple_form.rb

@@ -57,6 +57,14 @@ SimpleForm.setup do |config|
     b.use :error, wrap_with: { tag: :span, class: :error }
   end
 
+  config.wrappers :with_block_label, class: :input, hint_class: :field_with_hint, error_class: :field_with_errors do |b|
+    b.use :html5
+    b.use :label
+    b.use :hint, wrap_with: { tag: :span, class: :hint }
+    b.use :input
+    b.use :error, wrap_with: { tag: :span, class: :error }
+  end
+
   # The default wrapper to be used by the FormBuilder.
   config.default_wrapper = :default