From df279251b7f6db01a417bc6b13b84490c3c3b687 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 25 Mar 2019 14:38:38 -0400
Subject: [PATCH] REFACTOR: More consistent user/group page layouts

---
 .../discourse/templates/group-index.hbs       |   3 +
 .../javascripts/discourse/templates/group.hbs |  11 +-
 .../discourse/templates/group/activity.hbs    |   7 +-
 .../discourse/templates/group/manage.hbs      |   7 +-
 .../discourse/templates/group/messages.hbs    |   4 +-
 .../templates/mobile/group-index.hbs          |   2 +
 .../discourse/templates/preferences.hbs       |   4 +-
 .../templates/preferences/categories.hbs      |   8 +-
 .../templates/preferences/notifications.hbs   |   2 +
 .../discourse/templates/preferences/tags.hbs  |   8 +-
 .../discourse/templates/preferences/users.hbs |   8 +-
 .../discourse/templates/user-invited-show.hbs |   6 +-
 .../javascripts/discourse/templates/user.hbs  |   7 +-
 .../discourse/templates/user/activity.hbs     |  17 +-
 .../discourse/templates/user/messages.hbs     |   4 +-
 .../templates/user/notifications.hbs          |  11 +-
 .../discourse/templates/user/summary.hbs      |   6 +-
 app/assets/stylesheets/common/base/group.scss |   2 +-
 app/assets/stylesheets/common/base/user.scss  | 206 +++++++++---------
 app/assets/stylesheets/desktop/user.scss      | 117 ++--------
 app/assets/stylesheets/mobile/discourse.scss  |  31 +--
 app/assets/stylesheets/mobile/user.scss       |  62 +++++-
 .../acceptance/preferences-test.js.es6        |   2 +-
 23 files changed, 251 insertions(+), 284 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/group-index.hbs b/app/assets/javascripts/discourse/templates/group-index.hbs
