From 1d9b0746f5a23f7c8b3a8e0e186d7fa7110bc905 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Sun, 26 Nov 2017 22:10:46 -0800 Subject: [PATCH] Minor design improvements to inputs and navigation --- app/styles/_inputs.scss | 6 +-- app/styles/base/_colors.scss | 1 + .../components/create-comment-form.scss | 2 +- app/styles/components/donation-goal.scss | 2 +- app/styles/components/donation-payment.scss | 2 +- app/styles/components/donation/card-item.scss | 2 +- .../components/donations/donation-status.scss | 2 +- app/styles/components/dropdown-menu.scss | 25 +++++++++--- app/styles/components/image-drop.scss | 2 +- .../funds-recipient/details-form.scss | 2 +- app/styles/components/project-menu.scss | 2 +- app/styles/components/settings-menu.scss | 2 +- app/styles/components/signup-form.scss | 4 ++ app/styles/components/skills-typeahead.scss | 2 +- app/styles/layout/_forms.scss | 10 ++++- app/templates/components/login-form.hbs | 23 ++++++++--- .../components/organization-settings-form.hbs | 14 ++++++- .../components/project-settings-form.hbs | 21 ++++++++-- .../components/signup-email-input.hbs | 7 +++- app/templates/components/signup-form.hbs | 6 ++- .../components/signup-password-input.hbs | 7 +++- .../components/signup-username-input.hbs | 7 +++- app/templates/components/user-dropdown.hbs | 6 ++- .../components/user-settings-form.hbs | 39 ++++++++++++++++--- 24 files changed, 150 insertions(+), 46 deletions(-) diff --git a/app/styles/_inputs.scss b/app/styles/_inputs.scss index 704379ce9..a9d393fae 100644 --- a/app/styles/_inputs.scss +++ b/app/styles/_inputs.scss @@ -5,8 +5,6 @@ outline: none; border: 1px solid $gray--light; border-radius: 4px; - box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); - background-color: #FAFAFA; &.has-progress { padding-right: 70px; @@ -14,9 +12,7 @@ } #{$all-text-inputs-focus} { - border-color: $blue--light; - background-color: #FFFFFF; - box-shadow: inset 0 2px 2px rgba(0,0,0,0.075), 0 0 5px rgba(81,167,232,0.5); + border-color: $blue; } select, diff --git a/app/styles/base/_colors.scss b/app/styles/base/_colors.scss index 09179d4d0..c6d87cc5c 100644 --- a/app/styles/base/_colors.scss +++ b/app/styles/base/_colors.scss @@ -29,6 +29,7 @@ $blue--light: #51A7E8; $blue--lighter: #EDF9FF; $blue--lightest: #F6FCFF; $blue--dark: #1B9BE5; +$blue--background: $blue--lighter; // #3ABAFC, #51A7E8 $gray: #AAA; diff --git a/app/styles/components/create-comment-form.scss b/app/styles/components/create-comment-form.scss index 61159bdea..024a14ce7 100644 --- a/app/styles/components/create-comment-form.scss +++ b/app/styles/components/create-comment-form.scss @@ -16,7 +16,7 @@ } .comment-signup { - background: $blue--lighter; + background: $blue--background; padding: 10px 20px; p { diff --git a/app/styles/components/donation-goal.scss b/app/styles/components/donation-goal.scss index ff7cf44cb..1cfcd182e 100644 --- a/app/styles/components/donation-goal.scss +++ b/app/styles/components/donation-goal.scss @@ -12,7 +12,7 @@ &:hover { &.can-edit { - background: $blue--lighter; + background: $blue--background; border-color: $blue--light; cursor: pointer; } diff --git a/app/styles/components/donation-payment.scss b/app/styles/components/donation-payment.scss index ff0a64ddf..324b2e422 100644 --- a/app/styles/components/donation-payment.scss +++ b/app/styles/components/donation-payment.scss @@ -33,7 +33,7 @@ } .donation-container__amount { - background-color: $blue--lighter; + background-color: $blue--background; border: 2px solid $blue--light; border-radius: 5px; margin: 20px 0; diff --git a/app/styles/components/donation/card-item.scss b/app/styles/components/donation/card-item.scss index 067e8e7f0..62556eb01 100644 --- a/app/styles/components/donation/card-item.scss +++ b/app/styles/components/donation/card-item.scss @@ -1,6 +1,6 @@ .card-item { align-items: center; - background-color: $blue--lighter; + background-color: $blue--background; border: 1px solid $blue; border-radius: .25em; display: flex; diff --git a/app/styles/components/donations/donation-status.scss b/app/styles/components/donations/donation-status.scss index 8e126e6e6..4e2e816dd 100644 --- a/app/styles/components/donations/donation-status.scss +++ b/app/styles/components/donations/donation-status.scss @@ -5,7 +5,7 @@ } .show-donation { - background: $blue--lighter; + background: $blue--background; border-radius: 4px; padding: 1em; diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index ce0dd8b99..0b6208cca 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -68,13 +68,13 @@ } .dropdown__body { - padding: 10px 15px; + padding: 0 5px; } .dropdown__options { border-bottom: 1px solid $border-gray; - padding-bottom: 1em; - margin-bottom: 1em; + padding-bottom: 3px; + margin-bottom: 3px; &:last-child { border-bottom: none; @@ -85,14 +85,27 @@ li { display: block; float: none; - padding: 3px 0; + padding: 1px 0; } + a { // having problems with "navigation__options a" // overwriting the properties below border: 0; - color: #08A8FC; font-weight: normal; - padding: 0; + padding: 8px 11px; + + .fa { + padding-right: 5px; + } + + &.active { + font-weight: 600; + } + + &.active, &:hover { + background: $blue--background; + color: $blue; + } } } diff --git a/app/styles/components/image-drop.scss b/app/styles/components/image-drop.scss index d0f7be212..8b0e426db 100644 --- a/app/styles/components/image-drop.scss +++ b/app/styles/components/image-drop.scss @@ -103,7 +103,7 @@ } &--active { - background: $blue--lighter !important; + background: $blue--background !important; &:before { border-color: $blue--dark; diff --git a/app/styles/components/payments/funds-recipient/details-form.scss b/app/styles/components/payments/funds-recipient/details-form.scss index 83b87aa1a..7898bdaba 100644 --- a/app/styles/components/payments/funds-recipient/details-form.scss +++ b/app/styles/components/payments/funds-recipient/details-form.scss @@ -13,7 +13,7 @@ padding: 1em; &.checked { - background: $blue--lighter; + background: $blue--background; border-color: $blue--dark; } } diff --git a/app/styles/components/project-menu.scss b/app/styles/components/project-menu.scss index 13a5571c1..10d926396 100644 --- a/app/styles/components/project-menu.scss +++ b/app/styles/components/project-menu.scss @@ -1,7 +1,7 @@ .page-menu, .project__menu, .organization-menu { &--horizontal { @include clearfix; - border-bottom: 1px solid $blue--lighter; + border-bottom: 1px solid $blue--background; list-style-type: none; margin-bottom: 10px; padding: 0; diff --git a/app/styles/components/settings-menu.scss b/app/styles/components/settings-menu.scss index 2ceb6c727..3e96b0e09 100644 --- a/app/styles/components/settings-menu.scss +++ b/app/styles/components/settings-menu.scss @@ -10,7 +10,7 @@ padding: 10px 15px; &:hover { - background: $blue--lighter; + background: $blue--background; border-color: $gray; color: $blue; } diff --git a/app/styles/components/signup-form.scss b/app/styles/components/signup-form.scss index 7e4020f67..8d6036321 100644 --- a/app/styles/components/signup-form.scss +++ b/app/styles/components/signup-form.scss @@ -6,4 +6,8 @@ right: -8px; } } + + a { + text-align: center; + } } diff --git a/app/styles/components/skills-typeahead.scss b/app/styles/components/skills-typeahead.scss index c99f6c067..404080aa0 100644 --- a/app/styles/components/skills-typeahead.scss +++ b/app/styles/components/skills-typeahead.scss @@ -42,7 +42,7 @@ li.skill-dropdown-item { } &.selected { - background: $blue--lighter; + background: $blue--background; a { &:after { diff --git a/app/styles/layout/_forms.scss b/app/styles/layout/_forms.scss index 9c15696af..ca486ef42 100644 --- a/app/styles/layout/_forms.scss +++ b/app/styles/layout/_forms.scss @@ -71,6 +71,10 @@ $outer-border-radius: 4px; max-width: 100%; width: 100%; + &--centered { + text-align: center; + } + .input-group { margin-bottom: 0; } @@ -135,6 +139,7 @@ $outer-border-radius: 4px; .input-label { label { align-items: center; + color: $text--dark; display: flex; font-size: $body-font-size-normal; font-weight: 600; @@ -218,12 +223,13 @@ form { font-family: $body-font-family; font-size: $header-font-size-large; font-weight: 500; + margin-bottom: 1em; } } .error { color: $red; - margin: 5px 0; + margin: 1em 0; } .login-form, .signup-form, .reset-password-form, .forgot-password-form { @@ -282,7 +288,7 @@ form { .strength { position: absolute; right: 10px; - top: 16px; + top: 40px; width: 50px; .progress-bar-container { diff --git a/app/templates/components/login-form.hbs b/app/templates/components/login-form.hbs index 7e625b695..dcfae0416 100644 --- a/app/templates/components/login-form.hbs +++ b/app/templates/components/login-form.hbs @@ -1,13 +1,23 @@

