Prefer panels over fieldset when different forms

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

3 files changed, 92 insertions, 83 deletions

diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 5939c951fe8..55bd9096391 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -9,10 +9,10 @@
     Some options are unavailable for LDAP accounts
 
 .account-page
-  %fieldset.update-token
-    %legend
+  .panel.panel-default.update-token
+    .panel-heading
       Reset Private token
-    %div
+    .panel-body
       = form_for @user, url: reset_private_token_profile_path, method: :put do |f|
         .data
           %p
@@ -32,12 +32,11 @@
               = f.submit 'Generate', class: "btn success btn-build-token"
 
   - unless current_user.ldap_user?
-    %fieldset
-      - if current_user.otp_required_for_login
-        %legend.text-success
-          = icon('check')
+    - if current_user.otp_required_for_login
+      .panel.panel-success
+        .panel-heading
           Two-factor Authentication enabled
-        %div
+        .panel-body
           .pull-right
             = link_to 'Disable Two-factor Authentication', profile_two_factor_auth_path, method: :delete, class: 'btn btn-close btn-sm',
                 data: { confirm: 'Are you sure?' }
@@ -48,9 +47,11 @@
                 = link_to 'generate new ones', codes_profile_two_factor_auth_path, method: :post, data: { confirm: 'Are you sure?' }
             invalidating all previous codes.
 
-      - else
-        %legend Two-factor Authentication
-        %div
+    - else
+      .panel.panel-default
+        .panel-heading
+          Two-factor Authentication
+        .panel-body
           %p
             Increase your account's security by enabling two-factor authentication (2FA).
           %p
@@ -60,42 +61,45 @@
             = link_to 'Enable Two-factor Authentication', new_profile_two_factor_auth_path, class: 'btn btn-success'
 
   - if show_profile_social_tab?
-    %fieldset
-      %legend Connected Accounts
-      .oauth-buttons.append-bottom-10
-        %p Click on icon to activate signin with one of the following services
-        - enabled_social_providers.each do |provider|
-          .btn-group
-            = link_to oauth_image_tag(provider), omniauth_authorize_path(User, provider),
-              method: :post, class: "btn btn-lg #{'active' if oauth_active?(provider)}"
-            - if oauth_active?(provider)
-              = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'btn btn-lg' do
-                = icon('close')
+    .panel.panel-default
+      .panel-heading
+        Connected Accounts
+      .panel-body
+        .oauth-buttons.append-bottom-10
+          %p Click on icon to activate signin with one of the following services
+          - enabled_social_providers.each do |provider|
+            .btn-group
+              = link_to oauth_image_tag(provider), omniauth_authorize_path(User, provider),
+                method: :post, class: "btn btn-lg #{'active' if oauth_active?(provider)}"
+              - if oauth_active?(provider)
+                = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'btn btn-lg' do
+                  = icon('close')
 
   - if show_profile_username_tab?
-    %fieldset.update-username
-      %legend
+    .panel.panel-warning.update-username
+      .panel-heading
         Change Username
-      = form_for @user, url: update_username_profile_path,  method: :put, remote: true do |f|
-        %p
-          Changing your username will change path to all personal projects!
-        %div
-          = f.text_field :username, required: true, class: 'form-control'
-           
-        .loading-gif.hide
+      .panel-body
+        = form_for @user, url: update_username_profile_path,  method: :put, remote: true do |f|
           %p
-            = icon('spinner spin')
-            Saving new username
-        %p.light
-          = user_url(@user)
-        %div
-          = f.submit 'Save username', class: "btn btn-warning"
+            Changing your username will change path to all personal projects!
+          %div
+            = f.text_field :username, required: true, class: 'form-control'
+             
+          .loading-gif.hide
+            %p
+              = icon('spinner spin')
+              Saving new username
+          %p.light
+            = user_url(@user)
+          %div
+            = f.submit 'Save username', class: "btn btn-warning"
 
   - if show_profile_remove_tab?
