Style login and register forms

services/web/app/coffee/Features/ServerAdmin/AdminController.coffee

@@ -2,7 +2,6 @@ metrics = require("metrics-sharelatex")
 logger = require('logger-sharelatex')
 _ = require('underscore')
 User = require('../../models/User').User
-Quote = require('../../models/Quote').Quote
 Project = require('../../models/Project').Project
 DocumentUpdaterHandler = require('../DocumentUpdater/DocumentUpdaterHandler')
 Settings = require('settings-sharelatex')
@@ -108,13 +107,6 @@ module.exports = AdminController =
 			logger.log "all docs have been saved to mongo"
 			res.send()
 
-	addQuote : (req, res)->
-		quote = new Quote
-			author: req.body.author
-			quote: req.body.quote
-		quote.save (err)->
-			res.send 200
-
 	syncUserToSubscription: (req, res)->
 		{user_id, subscription_id} = req.body
 		RecurlyWrapper.getSubscription subscription_id, {}, (err, subscription)->

services/web/app/coffee/Features/StaticPages/HomeController.coffee

@@ -1,6 +1,5 @@
 logger = require('logger-sharelatex')
 _ = require('underscore')
-Quotes = require('../../models/Quote').Quote
 
 Path = require "path"
 fs = require "fs"

services/web/app/coffee/models/Quote.coffee

@@ -1,13 +0,0 @@
-mongoose = require 'mongoose'
-Settings = require 'settings-sharelatex'
-
-Schema = mongoose.Schema
-ObjectId = Schema.ObjectId
-
-QuoteSchema = new Schema
-	author          :     {type:String, default:'new quote'}
-	quote           :     {type:String}
-
-mongoose.model 'Quote', QuoteSchema
-exports.Quote = mongoose.model 'Quote'
-exports.QuoteSchema = QuoteSchema

services/web/app/coffee/router.coffee

@@ -62,6 +62,7 @@ module.exports = class Router
 		app.get '/security', HomeController.externalPage("security", "Security")
 		app.get '/privacy_policy', HomeController.externalPage("privacy", "Privacy Policy")
 		app.get '/planned_maintenance', HomeController.externalPage("planned_mainteance", "Planned Maintenance")
+		app.get '/style', HomeController.externalPage("style_guide", "Style Guide")
 
 		app.get '/themes', InfoController.themes
 		app.get '/advisor', InfoController.advisor
@@ -160,7 +161,6 @@ module.exports = class Router
 		app.post '/admin/closeEditor', SecurityManager.requestIsAdmin, AdminController.closeEditor
 		app.post '/admin/dissconectAllUsers', SecurityManager.requestIsAdmin, AdminController.dissconectAllUsers
 		app.post '/admin/writeAllDocsToMongo', SecurityManager.requestIsAdmin, AdminController.writeAllToMongo
-		app.post '/admin/addquote', SecurityManager.requestIsAdmin, AdminController.addQuote
 		app.post '/admin/syncUserToSubscription', SecurityManager.requestIsAdmin, AdminController.syncUserToSubscription
 		app.post '/admin/flushProjectToTpds', SecurityManager.requestIsAdmin, AdminController.flushProjectToTpds
 		app.post '/admin/pollUsersWithDropbox', SecurityManager.requestIsAdmin, AdminController.pollUsersWithDropbox

services/web/app/views/external/style_guide.jade

@@ -0,0 +1,62 @@
+extends ../layout
+
+block content
+	.content
+		.container
+			.row
+				.col-md-8.col-md-offset-2
+					h1 ShareLaTeX CSS Style Guide
+
+					h2 Headings
+
+					p Here are our heading styles:
+
+					h1 Heading level 1
+					p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
+
+					h2 Heading level 2
+					p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
+
+					h3 Heading level 3
+					p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
+
+					h4 Heading level 4
+					p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
+
+					h2 Buttons
+
+					p Our primary button is red:
+					p
+						a.btn.btn-primary(href="#") Primary Button
+					p Our secondary button is blue:
+					p
+						a.btn.btn-info(href="#") Secondary Button
+					p All button styles
+					p
+						.btn-toolbar
+							a.btn.btn-primary(href="#") Primary
+							a.btn.btn-info(href="#") Info (secondary)
+							a.btn.btn-default(href="#") Default
+							a.btn.btn-success(href="#") Success
+							a.btn.btn-warning(href="#") Warning
+							a.btn.btn-danger(href="#") Danger
+
+					h2 Hyperlinks
+
+					p Hyperlinks are highlighted 
+						a(href="#") as shown
+						|.
+
+					h2 Alerts
+
+					.alert.alert-danger An <code>.alert-danger</code> alert
+					.alert.alert-success An <code>.alert-success</code> alert
+					.alert.alert-info An <code>.alert-info</code> alert
+					.alert.alert-warning An <code>.alert-warning</code> alert
+
+	.content.content-alt
+		.container
+			.row
+				.col-md-8.col-md-offset-2
+					.card
+						p Cards look best on a <code>.content.content-alt</code> background

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

@@ -12,12 +12,10 @@ block content
 						form.validate#loginForm(enctype='multipart/form-data', method='post')
 							input(name='_csrf', type='hidden', value=csrfToken)
 							input(name='redir', type='hidden', value=redir)
-							.clearfix
-								.input
-									input.span4#email.email.required(type='email', autofocus="autofocus", name='email', placeholder='your@email.com')
-							.clearfix
-								.input
-									input.span4#password.required(type='password', name='password', placeholder='********')
+							.form-group
+								input#email.email.required.form-control(type='email', autofocus="autofocus", name='email', placeholder='your@email.com')
+							.form-group
+								input#password.required.form-control(type='password', name='password', placeholder='********')
 							.actions