Sign in

+
+ +
{{#auto-focus}} - {{input name="email" id="identification" autofocus=true tabindex=0 placeholder="Email" value=identification}} + {{input name="email" id="identification" autofocus=true tabindex=0 value=identification}} {{/auto-focus}}
- {{input name="password" id="password" placeholder="Password" type="password" value=password}} +
+ +
+ {{input name="password" id="password" type="password" value=password}}
@@ -20,14 +30,15 @@
- {{#link-to 'password.forgot' classNames="t-forgot-password"}} - Forgot your password? - {{/link-to}} - {{#if errors}} {{#each errors.errors as |error|}}

{{error.detail}}

{{/each}} {{/if}} +
+ {{#link-to 'password.forgot' classNames="t-forgot-password"}} + Forgot your password? + {{/link-to}} +
diff --git a/app/templates/components/organization-settings-form.hbs b/app/templates/components/organization-settings-form.hbs index 1c617a4f8..7aa92573b 100644 --- a/app/templates/components/organization-settings-form.hbs +++ b/app/templates/components/organization-settings-form.hbs @@ -13,10 +13,20 @@
- {{input type="text" name="name" value=organization.name placeholder="Organization Name"}} +
+ +
+ {{input type="text" name="name" value=organization.name}}
- {{input type="text" name="description" value=organization.description placeholder="Description"}} +
+ +
+ {{input type="text" name="description" value=organization.description}}
diff --git a/app/templates/components/project-settings-form.hbs b/app/templates/components/project-settings-form.hbs index 12656a15e..72075076f 100644 --- a/app/templates/components/project-settings-form.hbs +++ b/app/templates/components/project-settings-form.hbs @@ -13,13 +13,28 @@
- {{input type="text" name="title" value=project.title placeholder="Title"}} +
+ +
+ {{input type="text" name="title" value=project.title}}
- {{input type="text" name="description" value=project.description placeholder="Description"}} +
+ +
+ {{input type="text" name="description" value=project.description}}
- {{input type="text" name="website" value=project.website placeholder="Website"}} +
+ +
+ {{input type="text" name="website" value=project.website}}
diff --git a/app/templates/components/signup-email-input.hbs b/app/templates/components/signup-email-input.hbs index 9c71650d5..bc2147f5a 100644 --- a/app/templates/components/signup-email-input.hbs +++ b/app/templates/components/signup-email-input.hbs @@ -1,4 +1,9 @@ -{{input name="email" autocapitalize="off" type="text" placeholder='Your email' value=user.email key-down="keyDown"}} +
+ +
+{{input name="email" autocapitalize="off" type="text" value=user.email key-down="keyDown"}}
{{#if canShowValidations}} {{#if isOkay}} diff --git a/app/templates/components/signup-form.hbs b/app/templates/components/signup-form.hbs index 14ce7816b..ac4271c61 100644 --- a/app/templates/components/signup-form.hbs +++ b/app/templates/components/signup-form.hbs @@ -1,6 +1,5 @@
- {{#if (eq user.signUpContext 'donation')}}

Join Code Corps to continue.

{{else}} @@ -23,5 +22,10 @@ {{error-formatter error=error}} {{/if}} +
+ {{#link-to "login"}} + Already have an account? + {{/link-to}} +
diff --git a/app/templates/components/signup-password-input.hbs b/app/templates/components/signup-password-input.hbs index ecc16d5bd..6883bab39 100644 --- a/app/templates/components/signup-password-input.hbs +++ b/app/templates/components/signup-password-input.hbs @@ -1,4 +1,9 @@ -{{input class="has-progress" name="password" type="password" placeholder='Create a password' autocomplete="off" value=user.password}} +
+ +
+{{input class="has-progress" name="password" type="password" autocomplete="off" value=user.password}}
{{progress-bar-container percentage=strengthPercentage}}
diff --git a/app/templates/components/signup-username-input.hbs b/app/templates/components/signup-username-input.hbs index 049e2d305..f3e67393f 100644 --- a/app/templates/components/signup-username-input.hbs +++ b/app/templates/components/signup-username-input.hbs @@ -1,5 +1,10 @@ +
+ +
{{#auto-focus}} - {{input name="username" autocapitalize="off" autofocus=true tabindex=0 type="text" placeholder="Pick a username" value=user.username key-down="keyDown"}} + {{input name="username" autocapitalize="off" autofocus=true tabindex=0 type="text" value=user.username key-down="keyDown"}} {{/auto-focus}}
{{#if canShowValidations}} diff --git a/app/templates/components/user-dropdown.hbs b/app/templates/components/user-dropdown.hbs index f8ce52b74..664f4d65a 100644 --- a/app/templates/components/user-dropdown.hbs +++ b/app/templates/components/user-dropdown.hbs @@ -4,13 +4,15 @@ seem to be used as hooks for testing only }}
  • {{#link-to 'slugged-route' user.username class="slugged-route"}}Your profile{{/link-to}}
  • {{#link-to 'settings.profile' class="profile"}}Settings{{/link-to}}
    • -
  • Log out
    • {{#if user.admin}}
      -
    • {{#link-to 'admin'}}Admin{{/link-to}}
      • +
    • {{#link-to 'admin'}}{{fa-icon "terminal"}} Admin{{/link-to}}
    {{/if}} +
    Signed in as {{user.username}} diff --git a/app/templates/components/user-settings-form.hbs b/app/templates/components/user-settings-form.hbs index ad5f700f1..cf746b8d3 100644 --- a/app/templates/components/user-settings-form.hbs +++ b/app/templates/components/user-settings-form.hbs @@ -13,20 +13,47 @@
    - {{input type="text" name="firstName" value=user.firstName placeholder="First name"}} +
    + +
    + {{input type="text" name="firstName" value=user.firstName}}
    - {{input type="text" name="lastName" value=user.lastName placeholder="Last name"}} +
    + +
    + {{input type="text" name="lastName" value=user.lastName}}
    - @ - {{input type="text" name="twitter" value=user.twitter placeholder="Twitter"}} +
    + +
    +
    + @ + {{input type="text" name="twitter" value=user.twitter}} +
    - {{input type="text" name="website" value=user.website placeholder="Website"}} +
    + +
    + {{input type="text" name="website" value=user.website}}
    - {{input type="text" name="biography" value=user.biography placeholder="Bio"}} +
    + +
    + {{input type="text" name="biography" value=user.biography}}