Implemented new AuthModal design (sans green button for signup/login).

app/locale/en.coffee

@@ -101,23 +101,25 @@
     log_in: "Log In"
     logging_in: "Logging In"
     log_out: "Log Out"
-    recover: "recover account"
+    forgot_password: "Forgot your password?"
     authenticate_gplus: "Authenticate G+"
     load_profile: "Load G+ Profile"
     load_email: "Load G+ Email"
     finishing: "Finishing"
+    sign_in_with_facebook: "Sign in with Facebook"
+    sign_in_with_gplus: "Sign in with G+"
+    signup_switch: "Want to create an account?"
 
   signup:
     create_account_title: "Create Account to Save Progress"
     description: "It's free. Just need a couple things and you'll be good to go:"
     email_announcements: "Receive announcements by email"
-    coppa: "13+ or non-USA "
-    coppa_why: "(Why?)"
     creating: "Creating Account..."
     sign_up: "Sign Up"
     log_in: "log in with password"
     social_signup: "Or, you can sign up through Facebook or G+:"
     required: "You need to log in before you can go that way."
+    login_switch: "Already have an account?"
 
   recover:
     recover_account_title: "Recover Account"

app/styles/common/common.sass

@@ -246,18 +246,51 @@ kbd
   font-weight: bold
   color: rgb(248, 197, 146)
 
+  &.btn-lg
+    border-width: 14px 20px 20px 20px
+
+  &.btn-primary
+    border-image-source: url(/images/common/button-background-primary-active-border.png)
+  &.btn-success
+    border-image-source: url(/images/common/button-background-success-active-border.png)
+  &.btn-warning
+    border-image-source: url(/images/common/button-background-warning-active-border.png)
+  &.btn-danger
+    border-image-source: url(/images/common/button-background-danger-active-border.png)
+
   &:hover
     color: lighten(rgb(248, 197, 146), 5%)
 
   &:active
-    border-image: url(/images/common/button-background-pressed-border.png) 14 16 16 20 fill round
-    padding: 2px 0 0 2px
-    border-width: 7px 8px 8px 10px
+    &.btn-lg
+      border-image-source: url(/images/common/button-background-pressed-border.png)
+    &:not(.btn-lg)
+      border-image: url(/images/common/button-background-pressed-border.png) 14 16 16 20 fill round
+      padding: 2px 0 0 2px
+      border-width: 7px 8px 8px 10px
+
+    &.btn-primary
+      border-image-source: url(/images/common/button-background-primary-pressed-border.png)
+    &.btn-success
+      border-image-source: url(/images/common/button-background-success-pressed-border.png)
+    &.btn-warning
+      border-image-source: url(/images/common/button-background-warning-pressed-border.png)
+    &.btn-danger
+      border-image-source: url(/images/common/button-background-danger-pressed-border.png)
 
   &.disabled, &:disabled
     border-image: url(/images/common/button-background-disabled-border.png) 14 20 20 20 fill round
     @include opacity(1)
 
+    &.btn-primary
+      border-image-source: url(/images/common/button-background-primary-disabled-border.png)
+    &.btn-success
+      border-image-source: url(/images/common/button-background-success-disabled-border.png)
+    &.btn-warning
+      border-image-source: url(/images/common/button-background-warning-disabled-border.png)
+    &.btn-danger
+      border-image-source: url(/images/common/button-background-danger-disabled-border.png)
+
     > *
       @include opacity(0.5)
 
@@ -281,14 +314,41 @@ html.no-borderimage
     background-size: 100% 100%
     padding: 7px 10px 10px 10px
     
+    &.btn-primary
+      background-image: url(/images/common/button-background-primary-active.png)
+    &.btn-success
+      background-image: url(/images/common/button-background-success-active.png)
+    &.btn-warning
+      background-image: url(/images/common/button-background-warning-active.png)
+    &.btn-danger
+      background-image: url(/images/common/button-background-danger-active.png)
+
     &:active
       background-image: url(/images/common/button-background-pressed.png)
       padding: 9px 8px 8px 12px
       border: 0
 