index a137183795..583e827abe 100644
--- a/app/assets/javascripts/discourse/templates/group-index.hbs
+++ b/app/assets/javascripts/discourse/templates/group-index.hbs
@@ -1,3 +1,5 @@
+<section class="user-content">
+
 <div class="group-members-actions">
     {{text-field value=filterInput
         placeholderKey=filterPlaceholder
@@ -77,3 +79,4 @@
 
   <div>{{i18n "groups.empty.members"}}</div>
 {{/if}}
+</section>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs
index bb593409f6..5ac0a81101 100644
--- a/app/assets/javascripts/discourse/templates/group.hbs
+++ b/app/assets/javascripts/discourse/templates/group.hbs
@@ -53,16 +53,13 @@
       {{/if}}
     </div>
   </div>
-
-  <div class="list-controls">
+<div class="user-content-wrapper">
+  <section class="user-primary-navigation">
     <div class="container">
       {{group-navigation group=model currentPath=application.currentPath tabs=tabs}}
     </div>
-  </div>
+  </section>
 
-    <div class='user-table'>
-      <div class='wrapper'>
         {{outlet}}
-      </div>
-    </div>
 </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/templates/group/activity.hbs b/app/assets/javascripts/discourse/templates/group/activity.hbs
index ce6ec6d9bd..ba0eaadfed 100644
--- a/app/assets/javascripts/discourse/templates/group/activity.hbs
+++ b/app/assets/javascripts/discourse/templates/group/activity.hbs
@@ -1,4 +1,4 @@
-<section class="user-navigation">
+  <section class="user-secondary-navigation">
   {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
     {{group-activity-filter filter="posts" categoryId=category_id}}
     {{group-activity-filter filter="topics" categoryId=category_id}}
@@ -8,7 +8,6 @@
     {{plugin-outlet name="group-activity-bottom" tagName='' connectorTagName='li'}}
   {{/mobile-nav}}
 </section>
-
-<section class='user-right'>
+<section class="user-content">
   {{outlet}}
-</section>
+  </section>
diff --git a/app/assets/javascripts/discourse/templates/group/manage.hbs b/app/assets/javascripts/discourse/templates/group/manage.hbs
index 6357ae842a..583edecf3a 100644
--- a/app/assets/javascripts/discourse/templates/group/manage.hbs
+++ b/app/assets/javascripts/discourse/templates/group/manage.hbs
@@ -1,4 +1,4 @@
-<section class='user-navigation'>
+<section class='user-secondary-navigation'>
   {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
     {{#each tabs as |tab|}}
       <li>
@@ -9,7 +9,6 @@
     {{/each}}
   {{/mobile-nav}}
 </section>
-
-<section class='user-right'>
+<section class="user-content">
   {{outlet}}
-</section>
+  </section>
diff --git a/app/assets/javascripts/discourse/templates/group/messages.hbs b/app/assets/javascripts/discourse/templates/group/messages.hbs
index 78d73cc439..fa98699147 100644
--- a/app/assets/javascripts/discourse/templates/group/messages.hbs
+++ b/app/assets/javascripts/discourse/templates/group/messages.hbs
@@ -1,4 +1,4 @@
-<section class="user-navigation">
+  <section class="user-secondary-navigation">
   {{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=application.currentPath}}
 
     <li>
@@ -13,6 +13,6 @@
     </li>
   {{/mobile-nav}}
 </section>
-<section class='user-right messages'>
+<section class="user-content">
     {{outlet}}
 </section>
diff --git a/app/assets/javascripts/discourse/templates/mobile/group-index.hbs b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
index ed467fba35..8bf3d5207c 100644
--- a/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
@@ -1,3 +1,4 @@
+<section class="user-content">
 {{text-field value=filterInput
     placeholderKey=filterPlaceholder
     autocomplete="discourse"
@@ -56,3 +57,4 @@
 
   <div>{{i18n "groups.empty.members"}}</div>
 {{/if}}
+</section>
diff --git a/app/assets/javascripts/discourse/templates/preferences.hbs b/app/assets/javascripts/discourse/templates/preferences.hbs
index 82712f6026..a7c88a5e02 100644
--- a/app/assets/javascripts/discourse/templates/preferences.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-preferences" class="user-navigation"}}
+{{#d-section pageClass="user-preferences" class="user-secondary-navigation"}}
   {{#mobile-nav class='preferences-nav' desktopClass='preferences-list action-list nav-stacked' currentPath=application.currentPath}}
     <li class='nav-account'>
       {{#link-to 'preferences.account'}}
@@ -53,7 +53,7 @@
   {{/mobile-nav}}
 {{/d-section}}
 
-<section class='user-right user-preferences'>
+<section class='user-content user-preferences'>
   {{plugin-outlet name="above-user-preferences"}}
 
   <form class="form-vertical">
diff --git a/app/assets/javascripts/discourse/templates/preferences/categories.hbs b/app/assets/javascripts/discourse/templates/preferences/categories.hbs
index 6c9740c231..f76b48e827 100644
--- a/app/assets/javascripts/discourse/templates/preferences/categories.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/categories.hbs
@@ -1,7 +1,7 @@
 <div class="control-group category-notifications">
   <label class="control-label">{{i18n 'user.categories_settings'}}</label>
 
-  <div class="controls category-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-watching"}} {{i18n 'user.watched_categories'}}</label>
     {{category-selector categories=model.watchedCategories blacklist=selectedCategories}}
   </div>
@@ -12,7 +12,7 @@
     </div>
   {{/if}}
 
-  <div class="controls category-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-tracking"}} {{i18n 'user.tracked_categories'}}</label>
     {{category-selector categories=model.trackedCategories blacklist=selectedCategories}}
   </div>
@@ -23,13 +23,13 @@
     </div>
   {{/if}}
 
-  <div class="controls category-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-watching-first"}} {{i18n 'user.watched_first_post_categories'}}</label>
     {{category-selector categories=model.watchedFirstPostCategories blacklist=selectedCategories}}
   </div>
   <div class="instructions">{{i18n 'user.watched_first_post_categories_instructions'}}</div>
 
-  <div class="controls category-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-muted"}} {{i18n 'user.muted_categories'}}</label>
     {{category-selector categories=model.mutedCategories blacklist=selectedCategories}}
   </div>
diff --git a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs b/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
index 5c06984a87..e97b28d901 100644
--- a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
@@ -1,4 +1,6 @@
 <div class="control-group notifications">
+      <label class="control-label">{{i18n 'user.notifications'}}</label>
+
   <div class="controls controls-dropdown">
     <label>{{i18n 'user.new_topic_duration.label'}}</label>
     {{combo-box class="duration" valueAttribute="value" content=considerNewTopicOptions value=model.user_option.new_topic_duration_minutes}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/tags.hbs b/app/assets/javascripts/discourse/templates/preferences/tags.hbs
index 6e7c273147..1e7880f23b 100644
--- a/app/assets/javascripts/discourse/templates/preferences/tags.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/tags.hbs
@@ -3,7 +3,7 @@
 
   <label class="control-label">{{i18n 'user.tag_settings'}}</label>
 
-  <div class="controls tag-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-watching" class="icon watching"}} {{i18n 'user.watched_tags'}}</label>
     {{tag-chooser
       tags=model.watched_tags
@@ -15,7 +15,7 @@
   </div>
   <div class="instructions">{{i18n 'user.watched_tags_instructions'}}</div>
 
-  <div class="controls tag-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-tracking" class="icon tracking"}} {{i18n 'user.tracked_tags'}}</label>
     {{tag-chooser
       tags=model.tracked_tags
@@ -27,7 +27,7 @@
   </div>
   <div class="instructions">{{i18n 'user.tracked_tags_instructions'}}</div>
 
-  <div class="controls tag-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-watching-first" class="icon watching-first-post"}} {{i18n 'user.watched_first_post_tags'}}</label>
     {{tag-chooser
       tags=model.watching_first_post_tags
@@ -39,7 +39,7 @@
   </div>
   <div class="instructions">{{i18n 'user.watched_first_post_tags_instructions'}}</div>
 
-  <div class="controls tag-controls">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-muted" class="icon muted"}} {{i18n 'user.muted_tags'}}</label>
     {{tag-chooser
       tags=model.muted_tags
diff --git a/app/assets/javascripts/discourse/templates/preferences/users.hbs b/app/assets/javascripts/discourse/templates/preferences/users.hbs
index 7249b6140a..b6518ace59 100644
--- a/app/assets/javascripts/discourse/templates/preferences/users.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/users.hbs
@@ -1,13 +1,13 @@
-<div class="control-group muting">
-  <label class="control-label">{{i18n 'user.users'}}</label>
-  <div class="controls category-controls">
+<label class="control-label">{{i18n 'user.users'}}</label>
+<div class="control-group">
+  <div class="controls tracking-controls">
     <label>{{d-icon "d-muted" class="``icon"}} {{i18n 'user.muted_users'}}</label>
     {{user-selector excludeCurrentUser=true usernames=model.muted_usernames class="user-selector"}}
   </div>
   <div class="instructions">{{i18n 'user.muted_users_instructions'}}</div>
 
   {{#if siteSettings.ignore_user_enabled}}
-    <div class="controls category-controls">
+    <div class="controls tracking-controls">
       <label>{{d-icon "eye-slash" class="icon"}} {{i18n 'user.ignored_users'}}</label>
       {{user-selector excludeCurrentUser=true
                       usernames=model.ignored_usernames class="user-selector"}}
diff --git a/app/assets/javascripts/discourse/templates/user-invited-show.hbs b/app/assets/javascripts/discourse/templates/user-invited-show.hbs
index 5b4c000b3b..66a9954511 100644
--- a/app/assets/javascripts/discourse/templates/user-invited-show.hbs
+++ b/app/assets/javascripts/discourse/templates/user-invited-show.hbs
@@ -1,7 +1,7 @@
-{{#d-section pageClass="user-invites"}}
+{{#d-section pageClass="user-invites" tagName=""}}
   {{#if canInviteToForum}}
-    {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .user-invite-list tr" action=(action "loadMore")}}
-      <section class='user-content'>
+    {{#load-more class="user-content" selector=".user-invite-list tr" action=(action "loadMore")}}
+      <section>
         <h2>{{i18n 'user.invited.title'}}</h2>
 
         {{#if model.can_see_invite_details}}
diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index a794d52a05..0c3669d789 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -213,6 +213,9 @@
       {{/unless}}
     </section>
 
+    <div class='user-content-wrapper'>
+
+    <section class="user-primary-navigation">
     {{#mobile-nav class='main-nav' desktopClass="nav nav-pills user-nav" currentPath=currentPath}}
       {{#unless model.profile_hidden}}
         <li>{{#link-to 'user.summary'}}{{i18n 'user.summary.title'}}{{/link-to}}</li>
@@ -239,11 +242,9 @@
         <li>{{#link-to 'preferences'}}{{d-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>
       {{/if}}
     {{/mobile-nav}}
+    </section>
 
-    <div class='user-table'>
-      <div class='wrapper'>
         {{outlet}}
-      </div>
     </div>
 
   {{/d-section}}
diff --git a/app/assets/javascripts/discourse/templates/user/activity.hbs b/app/assets/javascripts/discourse/templates/user/activity.hbs
index 15b267e2f8..7dfbb42b0c 100644
--- a/app/assets/javascripts/discourse/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/templates/user/activity.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-activity" class="user-navigation" scrollTop="false"}}
+{{#d-section pageClass="user-activity" class="user-secondary-navigation" scrollTop="false"}}
   {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
     <li>
       {{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
@@ -26,14 +26,13 @@
                     connectorTagName='li'
                     args=(hash model=model)}}
   {{/mobile-nav}}
-
-  {{#if canDownloadPosts}}
-    <div class='user-archive'>
-      {{d-button action=(action "exportUserArchive") class="btn-default" label="user.download_archive.button_text" icon="download"}}
-    </div>
-  {{/if}}
+ 
 {{/d-section}}
-
-<section class='user-right'>
+{{#if canDownloadPosts}}
+    <section class='user-additional-controls'>
+      {{d-button action=(action "exportUserArchive") class="btn-default" label="user.download_archive.button_text" icon="download"}}
+    </section>
+{{/if}}
+<section class='user-content'>
   {{outlet}}
 </section>
diff --git a/app/assets/javascripts/discourse/templates/user/messages.hbs b/app/assets/javascripts/discourse/templates/user/messages.hbs
index 157630c629..bfc5eabf37 100644
--- a/app/assets/javascripts/discourse/templates/user/messages.hbs
+++ b/app/assets/javascripts/discourse/templates/user/messages.hbs
@@ -1,4 +1,4 @@
-{{#d-section class="user-navigation" pageClass="user-messages"}}
+{{#d-section class="user-secondary-navigation" pageClass="user-messages"}}
   {{#unless site.mobileView}}
     {{#if showNewPM}}
       {{d-button class="btn-primary new-private-message" action=(route-action "composePrivateMessage") icon="envelope" label="user.new_private_message"}}
@@ -55,7 +55,7 @@
   {{/mobile-nav}}
 {{/d-section}}
 
-<section class='user-right messages'>
+<section class='user-content'>
 
 <div class="list-actions">
   
diff --git a/app/assets/javascripts/discourse/templates/user/notifications.hbs b/app/assets/javascripts/discourse/templates/user/notifications.hbs
index 2c520a5247..e6b2137205 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/user/notifications.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-notifications" class="user-navigation"}}
+{{#d-section pageClass="user-notifications" class="user-secondary-navigation"}}
   {{#mobile-nav class='notifications-nav' desktopClass='notification-list action-list nav-stacked' currentPath=application.currentPath}}
     <li>
       {{#link-to 'userNotifications.index'}}
@@ -29,17 +29,20 @@
     </li>
   {{/mobile-nav}}
 
-  {{#if model}}
+{{/d-section}}
+
+{{#if model}}
+<section class="user-additional-controls">
     {{d-button title='user.dismiss_notifications_tooltip'
                class='btn btn-default dismiss-notifications'
                action=(action "resetNew")
                label='user.dismiss_notifications'
                icon='check'
                disabled=allNotificationsRead}}
+               </section>
   {{/if}}
-{{/d-section}}
 
-<section class='user-right'>
+<section class='user-content'>
   {{#load-more class="notification-history user-stream" selector=".user-stream .notification" action=(action "loadMore")}}
     {{outlet}}
     {{conditional-loading-spinner condition=model.loadingMore}}
diff --git a/app/assets/javascripts/discourse/templates/user/summary.hbs b/app/assets/javascripts/discourse/templates/user/summary.hbs
index cc8e141512..c094329eca 100644
--- a/app/assets/javascripts/discourse/templates/user/summary.hbs
+++ b/app/assets/javascripts/discourse/templates/user/summary.hbs
@@ -1,4 +1,5 @@
-{{#d-section pageClass="user-summary"}}
+{{#d-section pageClass="user-summary" tagName=""}}
+<div class="user-content">
   <div class='top-section stats-section'>
     <h3 class='stats-title'>{{i18n "user.summary.stats"}}</h3>
     <ul>
@@ -44,7 +45,7 @@
       <li>
         {{user-stat value=model.likes_received icon="heart" label="user.summary.likes_received"}}
       </li>
-      {{plugin-outlet name="user-summary-stat" connectorTagName="li" args=(hash model=model)}}
+      {{plugin-outlet name="user-summary-stat" tagName="" connectorTagName="li" args=(hash model=model)}}
     </ul>
   </div>
 
@@ -157,4 +158,5 @@
       {{/if}}
     </div>
   {{/if}}
+  </div>
 {{/d-section}}
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 60186921bd..d5701b9ce2 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -1,6 +1,6 @@
 // We should try to reuse the user page HTML for groups when possible
 // To style group content differently, use the existing classes with a .group parent class.
-// For example: .group .user-navigation
+// For example: .group .user-secondary-navigation
 
 .group-details-container {
   background: $primary-very-low;
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 0f9b2a16a1..63a98e8d5a 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -1,12 +1,79 @@
 // Common styles for "/user" section
 // These styles are also used for "/groups" — test those pages if making significant changes
-.user-right {
+
+.user-content-wrapper {
+  // Grid layout
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+  grid-template-rows: auto auto 1fr auto;
+  grid-row-gap: s(5);
+  .user-primary-navigation {
+    grid-column-start: span 2;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+  .user-secondary-navigation {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: 3;
+  }
+  .user-content,
+  .spinner {
+    grid-row-start: 2;
+    grid-row-end: 4;
+    grid-column-end: span 2;
+  }
+  .user-content {
+    min-width: 100%;
+  }
+  .user-secondary-navigation + .user-content {
+    grid-column-start: 2;
+    grid-column-end: span 1;
+  }
+  .user-additional-controls {
+    grid-row-start: 3;
+    align-self: start;
+    justify-self: start;
+  }
+}
+
+.user-content-wrapper { // IE11 Support
+  display: -ms-grid;
+  -ms-grid-columns: 1fr 5fr;
+  -ms-grid-rows: auto auto 1fr auto;
+  .user-primary-navigation {
+    -ms-grid-row: 1; 
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 2;
+  }
+  .user-secondary-navigation {
+    -ms-grid-row: 1; 
+    -ms-grid-column: 2;
+  }
+  .user-content,
+  .spinner { 
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 2;
+  }
+  .user-secondary-navigation + .user-content {
+    -ms-grid-column: 2;
+    -ms-grid-column-span: 1;
+  }
+  .user-additional-controls {
+    -ms-grid-row: 3;
+    -ms-grid-column-align: start;
+    -ms-grid-row-align: start;
+  }
+}
+
+.user-content {
   .list-actions {
     display: flex;
-    margin-bottom: 10px;
+    margin-bottom: s(3);
 
     .btn {
-      margin-right: 10px;
+      margin-right: s(3);
     }
   }
 
@@ -17,6 +84,10 @@
   .show-mores {
     width: 100%;
   }
+
+  .d-icon-heart {
+    color: $love;
+  }
 }
 
 .user-main {
@@ -163,14 +234,6 @@
     }
 
     &.collapsed-info {
-      .controls {
-        margin-top: 0;
-      }
-
-      .profile-image {
-        height: 0;
-      }
-
       .details {
         margin-top: 0;
         background: rgba($secondary, 0.8);
@@ -180,12 +243,9 @@
         }
 
         .primary {
-          text-align: left;
-          margin-top: 0;
           width: 100%;
 
           .avatar {
-            float: left;
             margin-right: 10px;
             width: 45px;
             height: 45px;
@@ -197,7 +257,6 @@
 
           h2 {
             font-size: $font-up-1;
-            margin-top: 4px;
           }
           h3,
           h3.location-and-website {
@@ -210,7 +269,7 @@
         .avatar-flair {
           bottom: 8px;
           right: 2px;
-          .fa {
+          .d-icon {
             font-size: $font-0;
           }
         }
@@ -229,34 +288,22 @@
       align-items: baseline;
       flex: 0 1 auto;
       margin: 0 10px 0 0;
+      color: $secondary;
+
       span {
-        padding: 1px 6px;
+        padding: 0 7px 1px;
         border-radius: 10px;
         margin-right: 5px;
       }
     }
 
-    a {
-      color: $secondary;
-    }
-
     .active {
       font-weight: bold;
     }
   }
 
-  .pill {
-    border-radius: 15px;
-    display: inline-block;
-    height: 30px;
-    width: 30px;
-    text-align: center;
-    vertical-align: middle;
-    line-height: $line-height-large;
-  }
-
   .helpful-flags {
-    background-color: green;
+    background-color: $success;
   }
 
   .flagged-posts {
@@ -264,25 +311,20 @@
   }
 
   .warnings-received {
-    background-color: #ec441b;
+    background-color: $danger-medium;
   }
 
   .deleted-posts {
-    background-color: #ec441b;
+    background-color: $danger-medium;
   }
 
   .suspensions {
-    background-color: #c22020;
+    background-color: $danger;
   }
 
   .user-field {
-    clear: both;
     margin-bottom: 10px;
 
-    &.text {
-      padding-top: 18px;
-    }
-
     .controls {
       label {
         width: auto;
@@ -291,11 +333,10 @@
       }
 
       .instructions {
-        color: dark-light-choose($primary-medium, $secondary-medium);
+        color: $primary-medium;
         margin-top: 5px;
         margin-bottom: 10px;
         font-size: $font-down-1;
-        line-height: $line-height-large;
       }
     }
   }
@@ -331,42 +372,7 @@
   }
 }
 
-.user-navigation {
-  .map {
-    height: 50px;
-  }
-
-  .avatar {
-    float: left;
-    width: 45px;
-  }
-
-  nav.buttons {
-    width: 180px;
-    padding: 0;
-    .btn {
-      width: 100%;
-      margin-bottom: 5px;
-      box-sizing: border-box;
-    }
-  }
-
-  h2 {
-    a {
-      font-size: $font-0;
-      color: scale-color($tertiary, $lightness: -10%);
-      cursor: pointer;
-    }
-  }
-}
-
-.user-table {
-  position: relative;
-  margin-top: 20px;
-}
-
 .avatar-selector {
-  padding-bottom: 0 !important;
   label.radio {
     padding-left: 10px;
   }
@@ -390,10 +396,6 @@
   }
 }
 
-.user-nav {
-  margin: 5px 0;
-}
-
 .top-section {
   @include clearfix();
   ul {
@@ -424,14 +426,14 @@
 
   li {
     display: inline-block;
-    padding: 10px 14px;
-    margin: 0 5px 10px 0;
+    padding: 10px 14px 10px 0;
+    margin: 0 10px 10px 0;
 
     &.linked-stat {
       // This makes the entire "box" (the li) clickable instead of a narrow area.
       padding: 0;
       a {
-        padding: 10px 14px;
+        padding: 10px 14px 10px 0;
         width: 100%;
         height: 100%;
         display: block;
@@ -440,23 +442,13 @@
     }
   }
 
-  li:last-of-type {
-    margin: 0;
-  }
-
   .value {
     font-weight: bold;
     font-size: $font-up-2;
   }
 
   .label {
-    // TODO: Remove once all languages have been translated to remove icons from
-    // their user-stat labels
-    .fa:nth-of-type(2) {
-      display: none;
-    }
-
-    color: blend-primary-secondary(50%);
+    color: $primary-medium;
   }
 }
 
@@ -474,7 +466,7 @@
   }
 
   .topic-info {
-    color: dark-light-choose($primary-medium, $secondary-high);
+    color: $primary-medium;
   }
 
   @media all and (max-width: 600px) {
@@ -494,7 +486,7 @@
 .links-section {
   .domain {
     font-size: $font-down-1;
-    color: dark-light-choose($primary-medium, $secondary-high);
+    color: $primary-medium;
   }
 }
 
@@ -517,7 +509,7 @@
 
 .summary-user-list {
   li {
-    height: 40px;
+    height: 45px;
   }
 }
 
@@ -532,13 +524,22 @@
     height: 100px;
   }
 
+  .tracking-controls {
+    label {
+      align-items: center;
+      .d-icon {
+        margin-right: 3px;
+      }
+    }
+  }
+
   .static {
     color: $primary;
     display: inline-block;
   }
 
   .instructions {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
     margin-bottom: 10px;
     font-size: $font-down-1;
     line-height: $line-height-large;
@@ -564,8 +565,7 @@
     margin-bottom: 10px;
   }
 
-  .category-notifications .category-controls,
-  .tag-notifications .tag-controls {
+  .tracking-controls {
     margin-top: 24px;
   }
 
@@ -698,7 +698,3 @@
     }
   }
 }
-
-.user-summary-page .d-icon-heart {
-  color: $love;
-}
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 67837649d6..3de610ee9a 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -1,7 +1,5 @@
 // Desktop styles for "/user" section
-.user-right {
-  display: table-cell;
-
+.user-content-wrapper {
   &,
   > .user-stream {
     > .alert:first-child {
@@ -14,46 +12,16 @@
   }
 }
 
-.profile-image {
-  height: 420px;
-  width: 100%;
-  background-size: cover;
-  transition: height 0.15s linear;
-}
-
-.no-background {
-  .profile-image {
-    height: 200px;
-  }
-}
-
 .form-horizontal .control-group.category {
   margin-top: 18px;
 }
 
-.user-table {
-  width: 100%;
-  display: table;
-  table-layout: fixed;
-
-  .wrapper {
-    display: table-row;
-  }
-
-  .new-private-message {
-    margin-bottom: 15px;
-  }
-}
-
 .user-profile-hidden {
   font-size: 1.5em;
   text-align: center;
 }
-.user-navigation {
-  display: table-cell;
-  vertical-align: top;
-  width: 170px;
-
+.user-secondary-navigation {
+  min-width: 150px;
   .nav-stacked {
     background-color: transparent;
 
@@ -61,12 +29,12 @@
       border-bottom: none;
 
       &.archive {
-        padding-left: 1.81em;
+        padding-left: 1.4em;
       }
     }
 
     a {
-      color: dark-light-choose($primary-medium, $secondary-high);
+      color: $primary-medium;
 
       &.active {
         color: $primary;
@@ -82,9 +50,9 @@
 }
 
 .user-content {
-  padding: 10px 8px;
+  padding-bottom: s(3);
+  margin-bottom: s(3);
   background-color: $secondary;
-  margin-bottom: 10px;
   box-sizing: border-box;
 
   &.user-badges-list {
@@ -103,8 +71,8 @@
 
 .pref-avatar {
   .avatar {
-    max-width: 45px;
-    max-height: 45px;
+    max-width: 90px;
+    max-height: 90px;
   }
 }
 
@@ -128,8 +96,7 @@
 }
 
 .user-invite-none {
-  clear: both;
-  padding: 15px;
+  padding: 15px 0;
 }
 
 .user-main {
@@ -148,7 +115,7 @@
     }
 
     .details {
-      padding: 0 0 4px 0;
+      padding-bottom: s(2);
       transition: margin 0.15s linear;
 
       img.avatar {
@@ -158,7 +125,7 @@
 
       .primary {
         .primary-textual {
-          padding: 3px;
+          padding: s(0 1 1);
           a[href] {
             text-decoration: underline;
           }
@@ -199,11 +166,6 @@
       .btn {
         min-width: 140px;
       }
-
-      .right {
-        float: right;
-        margin-left: 5px;
-      }
     }
 
     &.collapsed-info {
@@ -216,7 +178,6 @@
           }
 
           a {
-            padding: 5px 10px;
             margin-bottom: 10px;
             width: auto;
           }
@@ -256,18 +217,9 @@
   .public-user-fields {
     overflow: hidden;
   }
-
-  .viewing-self & .about.collapsed-info {
-    .secondary,
-    .staff-counters {
-      display: inherit;
-    }
-  }
 }
 
 .user-preferences {
-  display: table-cell;
-  vertical-align: top;
   padding-top: 10px;
   padding-left: 30px;
 
@@ -283,52 +235,13 @@
 
   .category-selector,
   .tag-chooser,
-  textarea {
+  textarea,
+  input.user-selector {
     width: 100%;
   }
 
-  input {
-    &.user-selector {
-      width: 100%;
-    }
-  }
-
-  .tag-controls,
-  .category-controls {
-    label {
-      align-items: center;
-      .d-icon {
-        margin-right: 3px;
-      }
-    }
-  }
-
   .instructions {
     display: inline-block;
-    margin-top: 0;
-  }
-
-  .pref-mailing-list-mode .controls {
-    select {
-      width: 400px;
-    }
-  }
-
-  .notifications,
-  .category-notifications,
-  .tag-notifications,
-  .user-custom-preferences-outlet {
-    .controls select {
-      width: 280px;
-    }
-  }
-
-  .user-main & .user-field.text {
-    padding-top: 0;
-  }
-
-  .image-upload-controls {
-    display: flex;
-    align-items: center;
+    margin-top: s(1);
   }
 }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index d7f07da401..00e72aa67c 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -46,31 +46,19 @@ blockquote {
   font-weight: normal;
 }
 
-.mobile-view .mobile-nav {
+.mobile-nav {
   margin: 0;
   padding: 0;
-  background: $primary-low;
   list-style: none;
   overflow: visible;
   position: relative;
-  width: 45%;
-
-  &.messages-nav,
-  &.notifications-nav,
-  &.activity-nav,
-  &.preferences-nav {
-    position: absolute;
-    right: 0;
-    top: -57px;
-  }
+  border: 1px solid $primary-medium;
 
   a {
     color: $primary;
-
-    .fa {
-      margin-right: 8px;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-      line-height: $line-height-medium;
+    .d-icon {
+      margin-right: .25em;
+      color: $primary-medium;
     }
   }
 
@@ -83,8 +71,11 @@ blockquote {
     box-sizing: border-box;
   }
 
-  .d-icon-caret-down {
-    margin-left: auto;
+  .expander .d-icon {
+    &:last-of-type {
+      margin-left: auto;
+      margin-right: 0;
+    }
   }
 
   .drop {
@@ -99,7 +90,7 @@ blockquote {
       list-style: none;
       margin: 0;
       padding: 5px;
-      border: 1px solid #eaeaea;
+      border: 1px solid $primary-low;
       box-sizing: border-box;
 
       li {
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 8e9913146c..e62353e909 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -1,12 +1,40 @@
 // Mobile styles for "/user" section
 
+.user-content-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto auto;
+  grid-row-gap: s(5);
+  grid-column-gap: s(4);
+  .user-primary-navigation {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .user-secondary-navigation {
+    grid-column-start: 2;
+    grid-row-start: 1;
+  }
+  .user-secondary-navigation + .user-content {
+    grid-column-start: 1;
+    grid-column-end: span 2;
+  }
+  .user-additional-controls {
+    grid-column-start: 1;
+    grid-row-start: 2;
+  }
+  .user-content,
+  .spinner {
+    grid-row-start: 3;
+    grid-column-start: span 2;
+  }
+}
+
 .user-main {
   margin-top: s(3);
 
   .user-content {
     box-sizing: border-box;
     background-color: $secondary;
-    margin-top: s(3);
     table {
       width: 100%;
       margin-top: s(3);
@@ -256,3 +284,35 @@
     }
   }
 }
+
+.user-invites-page {
+  .admin-controls {
+    flex-wrap: wrap;
+    .pull-right {
+      flex: 1 1 100%;
+      font-size: $font-down-1;
+      padding: 0;
+    }
+  }
+  table {
+    tr:first-of-type {
+      display: none;
+    }
+    tr {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 1em;
+    }
+    td:first-of-type {
+      margin-right: 1em;
+    }
+    td:nth-of-type(n + 3) {
+      display: block;
+      width: 50%;
+      padding: 0.25em 0 1em 0;
+    }
+  }
+  .user-invite-none {
+    margin-top: 1em;
+  }
+}
diff --git a/test/javascripts/acceptance/preferences-test.js.es6 b/test/javascripts/acceptance/preferences-test.js.es6
index d5ab2f6e05..e181fcaf0d 100644
--- a/test/javascripts/acceptance/preferences-test.js.es6
+++ b/test/javascripts/acceptance/preferences-test.js.es6
@@ -83,7 +83,7 @@ QUnit.test("update some fields", async assert => {
   await savePreferences();
 
   click(".preferences-nav .nav-categories a");
-  fillIn(".category-controls .category-selector", "faq");
+  fillIn(".tracking-controls .category-selector", "faq");
   await savePreferences();
 
   assert.ok(