Emails settings

Closes #13857

3 files changed, 51 insertions, 48 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 3e6e1ed0ef1..171cbd6deed 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -54,11 +54,16 @@
   }
 }
 
-.two-factor-new-manual-panel {
+.account-well {
   padding: 10px 10px;
   background-color: #FAFAFA;
   border: 1px solid #E5E5E5;
   border-radius: 3px;
+
+  ul {
+    padding-left: 20px;
+    margin-bottom: 0;
+  }
 }
 
 .two-factor-new-manual-content {
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index af72e506b4b..be3ae942e7f 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -44,7 +44,7 @@
         .col-md-3
           = raw @qr_code
         .col-md-9
-          .two-factor-new-manual-panel
+          .account-well
             %p.two-factor-new-manual-content
               Can't scan the code?
             %p.two-factor-new-manual-content
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 705e1804717..a962c4ea284 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,50 +1,48 @@
 - page_title "Emails"
 - header_title page_title, profile_emails_path
 
-.alert.alert-help.prepend-top-default
-  %ul
-    %li
-      Your
-      %b Primary Email
-      will be used for avatar detection and web based operations, such as edits and merges.
-    %li
-      Your
-      %b Notification Email
-      will be used for account notifications.
-    %li
-      Your
-      %b Public Email
-      will be displayed on your public profile.
-    %li
-      All email addresses will be used to identify your commits.
-
-.panel.panel-default
-  .panel-heading
-    Emails (#{@emails.count + 1})
-  %ul.well-list#emails-table
-    %li
-      %strong= @primary
-      %span.label.label-success Primary Email
-      - if @primary === current_user.public_email
-        %span.label.label-info Public Email
-      - if @primary === current_user.notification_email
-        %span.label.label-info Notification Email
-    - @emails.each do |email|
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      Control emails linked to your account
+  .col-lg-9
+    %h4 Add email address
+    = form_for 'email', url: profile_emails_path do |f|
+      .form-group
+        = f.label :email, class: 'label-light'
+        = f.text_field :email, class: 'form-control'
+      .prepend-top-default
+        = f.submit 'Add email address', class: 'btn btn-create'
+    %hr
+    %h4
+      Linked emails (#{@emails.count + 1})
+    .account-well.append-bottom-default
+      %ul
+        %li
+          Your Primary Email will be used for avatar detection and web based operations, such as edits and merges.
+        %li
+          Your Notification Email will be used for account notifications.
+        %li
+          Your Public Email will be displayed on your public profile.
+        %li
+          All email addresses will be used to identify your commits.
+    %ul.well-list
       %li
-        %strong= email.email
-        - if email.email === current_user.public_email
-          %span.label.label-info Public Email
-        - if email.email === current_user.notification_email
-          %span.label.label-info Notification Email
-        %span.cgray
-          added #{time_ago_with_tooltip(email.created_at)}
-        = link_to 'Remove', profile_email_path(email), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove pull-right'
-
-%h4 Add email address
-= form_for 'email', url: profile_emails_path, html: { class: 'form-horizontal' } do |f|
-  .form-group
-    = f.label :email, class: 'control-label'
-    .col-sm-10
-      = f.text_field :email, class: 'form-control'
-  .form-actions
-    = f.submit 'Add email address', class: 'btn btn-create'
+        = @primary
+        %span.pull-right
+          %span.label.label-success Primary Email
+          - if @primary === current_user.public_email
+            %span.label.label-info Public Email
+          - if @primary === current_user.notification_email
+            %span.label.label-info Notification Email
+      - @emails.each do |email|
+        %li
+          = email.email
+          %span.pull-right
+            - if email.email === current_user.public_email
+              %span.label.label-info Public Email
+            - if email.email === current_user.notification_email
+              %span.label.label-info Notification Email
+          = link_to 'Remove', profile_email_path(email), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove pull-right'