+      &.btn-primary
+        background-image: url(/images/common/button-background-primary-pressed.png)
+      &.btn-success
+        background-image: url(/images/common/button-background-success-pressed.png)
+      &.btn-warning
+        background-image: url(/images/common/button-background-warning-pressed.png)
+      &.btn-danger
+        background-image: url(/images/common/button-background-danger-pressed.png)
+
     &.disabled, &:disabled
       background-image: url(/images/common/button-background-disabled.png)
 
+      &.btn-primary
+        background-image: url(/images/common/button-background-primary-disabled.png)
+      &.btn-success
+        background-image: url(/images/common/button-background-success-disabled.png)
+      &.btn-warning
+        background-image: url(/images/common/button-background-warning-disabled.png)
+      &.btn-danger
+        background-image: url(/images/common/button-background-danger-disabled.png)
+
 
 body > iframe[src^="https://apis.google.com"]
   display: none
@@ -315,4 +375,4 @@ body > iframe[src^="https://apis.google.com"]
     &.success
       font-weight: bold
       .glyphicon-minus
-        display: none
+        display: none

app/styles/modal/auth-modal.sass

@@ -1,28 +1,237 @@
+@import "app/styles/mixins"
+@import "app/styles/bootstrap/variables"
+
 #auth-modal
-  .network-login
-    float: left
-    width: 100px
-    text-align: left
 
-  #github-login-button
-    position: relative
-    top: -1px
-    border-radius: 5px
-    img
-      width: 16px
-      margin: 0 5px 0 -5px
-    
-  #gplus-login-button
-    position: relative
-    top: 1px
-    
-  #recover-account-wrapper
-    float: right
+  //- Clear modal defaults
 