-								button.btn-primary.btn.btn-large#login(type='submit') Login
-								a#passwordReset(href='/user/passwordreset') Forgot your password?
+								button.btn-primary.btn#login(type='submit') Login
+								a#passwordReset.pull-right(href='/user/passwordreset') Forgot your password?

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

@@ -1,37 +1,33 @@
 extends ../layout
 
 block content
-	.container
-		.row
-			.registration_message
-				if sharedProjectData.user_first_name !== undefined
-					h1 #{sharedProjectData.user_first_name} would like you to view '#{sharedProjectData.project_name}'
-					div Join ShareLaTeX to view this project
-				else if newTemplateData.templateName !== undefined
-					h1 Please register to edit the '#{newTemplateData.templateName}' template
-					div Already have a ShareLaTeX account? 
-						a(href="/login") Login here
+	.content.content-alt
+		.container
+			.row
+				.registration_message
+					if sharedProjectData.user_first_name !== undefined
+						h1 #{sharedProjectData.user_first_name} would like you to view '#{sharedProjectData.project_name}'
+						div Join ShareLaTeX to view this project
+					else if newTemplateData.templateName !== undefined
+						h1 Please register to edit the '#{newTemplateData.templateName}' template
+						div Already have a ShareLaTeX account? 
+							a(href="/login") Login here
 
-		.row
-			.span-box.span4.offset4
-				.page-header
-					h1 Register
-				.messageArea
-				form#registerFormShort(method="post")
-					input(name='_csrf', type='hidden', value=csrfToken)
-					input(name='redir', type='hidden', value=redir)
-					.clearfix
-						label(for='xlInput') Email 
-						.input
-							input#email.span4.email.required(type='email', name='email', value='#{new_email}')
-					.clearfix
-						label(for='xlInput') Password 
-						.input
-							input#password.span4.required(type='password', name='password')
-					.actions
-						button#registerButton.btn-primary.btn.btn-xlarge(type='submit') Register
+			.row
+				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
+					.card
+						.page-header
+							h1 Register
+						.messageArea
+						form#registerFormShort(method="post")
+							input(name='_csrf', type='hidden', value=csrfToken)
+							input(name='redir', type='hidden', value=redir)
+							.form-group
+								label(for='email') Email 
+								input#email.email.required.form-control(type='email', name='email', value='#{new_email}')
+							.form-group
+								label(for='password') Password 
+								input#password.required.form-control(type='password', name='password')
+							.actions
+								button#registerButton.btn-primary.btn(type='submit') Register
 						
-					
-
-	include ../general/small-footer
-

services/web/public/coffee/forms.coffee

@@ -200,7 +200,7 @@ require [
 				
 	class Message
 		constructor: (message)->
-			aClose = $('<a></a>').addClass('close').attr('href','#').text('x')
+			aClose = $('<a></a>').addClass('close').attr('href','#').html('&times;')
 			pTitle = $('<strong></strong>').text(message.title)
 			pText = $('<span></span>').html(' '+message.text)
 			div = $('<div></div>')
@@ -209,7 +209,7 @@ require [
 				.append(pTitle)
 				.append(pText)
 			if message.type == "error"
-				div.addClass("alert-error")
+				div.addClass("alert-danger")
 			else
 				div.addClass("alert-info")
 

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

@@ -9,8 +9,8 @@
 .alert {
   padding: @alert-padding;
   margin-bottom: @line-height-computed;
-  border: 1px solid transparent;
-  border-radius: @alert-border-radius;
+  border-left: 3px solid transparent;
+  // border-radius: @alert-border-radius;
 
   // Headings for larger alerts
   h4 {

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

@@ -6,6 +6,9 @@
   padding: @line-height-computed;
   .page-header {
   	margin: 0 0 1.5625rem;
+  	h1 {
+  		margin-top: 0;
+  	}
   }
 }
 

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

@@ -28,7 +28,7 @@
 @brand-success:         @green;
 @brand-info:            @blue;
 @brand-warning:         @orange;
-@brand-danger:          #d9534f;
+@brand-danger:          #E03A06;
 
 //== Scaffolding
 //
@@ -37,7 +37,7 @@
 //** Background color for `<body>`.
 @body-bg:               #fff;
 //** Global text color on `<body>`.
-@text-color:            @gray-dark;
+@text-color:            @gray-darker;
 
 //** Global textual link color.
 @link-color:            @brand-primary;
@@ -59,9 +59,9 @@
 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
-@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@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-h5:            @font-size-base;
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
@@ -448,21 +448,21 @@
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text:             #3c763d;
-@state-success-bg:               #dff0d8;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+@state-success-text:             darken(@brand-success, 20%);
+@state-success-bg:               lighten(@brand-success, 50%);
+@state-success-border:           darken(@brand-success, 5%);
 
-@state-info-text:                #31708f;
-@state-info-bg:                  #d9edf7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+@state-info-text:                darken(@brand-info, 20%);
+@state-info-bg:                  lighten(@brand-info, 47%);
+@state-info-border:              darken(@brand-info, 7%);
 
-@state-warning-text:             #8a6d3b;
-@state-warning-bg:               #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+@state-warning-text:             darken(@brand-warning, 10%);
+@state-warning-bg:               lighten(@brand-warning, 45%);
+@state-warning-border:           @brand-warning;
 
-@state-danger-text:              #a94442;
-@state-danger-bg:                #f2dede;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+@state-danger-text:              darken(@brand-danger, 10%);
+@state-danger-bg:                lighten(@brand-danger, 50%);
+@state-danger-border:            darken(@brand-danger, 5%);
 
 
 //== Tooltips