Style account settings page (doesn't actually work yet)

services/web/app/views/user/settings.jade

@@ -1,53 +1,54 @@
 extends ../layout
 
 block content
-	include ../general/sidebar
+	.content.content-alt
+		.container
+			.row
+				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+					.card
+						.page-header
+							h1 Account Settings
+						.messageArea
+						.container-fluid
+							.row
+								.col-md-5
+									h3 Update Account Info
+									form#userSettings
+										input(type="hidden", name="_csrf", value=csrfToken)
+										.form-group
+											label(for='email') Email
+											input#emailAddress.form-control(type='email', name='email', value=user.email)
+										.form-group
+											label(for='firstName').control-label First Name
+											input#firstName.form-control(type='text', name='first_name', value=user.first_name)
+										.form-group
+											label(for='lastName').control-label Last Name 
+											input#lastName.form-control(type='text', name='last_name', value=user.last_name)
+										.actions
+											button.btn.btn-primary(type='submit') Update
 
-	.content-with-navigation-sidebar
-		.box
-			.row-fluid
-				.span12
-					.page-header
-						h1 Settings
-					.messageArea
-					.tabbable
-						ul.nav.nav-tabs
-							li.active
-								a(href='#personalSettings', data-toggle="tab") Personal
-							li
-								a(href='#editorSettings', data-toggle="tab") Editor
-							li
-								a(href='#passwordReset', data-toggle="tab") Password
-							li
-								a(href='#newsletter', data-toggle="tab") Newsletter
-							li
-								a(href='#dropboxSettings', data-toggle="tab") Dropbox 
-									span.label.label-warning beta
-							li
-								a(href='#deleteAccount', data-toggle="tab") Delete Account
-								
-						form#userSettings.tab-content.form-horizontal
-							input(type="hidden", name="_csrf", value=csrfToken)
-							.tab-pane#personalSettings.active
-								.control-group
-									label(for='firstName').control-label Email
-									.controls
-										input#emailAddress(type='email', name='email', value=user.email)
-								.control-group
-									label(for='firstName').control-label First Name
-									.controls
-										input#firstName(type='text', name='first_name', value=user.first_name)
-								.control-group
-									label(for='lastName').control-label Last Name 
-									.controls
-										input#lastName(type='text', name='last_name', value=user.last_name)
-								.form-actions
-									button.btn.btn-primary.large(type='submit') Update
+								.col-md-5.col-md-offset-1
+									h3 Change Password
+									form#changePasswordForm(method="post", action="/user/password/update")
+										input(type="hidden", name="_csrf", value=csrfToken)
+										.form-group
+											label(for='currentPassword') Current Password
+											input#currentPassword.form-control(type='password', name='currentPassword', placeholder='*********')
+										.form-group
+											label(for='newPassword1') New Password
+											input#newPassword1.form-control(type='password', name='newPassword1', placeholder='************')
+										.form-group
+											label(for='newPassword2') Confirm New Password
+											input#newPassword2.form-control(type='password', name='newPassword2', placeholder='************')
+										.actions
+											button.btn.btn-primary(type='submit') Change
 
-							.tab-pane#dropboxSettings
-								.alert.alert-info 
-									a(href='/help/kb/dropbox-2') Read how dropbox works
-								- if(!userHasDropboxFeature)
+						hr.soften
+
+						h3 Dropbox Integration 
+							span.small
+								a(href='/help/kb/dropbox-2') (Learn more)
+						- if(!userHasDropboxFeature)
 									.alert.alert-info Dropbox sync is a premium feature    
 										a.btn.btn-info(href='/user/subscription/plans') Upgrade
 								- else if(userIsRegisteredWithDropbox)
@@ -57,125 +58,13 @@ block content
 								- else
 									a.btn.btn-info(href='/dropbox/beginAuth') Link to dropbox
 
+						hr.soften
 
-							.tab-pane#editorSettings
-								.control-group
-									label(for='theme').control-label Theme  
-										a(href='/themes') (preview)
-									.controls
-										select(name='theme')#theme
-											each theme in themes
-												if(theme.name == user.ace.theme)
-													option(value=theme.name, selected='selected')= theme.name
-												else
-													option(value=theme.name)= theme.name
-								.control-group
-									label(for='mode').control-label Key Binding 
-									.controls
-										select(name='mode')#mode
-											each mode in editors
-												if(mode == user.ace.mode)
-													option(value=mode, selected='selected')= mode
-												else
-													option(value=mode)= mode
-								.control-group
-									label(for='fontSize').control-label Font Size 
-									.controls
-										select(name='fontSize')#fontSize
-											each fontSize in fontSizes
-												if(fontSize == user.ace.fontSize)
-													option(value=fontSize, selected='selected')= fontSize
-												else
-													option(value=fontSize)= fontSize
-
-								.control-group
-									label(for='autoComplete').control-label
-										| Auto complete
-									.controls
-										if (user.ace.autoComplete)
-											label.radio.inline
-												input(type='radio', name='autoComplete', value='true', checked)
-												| On
-											label.radio.inline
-												input(type='radio', name='autoComplete', value='false')
-												| Off
-										else
-											label.radio.inline
-												input(type='radio', name='autoComplete', value='true')
-												| On
-											label.radio.inline
-												input(type='radio', name='autoComplete', value='false', checked)
-												| Off
-
-								.control-group
-									label(for='spellCheck').control-label
-										| Default Spell check language
-									.controls
-										select(name="spellCheckLanguage")
-											option(value="",selected=(user.ace.spellCheckLanguage == "")) Off
-											optgroup(label="Language")
-												for language in languages
-													option(
-														value=language.code,
-														selected=(language.code == user.ace.spellCheckLanguage)
-													)= language.name
-
-								.control-group
-									label(for="pdfViewer").control-label
-										| PDF Viewer
-									.controls
-										if (user.ace.pdfViewer == "native")
-											label.radio.inline
-												input(type='radio', name='pdfViewer', value='native', checked)
-												| Native (Best image quality)
-											br
-											label.radio.inline
-												input(type='radio', name='pdfViewer', value='pdfjs')
-												| Built in (Pdf page stays the same after recompile)
-										else
-											label.radio.inline
-												input(type='radio', name='pdfViewer', value='native')
-												| Native (Best image quality)
-											br
-											label.radio.inline
-												input(type='radio', name='pdfViewer', value='pdfjs', checked)
-												| Built in (Pdf page stays the same after recompile)
-										
-
-								.form-actions
-									button.btn.btn-primary.large(type='submit') Update
-
-							.tab-pane#passwordReset 
-								a#changePassword.btn Change Password
-
-							.tab-pane#deleteAccount 
-								a#deleteUserAccount.btn.btn-danger(data-csrf=csrfToken) Delete your account
-
-							.tab-pane#newsletter
-								p Every few months we send a news letter out summarizing the new features available, if you would prefer to not receive this email then you are free to unsubscribe below at any time							
-								a#unsubscribeFromNewsletter.btn.btn-danger(data-csrf=csrfToken) Unsubscribe
-
-		include ../general/small-footer
+						p
+							small
+								| Every few months we send a news letter out summarizing the new features available.<br>
+								| If you would prefer to not receive this email then you are free to unsubscribe below at any time.&nbsp;
+								a#unsubscribeFromNewsletter(data-csrf=csrfToken) Click here to Unsubscribe
 
-	#changePasswordModal(style='display: none')
-		.modal
-			form#changePasswordForm(method="post", action="/user/password/update")
-				.modal-header
-					h3 Change Password
-				.modal-body
-					input(type="hidden", name="_csrf", value=csrfToken)
-					.clearfix
-						label(for='xlinput.inputmodal') Current Password
-						.input.inputmodal
-							input.inputmodal.span5#currentPassword(type='password', name='currentPassword', placeholder='*********')
-					.clearfix
-						label(for='xlinput.inputmodal') New Password
-						.input.inputmodal
-							input.inputmodal.span5#newPassword1(type='password', name='newPassword1', placeholder='************')
-					.clearfix
-						label(for='xlinput.inputmodal') New Password
-						.input.inputmodal
-							input.inputmodal.span5#newPassword2(type='password', name='newPassword2', placeholder='************')
-				.modal-footer
-					button(type="submit").btn.btn-primary#confirmPasswordChange Change
-					button.btn.cancel Cancel
+						p Need to leave?
+							a#deleteUserAccount(data-csrf=csrfToken)  Delete your account

services/web/public/stylesheets/components/card.less

@@ -10,6 +10,9 @@
   		margin-top: 0;
   	}
   }
+  > .container-fluid {
+    padding: 0;
+  }
 }
 
 .card-thin {

services/web/public/stylesheets/core/type.less

@@ -32,7 +32,7 @@ h3, .h3 {
 
   small,
   .small {
-    font-size: 65%;
+    font-size: 70%;
   }
 }
 h4, .h4,
@@ -79,7 +79,7 @@ p {
 
 // Ex: 14px base font * 85% = about 12px
 small,
-.small  { font-size: 85%; }
+.small  { font-size: 90%; color: @gray }
 
 // Undo browser default styling
 cite    { font-style: normal; }

services/web/public/stylesheets/core/variables.less

@@ -60,9 +60,9 @@
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
 @font-size-h1:            floor((@font-size-base * 2)); // ~36px
-@font-size-h2:            floor((@font-size-base * 1.8)); // ~30px
-@font-size-h3:            ceil((@font-size-base * 1.6)); // ~24px
-@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h2:            floor((@font-size-base * 1.6)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.25)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.1)); // ~18px
 @font-size-h5:            @font-size-base;
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px