-  .modal-footer
-    height: 70px
-    padding: 20px 10px
-    border-top: 1px solid darkgray
- 
-  .btn
-    margin-right: 10px
+  .modal-dialog
+    padding: 0
+    width: 666px
+    height: 694px
+
+
+  //- Background
+
+  .auth-modal-background
+    position: absolute
+    top: -90px
+    left: -40px
+
+
+  //- Header
+
+  h1
+    position: absolute
+    left: 183px
+    top: 0px
+    margin: 0
+    width: 255px
+    text-align: center
+    color: rgb(254,188,68)
+    font-size: 32px
+    text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
+
+    &.long-title
+      top: -14px
+
+
+  //- Close modal button
+
+  #close-modal
+    position: absolute
+    left: 442px
+    top: -15px
+    width: 60px
+    height: 60px
+    color: white
+    text-align: center
+    font-size: 30px
+    padding-top: 15px
+    cursor: pointer
+    @include rotate(-3deg)
+
+    &:hover
+      color: yellow
+
+
+  //- Modal body content
+
+  .auth-form-content
+    position: absolute
+    top: 100px
+    left: 40px
+    width: 588px
+
+    #recover-account-wrapper
+      float: right
+      margin-top: 7px
+
+    .form-group
+      color: rgb(51,51,51)
+      padding: 0
+      margin: 0
+
+      .input-border
+        border: 2px solid rgb(233, 221, 194)
+        border-radius: 4px
+
+        input
+          background-color: rgb(239, 232, 216)
+          border: 2px solid rgb(26, 21, 18)
+          border-radius: 4px
+     
+    label
+      font-size: 20px
+      text-transform: uppercase
+      font-family: 'Open Sans Condensed'
+      margin-bottom: 0
+  
+    //- Check boxes
+    
+    .form-group.checkbox
+      margin: 10px 0
+      
+      label
+        position: relative
+        line-height: 34px
+
+        span:not(.custom-checkbox)
+          margin-left: 40px
+      
+      input
+        display: none
+        
+        & + .custom-checkbox
+          .glyphicon
+            display: none
+          
+        &:checked + .custom-checkbox .glyphicon
+          display: inline
+          color: rgb(248,169,67)
+          text-align: center
+          text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black
+          font-size: 20px
+          position: relative
+          top: -2px
+
+      .input-border
+        border-radius: 4px
+        height: 34px
+        width: 34px
+        position: absolute
+    
+      .custom-checkbox
+        border-radius: 4px
+        position: absolute
+        height: 30px
+        width: 30px
+        border: 2px solid rgb(26,21,18)
+        background: rgb(228,217,196)
+        text-align: center
+
+    #login-button, #signup-button
+      position: absolute
+      top: 298px
+      height: 70px
+
+
+  //- Footer area
+
+  .auth-network-logins
+    position: absolute
+    top: 470px
+    width: 580px
+    left: 48px
+    padding-left: 29px
+
+    .btn.btn-lg.network-login
+      width: 251px
+      height: 60px
+      float: left
+      text-align: center
+      position: relative
+      margin-right: 15px
+
+      .network-logo
+        height: 30px
+        position: absolute
+        left: -10px
+        top: 2px
+
+      .sign-in-blurb  
+        line-height: 34px
+        margin-left: 12px
+
+      .fb-login-button
+        $scaleX: 251 / 64
+        $scaleY: 60 / 23
+        transform: scale($scaleX, $scaleY)
+        position: absolute
+        top: 4px
+        left: 74px
+        @include opacity(0.01)
+
+      .gplus-login-wrapper
+        position: absolute
+        left: 65px
+        top: -6px
+        $scaleX: 251 / 84
+        $scaleY: 60 / 24
+        transform: scale($scaleX, $scaleY)
+        @include opacity(0.01)
+
+    #github-login-button
+      position: relative
+      top: -1px
+      border-radius: 5px
+      img
+        width: 16px
+        margin: 0 5px 0 -5px
+
+    #gplus-login-button
+      position: relative
+      top: 8px
+
+
+  //- Extra bottom pane area
+  .extra-pane
+    background-image: url(/images/pages/modal/auth/extra-pane.png)
+    width: 633px
+    height: 139px
+    padding: 23px 23px 23px 168px
+    position: absolute
+    top: 520px
+
+    .switch-explanation
+      margin: 25px 10px 0 0
+      width: 200px
+      color: rgb(254,188,68)
+      font-size: 20px
+      font-family: 'Open Sans Condensed'
+      font-weight: bold
+      text-transform: uppercase
+      text-shadow: black 1px 1px 0, black -1px -1px 0, black 1px -1px 0, black -1px 1px 0, black 1px 0px 0, black 0px -1px 0, black -1px 0px 0, black 0px 1px 0
+      float: left
+
+    .btn
+      float: right
+      margin-top: 20px
+      width: 230px
+      height: 70px
+      line-height: 40px
+
+  //- Login-specific styling
+
+  &.login
+    .modal-dialog
+      height: 582px
+
+    #login-button, #signup-button
+      top: 186px
+
+    .auth-network-logins
+      top: 358px
+
+    .extra-pane
+      top: 408px

app/templates/core/auth.jade

@@ -1,85 +1,101 @@
-extends /templates/core/modal-base
-
-block modal-header-content
-  if mode === 'login'
-    h3(data-i18n="login.log_in") Log In
-  if mode === 'signup'
-    if title === 'short'
-      h3(data-i18n="login.sign_up") Create Account
-    else
-      h3(data-i18n="signup.create_account_title") Create Account to Save Progress
-
-block modal-body-content
-
-  if showRequiredError
-    .alert.alert-success
-      span(data-i18n="signup.required") You need to log in before you can that way.
-
-  else if mode === 'signup' && descriptionOn === "yes"
-        p(data-i18n="signup.description") It's free. Just need a couple things and you'll be good to go:
-
-  form.form
-    if onEmployersPage
-      .form-group
-        input#email.input-large.form-control(name="email", type="email", value=formValues.email, placeholder="Email")
-      .form-group
-        input#password.input-large.form-control(name="password", type="password", value=formValues.password, placeholder="Password")
-    
-    else
-      .form-group
-        label.control-label(for="email", data-i18n="general.email") Email
-        input#email.input-large.form-control(name="email", type="email", value=formValues.email)
-      .form-group
-        label.control-label(for="password", data-i18n="general.password") Password
-        input#password.input-large.form-control(name="password", type="password", value=formValues.password)
-
-    if mode === 'signup'
-      .form-group
-        label.control-label(for="name", data-i18n="general.name") Name
-        if me.get('name')
-          input#name.input-large.form-control(name="name", type="text", value="#{me.get('name')}")
-        else
-          input#name.input-large.form-control(name="name", type="text", value="", placeholder="Anoner")
-      .form-group.checkbox
-        label.control-label(for="subscribe")
-          input#subscribe(name="subscribe", type="checkbox", checked='checked')
-          span(data-i18n="signup.email_announcements") Receive announcements by email
-      .form-group.checkbox
-        label.control-label(for="confirm-age")
-          input#confirm-age(name="confirm-age", type="checkbox", checked='checked')
-          span(data-i18n="signup.coppa") 13+ or non-USA 
-          a(href="https://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act", data-i18n="signup.coppa_why", target="_blank") (Why?)
+.modal-dialog
+  .modal-content
 
     if mode === 'login'
