Profile styling, layout and cleanup.

src/styles/_user.sass

@@ -67,131 +67,6 @@
         &:hover
           background-color: lighten($provider-color-google, 7%)
 
-#settings
-  #settings-sidebar
-    +media-xs
-      width: 100%
-
-    +container-box
-    background-color: $color-background-light
-    color: $color-text
-    margin-right: 15px
-    width: 30%
-
-    .settings-content
-      padding: 0
-
-      ul
-        list-style: none
-        margin: 0
-        padding: 0
-
-      a
-        &:hover
-          text-decoration: none
-
-          li
-            background-color: lighten($color-background, 5%)
-
-        li
-          border-bottom: thin solid $color-background
-          border-left: thick solid transparent
-          margin: 0
-          padding: 25px
-          transition: all 100ms ease-in-out
-
-          i
-            font-size: 1.1em
-            padding-right: 15px
-
-      .active
-        li
-          background-color: lighten($color-background, 5%)
-          border-left: thick solid $color-info
-
-
-  #settings-container
-    +media-xs
-      width: 100%
-
-    +container-box
-    background-color: $color-background-light
-    width: 70%
-
-  .settings-header
-    background-color: $color-background
-    border-top-left-radius: 3px
-    border-top-right-radius: 3px
-
-    .settings-title
-      font:
-        size: 1.5em
-        weight: 300
-      padding: 10px 15px 10px 25px
-
-  .settings-content
-    padding: 25px
-
-    .settings-billing-info
-      font-size: 1.2em
-
-    .subscription-active
-      color: $color-success
-      padding-bottom: 20px
-    .subscription-demo
-      color: $color-info
-      margin-top: 0
-    .subscription-missing
-      color: $color-danger
-      margin-top: 0
-
-  .button-submit
-    clear: both
-    display: block
-    min-width: 200px
-    margin: 0 auto
-    +button($color-primary, 3px, true)
-
-
-#settings-container
-  #settings-form
-    width: 100%
-
-
-  .settings-form
-    align-items: center
-    display: flex
-    justify-content: center
-
-    .left, .right
-      padding: 25px 0
-
-    .left
-      width: 60%
-      float: left
-
-    .right
-      width: 40%
-      float: right
-      text-align: center
-
-    label
-      color: $color-text
-      display: block
-
-    .settings-avatar
-      img
-        border-radius: 3px
-
-      span
-        display: block
-        padding: 15px 0
-        font:
-          size: .9em
-
-    .settings-password
-      color: $color-text-dark-primary
-
 
 #user-edit-container
   padding: 15px

src/templates/users/settings/base.pug

@@ -1,36 +1,34 @@
 | {% extends 'layout.html' %}
+include ../../mixins/components
+
 //- Don't extend this base file directly. Instead, extend page.html so that Pillar extensions
 //- can provide overrides.
 | {% block body %}
-.container
-	#settings.d-flex.py-4.flex-xs-column
-		#settings-sidebar
+.container.py-4
+	.row
+		.col-md-3
 			| {% block settings_sidebar %}
-			.settings-header
-				.settings-title Settings
-			.settings-content
-				ul
+			+nav-secondary('Settings')(class="nav-secondary-vertical bg-light")
 				| {% block settings_sidebar_menu %}
-					a(class="{% if title == 'profile' %}active{% endif %}",
+				+nav-secondary-link(
+					class="{% if title == 'profile' %}active{% endif %} border-top",
 					href="{{ url_for('settings.profile') }}")
-						li
-							i.pi-vcard
-							| Profile
+					i.pr-3.pi-vcard
+					span Profile
 				| {% endblock settings_sidebar_menu %}
+
 				| {% block settings_sidebar_menu_bottom %}
-					a(class="{% if title == 'roles' %}active{% endif %}",
+				+nav-secondary-link(
+					class="{% if title == 'roles' %}active{% endif %}",
 					href="{{ url_for('settings.roles') }}")
-						li
-							i.pi-cog
-							| Roles & Capabilities
+					i.pr-3.pi-cog
+					span Roles & Capabilities
 				| {% endblock settings_sidebar_menu_bottom %}
 			| {% endblock %}
 
-		#settings-container
-			.settings-header
-				.settings-title {% block settings_page_title %}{{ _("Title not set") }}{% endblock %}
+		.col-md-9
+			h3.py-1 {% block settings_page_title %}{{ _("Title not set") }}{% endblock %}
 
-			.settings-content
 			| {% block settings_page_content %}No content set, update your template.{% endblock %}
 
 | {% endblock %}

src/templates/users/settings/profile.pug

@@ -21,7 +21,7 @@ style.
 | {% block settings_page_content %}
 .settings-form
 	form#settings-form(method='POST', action="{{url_for('settings.profile')}}")
-		.left
+		.pb-3
 			.form-group
 				| {{ form.username.label }}
 				| {{ form.username(size=20, class='form-control') }}
@@ -45,14 +45,13 @@ style.
 				| {{ current_user.badges_html|safe }}
 				p.hint-text Note that updates to these badges may take a few minutes to be visible here.
 			| {% endif %}
-		.right
-			.settings-avatar
+		.py-3
 			a(href="https://gravatar.com/")
-					img(src="{{ current_user.gravatar }}")
-					span {{ _("Change Gravatar") }}
+				img.rounded-circle(src="{{ current_user.gravatar }}")
+				span.p-3 {{ _("Change Gravatar") }}
 
-		.buttons
-			button.btn.btn-outline-success.button-submit(type='submit')
-				i.pi-check
+		.py-3
+			button.btn.btn-outline-success.px-5.button-submit(type='submit')
+				i.pi-check.pr-2
 				| {{ _("Save Changes") }}
 | {% endblock %}