-    %fieldset.remove-account
-      %legend
+    .panel.panel-danger.remove-account
+      .panel-heading
         Remove account
-      %div
+      .panel-body
         %p Deleting an account has the following effects:
         %ul
           %li All user content like authored issues, snippets, comments will be removed
diff --git a/app/views/profiles/applications.html.haml b/app/views/profiles/applications.html.haml
index 353b2496a7c..c145a9b7f6d 100644
--- a/app/views/profiles/applications.html.haml
+++ b/app/views/profiles/applications.html.haml
@@ -5,9 +5,11 @@
   OAuth2 protocol settings below.
 %hr
 
-%fieldset.oauth-applications
-  %legend Your applications
-  %p= link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
+.oauth-applications
+  %h3
+    Your applications
+    .pull-right
+      = link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
   - if @applications.any?
     %table.table.table-striped
       %thead
@@ -28,8 +30,9 @@
             %td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
             %td= render 'doorkeeper/applications/delete_form', application: application
 
-%fieldset.oauth-authorized-applications.prepend-top-20
-  %legend Authorized applications
+.oauth-authorized-applications.prepend-top-20
+  %h3
+    Authorized applications
 
   - if @authorized_tokens.any?
     %table.table.table-striped
diff --git a/app/views/profiles/design.html.haml b/app/views/profiles/design.html.haml
index 6a3b4e88dba..f450ec1c018 100644
--- a/app/views/profiles/design.html.haml
+++ b/app/views/profiles/design.html.haml
@@ -6,49 +6,51 @@
 %hr
 
 = form_for @user, url: profile_path, remote: true, method: :put do |f|
-  %fieldset.application-theme
-    %legend
+  .panel.panel-default.application-theme
+    .panel-heading
       Application theme
-    .themes_opts
-      = label_tag do
-        .prev.default
-        = f.radio_button :theme_id, 1
-        Graphite
+    .panel-body
+      .themes_opts
+        = label_tag do
+          .prev.default
+          = f.radio_button :theme_id, 1
+          Graphite
 
-      = label_tag do
-        .prev.classic
-        = f.radio_button :theme_id, 2
-        Charcoal
+        = label_tag do
+          .prev.classic
+          = f.radio_button :theme_id, 2
+          Charcoal
 
-      = label_tag do
-        .prev.modern
-        = f.radio_button :theme_id, 3
-        Green
+        = label_tag do
+          .prev.modern
+          = f.radio_button :theme_id, 3
+          Green
 
-      = label_tag do
-        .prev.gray
-        = f.radio_button :theme_id, 4
-        Gray
+        = label_tag do
+          .prev.gray
+          = f.radio_button :theme_id, 4
+          Gray
 
-      = label_tag do
-        .prev.violet
-        = f.radio_button :theme_id, 5
-        Violet
+        = label_tag do
+          .prev.violet
+          = f.radio_button :theme_id, 5
+          Violet
 
-      = label_tag do
-        .prev.blue
-        = f.radio_button :theme_id, 6
-        Blue
-    %br
-    .clearfix
+        = label_tag do
+          .prev.blue
+          = f.radio_button :theme_id, 6
+          Blue
+      %br
+      .clearfix
 
-  %fieldset.code-preview-theme
-    %legend
+  .panel.panel-default.code-preview-theme
+    .panel-heading
       Code preview theme
-    .code_highlight_opts
-      - color_schemes.each do |color_scheme_id, color_scheme|
-        = label_tag do
-          .prev
-            = image_tag "#{color_scheme}-scheme-preview.png"
-          = f.radio_button :color_scheme_id, color_scheme_id
-          = color_scheme.gsub(/[-_]+/, ' ').humanize
+    .panel-body
+      .code_highlight_opts
+        - color_schemes.each do |color_scheme_id, color_scheme|
+          = label_tag do
+            .prev
+              = image_tag "#{color_scheme}-scheme-preview.png"
+            = f.radio_button :color_scheme_id, color_scheme_id
+            = color_scheme.gsub(/[-_]+/, ' ').humanize