From 8740682a1e641e9834540e53e37d58f3d741d714 Mon Sep 17 00:00:00 2001 From: eashaw Date: Fri, 7 Jan 2022 19:52:55 -0600 Subject: [PATCH] Customer portal style updates (#3615) * style changes * changes from fine art pass 2 * Update dashboard.less * Update signup.less * changes from call * Update dashboard.ejs * update padding * Update dashboard.ejs * Update forgot-password.ejs * keep full signup form visible after input * revert formrules change --- .../js/pages/customers/new-license.page.js | 4 +- .../assets/js/pages/entrance/signup.page.js | 1 + .../assets/styles/bootstrap-overrides.less | 4 ++ .../styles/pages/customers/dashboard.less | 53 ++++++++++++-- .../styles/pages/customers/new-license.less | 28 ++++++-- .../pages/entrance/forgot-password.less | 20 +++++- .../assets/styles/pages/entrance/login.less | 27 +++++-- .../styles/pages/entrance/new-password.less | 16 ++++- .../assets/styles/pages/entrance/signup.less | 31 +++++--- website/views/pages/customers/dashboard.ejs | 72 +++++++++---------- website/views/pages/customers/new-license.ejs | 24 ++++--- .../views/pages/entrance/forgot-password.ejs | 31 ++++---- website/views/pages/entrance/login.ejs | 15 ++-- website/views/pages/entrance/signup.ejs | 12 ++-- 14 files changed, 227 insertions(+), 111 deletions(-) diff --git a/website/assets/js/pages/customers/new-license.page.js b/website/assets/js/pages/customers/new-license.page.js index 59d2157b0f..8ba45bb386 100644 --- a/website/assets/js/pages/customers/new-license.page.js +++ b/website/assets/js/pages/customers/new-license.page.js @@ -10,7 +10,7 @@ parasails.registerPage('new-license', { // > Has property set to `true` for each invalid property in `formData`. formErrors: { /* … */ }, - quoteFormRules: { + qutoeFormRules: { numberOfHosts: {required: true}, }, @@ -82,7 +82,7 @@ parasails.registerPage('new-license', { clickResetForm: async function() { // When the "X" is clicked... - // this.formData = {}; + this.formData.numberOfHosts = undefined; this.formErrors = {}; this.showBillingForm = false; this.showQuotedPrice = false; diff --git a/website/assets/js/pages/entrance/signup.page.js b/website/assets/js/pages/entrance/signup.page.js index 34044be626..79979da3dd 100644 --- a/website/assets/js/pages/entrance/signup.page.js +++ b/website/assets/js/pages/entrance/signup.page.js @@ -50,6 +50,7 @@ parasails.registerPage('signup', { }, typeClearOneFormError: async function(field) { + this.showFullForm = true; if(this.formErrors[field]){ this.formErrors = _.omit(this.formErrors, field); } diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less index 74a8d0d399..5e1cd0c24f 100644 --- a/website/assets/styles/bootstrap-overrides.less +++ b/website/assets/styles/bootstrap-overrides.less @@ -51,6 +51,10 @@ footer { line-height: 24px; } +.small { + font-size: 14px; +} + .text-danger { color: @core-vibrant-red !important; //lesshint-disable-line importantRule } diff --git a/website/assets/styles/pages/customers/dashboard.less b/website/assets/styles/pages/customers/dashboard.less index 9eb5bacc46..a2d4ccb19b 100644 --- a/website/assets/styles/pages/customers/dashboard.less +++ b/website/assets/styles/pages/customers/dashboard.less @@ -1,10 +1,13 @@ #dashboard { + padding-top: 80px; h1 { font-size: 28px; + line-height: 38px; } h3 { padding-bottom: 16px; font-size: 24px; + margin-bottom: 0px; } a { text-decoration: underline; @@ -31,7 +34,7 @@ border-radius: 6px; } .card-body { - padding: 30px; + padding: 2em; } } @@ -72,9 +75,10 @@ border: 1px solid #C5C7D1; border-radius: 4px; padding: 8px 40px; - line-height: 24px; + line-height: 20px; &:hover { background: #fff; + color: @core-fleet-black; } &:focus { box-shadow: none; @@ -84,20 +88,22 @@ height: 20px; width: auto; padding-right: 4px; + margin-bottom: 1px; } a { color: @core-fleet-black; - text-decoration: none; } + text-decoration: none; } [purpose='deploy-button'] { font-size: 16px; - line-height: 24px; + line-height: 20px; padding: 8px 40px; border-radius: 4px; - a { + color: white; + text-decoration: none; + &:hover { color: white; - text-decoration: none; } } @@ -113,6 +119,7 @@ padding: 16px; p { font-size: 14px; + margin-block-end: 0px; } a { font-size: 14px; @@ -127,6 +134,22 @@ p { margin-block-end: 4px; } + [purpose='contact'] { + background: #F1F0FF; + border: 1px solid #D9D9FE; + box-sizing: border-box; + border-radius: 4px; + padding: 16px; + p { + font-size: 14px; + margin-block-end: 0px; + } + a { + font-size: 14px; + font-weight: 700; + text-underline-offset: 5px; + } + } } @@ -146,6 +169,7 @@ } strong { + font-size: 14px; padding-bottom: 8px; } @@ -180,16 +204,21 @@ } + @media (max-width: 991px) { [purpose='details-card'] { min-height: auto; } - + [purpose='billing-card'] { + // padding: 40px; + min-height: auto; + } } @media (max-width: 768px) { + padding-top: 60px; [purpose='modal-content'] { margin-top: 50px; @@ -211,5 +240,15 @@ } + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1em; + } + } + } + + } diff --git a/website/assets/styles/pages/customers/new-license.less b/website/assets/styles/pages/customers/new-license.less index f35319bc10..c40476370a 100644 --- a/website/assets/styles/pages/customers/new-license.less +++ b/website/assets/styles/pages/customers/new-license.less @@ -1,6 +1,9 @@ #new-license { + padding-top: 80px; + h1 { font-size: 28px; + line-height: 38px; } a { color: @core-vibrant-blue; @@ -9,12 +12,10 @@ text-decoration: none; color: darken(@core-vibrant-blue, 20%); } - p { - font-size: 16px; - } h3 { font-size: 20px; font-weight: 700; + margin-bottom: 0px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { @@ -30,6 +31,7 @@ } [purpose='customer-portal-form'] { + label { font-weight: 700; margin-bottom: 4px; @@ -42,12 +44,12 @@ border-radius: 6px; } .card-body { - padding: 30px; + padding: 2em; } } [purpose='submit-button'] { - width: 200px; + margin-left: auto; margin-right: auto; border-radius: 4px; @@ -67,7 +69,8 @@ } [purpose='features-list'] { - // min-width: 254px; + padding-left: 40px; + font-size: 14px; word-wrap: overflow; ul { list-style-type: none; @@ -85,6 +88,19 @@ } + @media (max-width: 768px) { + padding-top: 60px; + } + + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1.5em 1em; + } + } + } + } diff --git a/website/assets/styles/pages/entrance/forgot-password.less b/website/assets/styles/pages/entrance/forgot-password.less index 3c73ec2721..f4233d2d06 100644 --- a/website/assets/styles/pages/entrance/forgot-password.less +++ b/website/assets/styles/pages/entrance/forgot-password.less @@ -1,7 +1,8 @@ #forgot-password { - + padding-top: 80px; h1 { font-size: 28px; + line-height: 38px; } a { color: @core-vibrant-blue; @@ -27,8 +28,9 @@ padding: 2em; } } + [purpose='submit-button'] { - width: 200px; + margin-left: auto; margin-right: auto; border-radius: 4px; @@ -66,4 +68,18 @@ } } + @media (max-width: 768px) { + padding-top: 60px; + } + + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1.5em 1em; + } + } + } + + } diff --git a/website/assets/styles/pages/entrance/login.less b/website/assets/styles/pages/entrance/login.less index 9cf4424321..199fc37278 100644 --- a/website/assets/styles/pages/entrance/login.less +++ b/website/assets/styles/pages/entrance/login.less @@ -1,13 +1,14 @@ #login { + + padding-top: 80px; + h1 { font-size: 28px; + line-height: 38px; } a { color: @core-vibrant-blue; } - p { - font-size: 16px; - } [purpose='customer-portal-form'] { label { @@ -22,12 +23,11 @@ border-radius: 6px; } .card-body { - padding: 30px; + padding: 2em; } } [purpose='submit-button'] { - width: 200px; margin-left: auto; margin-right: auto; border-radius: 4px; @@ -47,8 +47,10 @@ } [purpose='features-list'] { - // min-width: 254px; + word-wrap: overflow; + padding-left: 40px; + font-size: 14px; ul { list-style-type: none; padding-inline-start: 0px; @@ -65,4 +67,17 @@ } + @media (max-width: 768px) { + padding-top: 60px; + } + + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1em; + } + } + } + } diff --git a/website/assets/styles/pages/entrance/new-password.less b/website/assets/styles/pages/entrance/new-password.less index 7001081ac9..59910d932a 100644 --- a/website/assets/styles/pages/entrance/new-password.less +++ b/website/assets/styles/pages/entrance/new-password.less @@ -1,6 +1,8 @@ #new-password { + padding-top: 80px; h1 { font-size: 28px; + line-height: 38px; } a { color: @core-vibrant-blue; @@ -26,7 +28,7 @@ border-radius: 6px; } .card-body { - padding: 30px; + padding: 2em; } } @@ -68,5 +70,17 @@ } } + @media (max-width: 768px) { + padding-top: 60px; + } + + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1.5em 1em; + } + } + } } diff --git a/website/assets/styles/pages/entrance/signup.less b/website/assets/styles/pages/entrance/signup.less index 184b92e61e..826cd63f75 100644 --- a/website/assets/styles/pages/entrance/signup.less +++ b/website/assets/styles/pages/entrance/signup.less @@ -1,13 +1,12 @@ #signup { + padding-top: 80px; h1 { font-size: 28px; + line-height: 38px; } a { color: @core-vibrant-blue; } - p { - font-size: 16px; - } [purpose='customer-portal-form'] { label { @@ -22,12 +21,12 @@ border-radius: 6px; } .card-body { - padding: 30px; + padding: 2em; } } [purpose='submit-button'] { - width: 200px; + margin-left: auto; margin-right: auto; border-radius: 4px; @@ -47,13 +46,14 @@ } [purpose='features-list'] { - // min-width: 254px; + padding-left: 40px; + font-size: 14px; word-wrap: overflow; - ul { + ul { list-style-type: none; padding-inline-start: 0px; - } - li { + } + li { padding-bottom: 12px; color: @core-fleet-black-75; white-space: nowrap; @@ -66,4 +66,17 @@ } + @media (max-width: 768px) { + padding-top: 60px; + } + + @media (max-width: 576px) { + padding-top: 40px; + [purpose='customer-portal-form'] { + .card-body { + padding: 1.5em 1em; + } + } + } + } diff --git a/website/views/pages/customers/dashboard.ejs b/website/views/pages/customers/dashboard.ejs index e5b2b5d80d..352303c527 100644 --- a/website/views/pages/customers/dashboard.ejs +++ b/website/views/pages/customers/dashboard.ejs @@ -1,22 +1,22 @@
-
+

Your license

-
+
Item

Fleet Premium

-
+
Cost

${{thisSubscription.subscriptionPrice}}.00/year

-
+
No. of devices

{{thisSubscription.numberOfHosts}}

-
+
Expires

@@ -28,52 +28,52 @@
-
-
-

Your details

+
+
+

Your details

-
Organization:
-
+
Organization:
+
{{me.organization}}A pencil icon indicating that this information can be editted
-
Name:
-
+
Name:
+
{{me.firstName}} {{me.lastName}}A pencil icon indicating that this information can be editted
-
Email:
-
+
Email:
+
{{me.emailChangeCandidate ? me.emailChangeCandidate : me.emailAddress}}A pencil icon indicating that this information can be editted
-
Password:
-
+
Password:
+
••••••••A pencil icon indicating that this information can be editted
-
-

Billing and payment

+
+

Billing and payment

-
-
A small credit card
-
+
+
A credit card Icon
+

{{me.billingCardBrand}} ending in {{me.billingCardLast4}}A pencil icon indicating that this information can be editted

-
-
A small credit card
-
+
+
A calendar icon
+

{{thisSubscription.numberOfHosts}} devices @ $1.00/device/month

Billed anually at ${{thisSubscription.subscriptionPrice}}.00/yr

Next payment on

@@ -82,10 +82,10 @@
- An icon indicating that this section has important information + An icon indicating that this section has important information
-
-

Contact us to change your number of devices, or to cancel your subscription.

+
+

Contact us to change your number of devices, or to cancel your subscription.

@@ -93,18 +93,14 @@
-
-
- +
+ How to deploy Fleet -
-
- + Slack logo Ask for help on Slack -
@@ -144,7 +140,7 @@
- Save + Save
@@ -173,7 +169,7 @@
- Save + Save
@@ -191,7 +187,7 @@
- Save card + Save card
@@ -207,7 +203,7 @@
- Remove + Remove
diff --git a/website/views/pages/customers/new-license.ejs b/website/views/pages/customers/new-license.ejs index 5e54d58462..14b70a0405 100644 --- a/website/views/pages/customers/new-license.ejs +++ b/website/views/pages/customers/new-license.ejs @@ -1,25 +1,27 @@
-
+

Welcome to Fleet Premium

We just need a few details in order to get you a Fleet Premium license key.

-
+
-
+
-
-
+
+
- {{formData.numberOfHosts}}
Please enter a number of hosts
+ {{formData.numberOfHosts}}
-
-

+ +

+

$1.00/month/device
(Billed annually at $12/device)

+
Continue @@ -64,10 +66,10 @@
-
+

Thank you, your order is complete.

-

Welcome to your admin dashboard.

-

From here you can access your license key, change your details and update your payment method, and find to help you deploy Fleet.

+

Welcome to your admin dashboard.

+

From here you can access your license key, change your details and update your payment method.

Contine to dashboard
diff --git a/website/views/pages/entrance/forgot-password.ejs b/website/views/pages/entrance/forgot-password.ejs index f686671c64..190b4a2a4f 100644 --- a/website/views/pages/entrance/forgot-password.ejs +++ b/website/views/pages/entrance/forgot-password.ejs @@ -1,23 +1,24 @@
-
+
-

Forgot your password?

-
- -
- - I have an account - -
Please enter a valid email address.
-
- - Reset password - +

Forgot your password?

+
+
+ +
+ + +
Please enter a valid email address.
+
+ + Reset password + +
-

Password recovery sent

-

We've sent you a link to update your password.

+

Password recovery sent

+

We've sent you a link to update your password.

If the email you entered is associated with a Fleet account, you should receive a recovery email shortly. If the email doesn’t arrive, please try again, or contact support.

diff --git a/website/views/pages/entrance/login.ejs b/website/views/pages/entrance/login.ejs index 27ded3fb8c..db2e72faf6 100644 --- a/website/views/pages/entrance/login.ejs +++ b/website/views/pages/entrance/login.ejs @@ -1,15 +1,14 @@
-
+

Welcome to Fleet Premium

Sign in to view your Fleet Premium dashboard.

-
- -
+
+
- Create an account + Create an account
Please provide a valid email address.
@@ -18,13 +17,13 @@
Please enter your password.
- Something’s not quite right with your email or password. + Something’s not quite right with your email or password. -
+
Sign in
- Forgot your password? + Forgot your password?
diff --git a/website/views/pages/entrance/signup.ejs b/website/views/pages/entrance/signup.ejs index 0d70b3bc48..f2128290de 100644 --- a/website/views/pages/entrance/signup.ejs +++ b/website/views/pages/entrance/signup.ejs @@ -1,15 +1,15 @@
-
+

Welcome to Fleet Premium

We just need a few details in order to get you a Fleet Premium license key.

-
+
- I have an account + I have an account
This doesn’t appear to be a valid email address
@@ -27,14 +27,14 @@
Please enter the name of your organization.
-
+
Please enter your first name.
-
+
@@ -47,7 +47,7 @@

This email is already linked to a Fleet account.
Please sign in with your email and password.

-

By signing up you agree to our Privacy Policy and Terms of Service.

+

By signing up you agree to our Privacy Policy and Terms of Service.

Agree and continue Reset form and try again