-      if onEmployersPage
-        input.btn.btn-info.btn-large#login-button(value=translate("login.log_in"), type="submit")
+      img(src="/images/pages/modal/auth/login-background.png", draggable="false").auth-modal-background
+    else
+      img(src="/images/pages/modal/auth/signup-background.png", draggable="false").auth-modal-background
+
+    if mode === 'login'
+      h1(data-i18n="login.log_in") Log In
+    if mode === 'signup'
+      if title === 'short'
+        h1(data-i18n="login.sign_up") Create Account
       else
-        input.btn.btn-info.btn-large#login-button(value=translate("login.log_in"), type="submit")
-        .btn.btn-default.btn-large#switch-to-signup-button(data-i18n="login.sign_up") Create Account
-    else if mode === 'signup'
-      input.btn.btn-info.btn-large#signup-button(value=translate("signup.sign_up"), type="submit")
-      .btn.btn-default.btn-large#switch-to-login-button(data-i18n="login.log_in")
+        h1(data-i18n="signup.create_account_title").long-title Create Account to Save Progress
+
+    div#close-modal
+      span.glyphicon.glyphicon-remove
 
 
-block modal-body-wait-content
-  
-  if mode === 'login'
-    h3(data-i18n="login.logging_in") Logging In
-  if mode === 'signup'
-    h3(data-i18n="signup.creating") Creating Account...
+  .auth-form-content
 
-block modal-footer
-  .modal-footer
+    if showRequiredError
+      .alert.alert-success
+        span(data-i18n="signup.required") You need to log in before you can that way.
+
+    else if mode === 'signup' && descriptionOn === "yes"
+          p(data-i18n="signup.description") It's free. Just need a couple things and you'll be good to go:
+
+    form.form
+      .form-group
+        label.control-label(for="email")
+          span(data-i18n="general.email") Email
+          | :
+        .input-border
+          input#email.input-large.form-control(name="email", type="email", value=formValues.email)
+      .form-group
+        if mode === 'login'
+          div#recover-account-wrapper
+            a(data-toggle="coco-modal", data-target="core/RecoverModal", data-i18n="login.forgo_password")#link-to-recover Forgot your password?
+        label.control-label(for="password")
+          span(data-i18n="general.password") Password
+          | :
+        .input-border
+          input#password.input-large.form-control(name="password", type="password", value=formValues.password)
+
+      if mode === 'signup'
+        .form-group
+          label.control-label(for="name")
+            span(data-i18n="general.name") Name
+            | :
+          .input-border
+            if me.get('name')
+              input#name.input-large.form-control(name="name", type="text", value="#{me.get('name')}")
+            else
+              input#name.input-large.form-control(name="name", type="text", value="", placeholder="Anoner")
+        .form-group.checkbox
+          label.control-label(for="subscribe")
+            .input-border
+              input#subscribe(name="subscribe", type="checkbox", checked='checked')
+              span.custom-checkbox
+                .glyphicon.glyphicon-ok
+            span(data-i18n="signup.email_announcements") Receive announcements by email
+
+      if mode === 'login'
+        input.btn.btn-info.btn-lg.btn-illustrated.btn-block#login-button(value=translate("login.log_in"), type="submit")
+      else if mode === 'signup'
+        input.btn.btn-info.btn-lg.btn-illustrated.btn-block#signup-button(value=translate("signup.sign_up"), type="submit")
+
+    .wait.secret
+      if mode === 'login'
+        h3(data-i18n="login.logging_in") Logging In
+      if mode === 'signup'
+        h3(data-i18n="signup.creating") Creating Account...
+
+  .auth-network-logins
     // GitHub login too buggy to survive
     //div.network-login
     //  btn.btn.btn-sm.github-login-button#github-login-button
     //    img(src="/images/pages/modal/auth/github_icon.png")
     //    | GitHub
-    div.network-login
-      .fb-login-button(data-show-faces="false", data-width="200", data-max-rows="1", data-scope="email")
+    .btn.btn-primary.btn-lg.btn-illustrated.network-login
+      img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
+      span.sign-in-blurb(data-i18n="login.sign_in_with_facebook") Sign in with Facebook
+      .facebook-login-wrapper
+        .fb-login-button(data-show-faces="false", data-width="200", data-max-rows="1", data-scope="email")
     // Google+ login causing script errors on IE10
     if !isIE
-      div.network-login
-        .gplus-login-button#gplus-login-button
-    div#recover-account-wrapper
-      a(data-toggle="coco-modal", data-target="core/RecoverModal", data-i18n="login.recover")#link-to-recover recover account
+      .btn.btn-danger.btn-lg.btn-illustrated.network-login
+        img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
+        span.sign-in-blurb(data-i18n="login.sign_in_with_gplus") Sign in with G+
+        .gplus-login-wrapper
+          .gplus-login-button#gplus-login-button
+
+  .extra-pane
+    if mode === 'login'
+      .switch-explanation(data-i18n="login.signup_switch") Want to create an account?
+      .btn.btn-default.btn-lg.btn-illustrated#switch-to-signup-button(data-i18n="login.sign_up") Create Account
+    else if mode === 'signup'
+      .switch-explanation(data-i18n="signup.login_switch") Already have an account?
+      .btn.btn-default.btn-lg.btn-illustrated#switch-to-login-button(data-i18n="login.log_in")

app/views/core/AuthModal.coffee

@@ -14,11 +14,11 @@ module.exports = class AuthModal extends ModalView
     # login buttons
     'click #switch-to-signup-button': 'onSignupInstead'
     'click #switch-to-login-button': 'onLoginInstead'
-    'click #confirm-age': 'checkAge'
     'click #github-login-button': 'onGitHubLoginClicked'
     'submit': 'onSubmitForm' # handles both submit buttons
     'keyup #name': 'onNameChange'
     'click #gplus-login-button': 'onClickGPlusLogin'
+    'click #close-modal': 'hide'
 
   subscriptions:
     'errors:server-error': 'onServerError'
@@ -40,10 +40,13 @@ module.exports = class AuthModal extends ModalView
       application.tracker.trackEvent 'Started Signup', authModalTitle: c.title, descriptionOn: c.descriptionOn
     c.mode = @mode
     c.formValues = @previousFormInputs or {}
-    c.onEmployersPage = Backbone.history.fragment is "employers"
     c.me = me
     c
 
+  afterRender: ->
+    super()
+    @$el.toggleClass('signup', @mode is 'signup').toggleClass('login', @mode is 'login')
+
   afterInsert: ->
     super()
     _.delay (=> application.router.renderLoginButtons()), 500
@@ -69,10 +72,6 @@ module.exports = class AuthModal extends ModalView
     if @mode is 'login' then @loginAccount() else @createAccount()
     false
 
-  checkAge: (e) ->
-    @playSound 'menu-button-click'
-    $('#signup-button', @$el).prop 'disabled', not $(e.target).prop('checked')
-
   loginAccount: ->
     forms.clearFormAlerts(@$el)
     userObject = forms.formToObject @$el
@@ -85,7 +84,6 @@ module.exports = class AuthModal extends ModalView
     forms.clearFormAlerts(@$el)
     userObject = forms.formToObject @$el
     delete userObject.subscribe
-    delete userObject['confirm-age']
     delete userObject.name if userObject.name is ''
     userObject.name = @suggestedName if @suggestedName
     for key, val of me.attributes when key in ['preferredLanguage', 'testGroupNumber', 'dateCreated', 'wizardColor1', 'name', 'music', 'volume', 'emails']