From b6a8385adcf55b5ee80c6976c7d6fdaf230e0c38 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Wed, 7 Oct 2020 19:58:43 +0200 Subject: [PATCH] WIP/ Feature :Register wizard coding style --- .../containers/Authentication/AuthInsider.js | 16 +- .../Authentication/RegisterLeftSidebar.js | 75 ++++ .../RegisterOrganizationForm.js | 368 ++++++++++++++++++ .../RegisterSubscriptionForm.js | 40 ++ .../Authentication/RegisterWizardPage.js | 17 + .../Authentication/RegisterWizardSteps.js | 36 ++ .../containers/Subscriptions/BillingTab.js | 5 +- client/src/lang/en/index.js | 21 + client/src/routes/authentication.js | 8 +- client/src/style/App.scss | 6 +- client/src/style/pages/authentication.scss | 99 ++--- client/src/style/pages/billing.scss | 14 +- .../src/style/pages/register-organizaton.scss | 83 ++++ .../src/style/pages/register-wizard-page.scss | 125 ++++++ 14 files changed, 843 insertions(+), 70 deletions(-) create mode 100644 client/src/containers/Authentication/RegisterLeftSidebar.js create mode 100644 client/src/containers/Authentication/RegisterOrganizationForm.js create mode 100644 client/src/containers/Authentication/RegisterSubscriptionForm.js create mode 100644 client/src/containers/Authentication/RegisterWizardPage.js create mode 100644 client/src/containers/Authentication/RegisterWizardSteps.js create mode 100644 client/src/style/pages/register-organizaton.scss create mode 100644 client/src/style/pages/register-wizard-page.scss diff --git a/client/src/containers/Authentication/AuthInsider.js b/client/src/containers/Authentication/AuthInsider.js index 7484693c5..8e52a4b28 100644 --- a/client/src/containers/Authentication/AuthInsider.js +++ b/client/src/containers/Authentication/AuthInsider.js @@ -7,23 +7,17 @@ export default function AuthInsider({ copyright = true, children, }) { - return (
- -
- -
- { children } + {/* */}
+
{children}
+
- ) -} \ No newline at end of file + ); +} diff --git a/client/src/containers/Authentication/RegisterLeftSidebar.js b/client/src/containers/Authentication/RegisterLeftSidebar.js new file mode 100644 index 000000000..3d1054d7a --- /dev/null +++ b/client/src/containers/Authentication/RegisterLeftSidebar.js @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import Icon from 'components/Icon'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import RegisterWizardSteps from './RegisterWizardSteps'; +import RegisterOrganizationForm from './RegisterOrganizationForm'; +import Register from './Register'; +import Login from './Login'; +import RegisterSubscriptionForm from './RegisterSubscriptionForm'; + +function RegisterLeftSidebar() { + const { formatMessage } = useIntl(); + const [org] = useState('LibyanSpider'); + + console.log(org, 'EE'); + return ( +
+
+
+
+
+ +
+

+ +

+ +

+ +

+
+ + + {org}, + + + + + + +
+ + +
+
+
+
+
+ + {/* */} + {/* */} + {/* */} + +
+
+
+ ); +} + +export default RegisterLeftSidebar; diff --git a/client/src/containers/Authentication/RegisterOrganizationForm.js b/client/src/containers/Authentication/RegisterOrganizationForm.js new file mode 100644 index 000000000..d23c684d7 --- /dev/null +++ b/client/src/containers/Authentication/RegisterOrganizationForm.js @@ -0,0 +1,368 @@ +import React, { useMemo, useState, useCallback } from 'react'; +import * as Yup from 'yup'; +import { useFormik } from 'formik'; +import { Row, Col } from 'react-grid-system'; +import { + Button, + Intent, + FormGroup, + MenuItem, + Classes, + Position, +} from '@blueprintjs/core'; +import moment from 'moment'; +import classNames from 'classnames'; +import { TimezonePicker } from '@blueprintjs/timezone'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { DateInput } from '@blueprintjs/datetime'; +import { momentFormatter, tansformDateValue } from 'utils'; +import AppToaster from 'components/AppToaster'; + +import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components'; + +function RegisterOrganizationForm() { + const { formatMessage } = useIntl(); + const [selected, setSelected] = useState(); + + const baseCurrency = [ + { id: 0, name: 'LYD - Libyan Dinar', value: 'LYD' }, + { id: 1, name: 'USD - American Dollar', value: 'USD' }, + ]; + + const languages = [ + { id: 0, name: 'English', value: 'en' }, + { id: 1, name: 'Arabic', value: 'ar' }, + ]; + + const fiscalYear = [ + { + id: 0, + name: `${formatMessage({ id: 'january' })} - ${formatMessage({ + id: 'december', + })}`, + value: 'january', + }, + { + id: 1, + name: `${formatMessage({ id: 'february' })} - ${formatMessage({ + id: 'january', + })}`, + value: 'february', + }, + { + id: 2, + name: `${formatMessage({ id: 'march' })} - ${formatMessage({ + id: 'february', + })}`, + value: 'March', + }, + { + id: 3, + name: `${formatMessage({ id: 'april' })} - ${formatMessage({ + id: 'march', + })}`, + value: 'april', + }, + { + id: 4, + name: `${formatMessage({ id: 'may' })} - ${formatMessage({ + id: 'april', + })}`, + value: 'may', + }, + { + id: 5, + name: `${formatMessage({ id: 'june' })} - ${formatMessage({ + id: 'may', + })}`, + value: 'june', + }, + { + id: 6, + name: `${formatMessage({ id: 'july' })} - ${formatMessage({ + id: 'june', + })}`, + value: 'july', + }, + { + id: 7, + name: `${formatMessage({ id: 'august' })} - ${formatMessage({ + id: 'july', + })}`, + value: 'August', + }, + { + id: 8, + name: `${formatMessage({ id: 'september' })} - ${formatMessage({ + id: 'august', + })}`, + value: 'september', + }, + { + id: 9, + name: `${formatMessage({ id: 'october' })} - ${formatMessage({ + id: 'november', + })}`, + value: 'october', + }, + { + id: 10, + name: `${formatMessage({ id: 'november' })} - ${formatMessage({ + id: 'october', + })}`, + value: 'november', + }, + { + id: 11, + name: `${formatMessage({ id: 'december' })} - ${formatMessage({ + id: 'november', + })}`, + value: 'december', + }, + ]; + + const ValidationSchema = Yup.object().shape({ + date_start: Yup.date().required(), + // .label(formatMessage({id:''})) + base_currency: Yup.string().required( + formatMessage({ id: 'base_currency_' }), + ), + language: Yup.string() + .required() + .label(formatMessage({ id: 'language' })), + fiscal_year: Yup.string() + .required() + .label(formatMessage({ id: 'fiscal_year_' })), + time_zone: Yup.string(), + }); + + const initialValues = useMemo(() => ({}), []); + + const { + values, + errors, + touched, + handleSubmit, + setFieldValue, + getFieldProps, + isSubmitting, + } = useFormik({ + enableReinitialize: true, + validationSchema: ValidationSchema, + initialValues: { + ...initialValues, + }, + onSubmit: (values, { setSubmitting, setErrors }) => {}, + }); + + const onItemsSelect = (filedName) => { + return (filed) => { + setSelected({ + ...selected, + [filedName]: filed, + }); + setFieldValue(filedName, filed.value); + }; + }; + + const filterItems = (query, item, _index, exactMatch) => { + const normalizedTitle = item.name.toLowerCase(); + const normalizedQuery = query.toLowerCase(); + + if (exactMatch) { + return normalizedTitle === normalizedQuery; + } else { + return normalizedTitle.indexOf(normalizedQuery) >= 0; + } + }; + + const onItemRenderer = (item, { handleClick }) => ( + + ); + + const handleTimeZoneChange = useCallback( + (time_zone) => { + setFieldValue('time_zone', time_zone); + }, + [setFieldValue], + ); + + const handleDateChange = useCallback( + (date_filed) => (date) => { + const formatted = moment(date).format('YYYY-MM-DD'); + setFieldValue(date_filed, formatted); + }, + [setFieldValue], + ); + + return ( +
+
+

+ +

+

+ +

+
+ +
+

+ +

+ + {/* financial starting date */} + } + labelInfo={} + intent={errors.date_start && touched.date_start && Intent.DANGER} + helperText={ + + } + > + + + + {/* base currency */} + + } + labelInfo={} + className={classNames( + 'form-group--base-currency', + 'form-group--select-list', + Classes.FILL, + )} + intent={ + errors.base_currency && touched.base_currency && Intent.DANGER + } + helperText={ + + } + > + } + itemRenderer={onItemRenderer} + popoverProps={{ minimal: true }} + onItemSelect={onItemsSelect('base_currency')} + itemPredicate={filterItems} + selectedItem={values.base_currency} + selectedItemProp={'value'} + // defaultText={} + defaultText={'LYD - Libyan Dinar'} + labelProp={'name'} + /> + + + + {/* language */} + + } + labelInfo={} + className={classNames( + 'form-group--language', + 'form-group--select-list', + Classes.FILL, + )} + intent={errors.language && touched.language && Intent.DANGER} + helperText={ + + } + > + } + itemRenderer={onItemRenderer} + popoverProps={{ minimal: true }} + onItemSelect={onItemsSelect('language')} + itemPredicate={filterItems} + selectedItem={values.language} + selectedItemProp={'value'} + defaultText={'English'} + // defaultText={} + labelProp={'name'} + /> + + + + {/* fiscal Year */} + } + labelInfo={} + className={classNames( + 'form-group--fiscal_year', + 'form-group--select-list', + Classes.FILL, + )} + intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER} + helperText={ + + } + > + } + itemRenderer={onItemRenderer} + popoverProps={{ minimal: true }} + onItemSelect={onItemsSelect('fiscal_year')} + itemPredicate={filterItems} + selectedItem={values.fiscal_year} + selectedItemProp={'value'} + defaultText={'January - December'} + // defaultText={} + labelProp={'name'} + /> + + + {/* Time zone */} + } + className={classNames( + 'form-group--time-zone', + 'form-group--select-list', + Classes.FILL, + )} + intent={errors.time_zone && touched.time_zone && Intent.DANGER} + helperText={ + + } + > + } + /> + + +

+ +

+
+ +
+
+
+ ); +} + +export default RegisterOrganizationForm; diff --git a/client/src/containers/Authentication/RegisterSubscriptionForm.js b/client/src/containers/Authentication/RegisterSubscriptionForm.js new file mode 100644 index 000000000..6274ac3aa --- /dev/null +++ b/client/src/containers/Authentication/RegisterSubscriptionForm.js @@ -0,0 +1,40 @@ +import React, { useMemo } from 'react'; +import * as Yup from 'yup'; +import { useFormik } from 'formik'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { Button, Intent } from '@blueprintjs/core'; +import BillingTab from 'containers/Subscriptions/BillingTab'; + +function RegisterSubscriptionForm({}) { + const ValidationSchema = Yup.object().shape({}); + + const initialValues = useMemo(() => ({}), []); + + const formik = useFormik({ + enableReinitialize: true, + validationSchema: ValidationSchema, + initialValues: { + ...initialValues, + }, + onSubmit: (values, { setSubmitting, setErrors }) => {}, + }); + return ( +
+
+ + +
+ +
+ +
+ ); +} + +export default RegisterSubscriptionForm; diff --git a/client/src/containers/Authentication/RegisterWizardPage.js b/client/src/containers/Authentication/RegisterWizardPage.js new file mode 100644 index 000000000..1ac0adca0 --- /dev/null +++ b/client/src/containers/Authentication/RegisterWizardPage.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Redirect, Route, Switch, Link } from 'react-router-dom'; +import RegisterLeftSidebar from './RegisterLeftSidebar'; + +function RegisterWizardPage() { + return ( + <> + +
+ +
+ + + ); +} + +export default RegisterWizardPage; diff --git a/client/src/containers/Authentication/RegisterWizardSteps.js b/client/src/containers/Authentication/RegisterWizardSteps.js new file mode 100644 index 000000000..f49c5e3cc --- /dev/null +++ b/client/src/containers/Authentication/RegisterWizardSteps.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { FormattedMessage as T, useIntl } from 'react-intl'; + +function RegisterWizardSteps() { + return ( +
+
+
    +
  • +

    + +

    +
    • +
  • +

    + +

    +
    • +
  • +

    + +

    +
    • + +
  • +

    + +

    +
    • +
+
+
+ ); +} + +export default RegisterWizardSteps; diff --git a/client/src/containers/Subscriptions/BillingTab.js b/client/src/containers/Subscriptions/BillingTab.js index df46a8977..2e7b9319b 100644 --- a/client/src/containers/Subscriptions/BillingTab.js +++ b/client/src/containers/Subscriptions/BillingTab.js @@ -121,7 +121,8 @@ function BillingTab({ formik }) {

@@ -135,7 +136,7 @@ function BillingTab({ formik }) {
- + diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 9098e57b0..190445456 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -740,4 +740,25 @@ export default { sell_account: 'Sell Account', cost_account: 'Cost Account', inventory_account: 'Inventory Account', + + register_a_new_organization_now: 'Register a New Organization now!.', + you_have_a_bigcapital_account: 'You have a Bigcapital account ', + contact_us_technical_support: 'Contact us - Technical Support', + let_s_get_started: 'Let’s Get Started', + tell_the_system_a_little_bit_about_your_organization: + 'Tell the system a little bit about your organization.', + organization_details: 'Organization details', + financial_starting_date: 'Financial starting date ', + base_currency: 'Base Currency', + note_you_can_change_your_preferences_later_in_dashboard_if_needed: + 'Note: You can change your preferences later in dashboard, if needed.', + save_continue: 'Save & Continue', + organization_register: 'Organization Register', + getting_started: 'Getting started', + payment_or_trial: 'Payment or trial', + initializing: 'Initializing', + fiscal_year_: 'Fiscal year', + welcome: 'Welcome ', + sign_out: 'Sign out', + we_re_here_to_help: 'We’re Here to Help!', }; diff --git a/client/src/routes/authentication.js b/client/src/routes/authentication.js index 0940781cc..1d9e11b0a 100644 --- a/client/src/routes/authentication.js +++ b/client/src/routes/authentication.js @@ -12,7 +12,7 @@ export default [ { path: `${BASE_URL}/register`, component: LazyLoader({ - loader: () => import('containers/Authentication/Register'), + loader: () => import('containers/Authentication/Register'), }), }, { @@ -33,4 +33,10 @@ export default [ loader: () => import('containers/Authentication/InviteAccept'), }), }, + { + path: `${BASE_URL}/wizard`, + component: LazyLoader({ + loader: () => import('containers/Authentication/RegisterWizardPage'), + }), + }, ]; diff --git a/client/src/style/App.scss b/client/src/style/App.scss index 0c6cdc201..520ce34f1 100644 --- a/client/src/style/App.scss +++ b/client/src/style/App.scss @@ -63,12 +63,14 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, @import 'pages/exchange-rate'; @import 'pages/customer'; @import 'pages/billing'; +@import 'pages/register-wizard-page.scss'; +@import 'pages/register-organizaton.scss'; // Views -@import 'views/filter-dropdown'; + @import 'views/filter-dropdown'; @import 'views/sidebar'; @import 'pages/estimate'; - + .App { min-width: 960px; } diff --git a/client/src/style/pages/authentication.scss b/client/src/style/pages/authentication.scss index 0d7cd6369..81d912177 100644 --- a/client/src/style/pages/authentication.scss +++ b/client/src/style/pages/authentication.scss @@ -1,30 +1,28 @@ - - -.authentication-insider{ +.authentication-insider { margin-top: 80px; margin-bottom: 40px; - &__logo-section{ + &__logo-section { text-align: center; margin-bottom: 60px; } - &__content{ + &__content { position: relative; } - &__footer{ - .auth-copyright{ + &__footer { + .auth-copyright { text-align: center; font-size: 12px; color: #666; - .bp3-icon-bigcapital{ + .bp3-icon-bigcapital { margin-top: 9px; - svg{ - path{ - fill: #A3A3A3; + svg { + path { + fill: #a3a3a3; } } } @@ -33,54 +31,55 @@ } .authentication-page { - - &__goto-bigcapital{ + &__goto-bigcapital { position: fixed; margin-top: 30px; margin-left: 30px; color: #777; } - + .bp3-input { - min-height: 40px; - border: 2px solid #E3E3E3; + min-height: 38px; + // border: 2px solid #E3E3E3; } - .bp3-form-group{ - margin-bottom: 25px; + // .bp3-form-group{ + // margin-bottom: 25px; - &.bp3-intent-danger{ - .bp3-input{ - border-color: #eea9a9; - } - } - } + // &.bp3-intent-danger{ + // .bp3-input{ + // border-color: #eea9a9; + // } + // } + // } - .bp3-form-group.has-password-revealer{ - - .bp3-label{ + .bp3-form-group.has-password-revealer { + .bp3-label { display: flex; justify-content: space-between; } - .password-revealer{ - .text{ + .password-revealer { + .text { font-size: 12px; } } } - .bp3-button.bp3-fill.bp3-intent-primary{ + .bp3-button.bp3-fill.bp3-intent-primary { font-size: 16px; } - &__label-section{ + &__label-section { margin-bottom: 34px; color: #555; - - h3{ - font-weight: 500; - font-size: 28px; - color: #444; + + h3 { + // font-weight: 500; + font-weight: 400; + // font-size: 28px; + font-size: 22px; + // color: #444; + color: #555555; margin: 0 0 12px; } @@ -92,24 +91,24 @@ &__form-wrapper { width: 100%; - max-width: 415px; - padding: 15px; + // max-width: 415px; + // padding: 15px; margin: 0 auto; } - &__footer-links{ + &__footer-links { padding: 9px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; margin-bottom: 1.2rem; - a{ + a { color: #0052cc; } } - &__loading-overlay{ + &__loading-overlay { position: absolute; top: 0; left: 0; @@ -132,9 +131,11 @@ // Login Form // ------------------------------ .login-form { - - .checkbox{ - &--remember-me{ + width: 690px; + margin: 0px auto; + padding: 85px 50px; + .checkbox { + &--remember-me { margin: -4px 0 28px 0px; font-size: 14px; } @@ -143,10 +144,13 @@ // Register Form .register-form { + width: 690px; + margin: 0px auto; + padding: 85px 50px; &__agreement-section { margin-top: -10px; - + p { font-size: 13px; margin-top: -10px; @@ -166,7 +170,6 @@ } .invite-form { - &__statement-section { margin-top: -10px; p { @@ -176,8 +179,8 @@ } } - .authentication-page__loading-overlay{ + .authentication-page__loading-overlay { background: rgba(252, 253, 255, 0.9); } } -} \ No newline at end of file +} diff --git a/client/src/style/pages/billing.scss b/client/src/style/pages/billing.scss index 4ca989d44..cadd124e5 100644 --- a/client/src/style/pages/billing.scss +++ b/client/src/style/pages/billing.scss @@ -34,20 +34,20 @@ .plan-header { display: flex; justify-content: flex-start; - margin-bottom: 10px; } .plan-name { background: #3657ff; border-radius: 3px; - padding: 1px 8px 1px 8px; + padding: 2px 8px 2px 8px; font-size: 13px; color: #fff; - margin-bottom: 15px; + margin-bottom: 16px; + height: 21px; } .plan-description { font-size: 14px; font-weight: 400; - line-height: 2em; + line-height: 1.8rem; &.plan-description ul { list-style: none; @@ -113,10 +113,10 @@ .bg-title { font-size: 22px; font-weight: 400; - line-height: normal; + color: #666666; } .bg-message { - margin-bottom: 15px; + margin-bottom: 23px; font-size: 14px; } .license-container { @@ -139,9 +139,11 @@ } h4 { font-size: 18px; + font-weight: 400; color: #444444; } p { + margin-top: 15px; font-size: 14px; } } diff --git a/client/src/style/pages/register-organizaton.scss b/client/src/style/pages/register-organizaton.scss new file mode 100644 index 000000000..cf30a8958 --- /dev/null +++ b/client/src/style/pages/register-organizaton.scss @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.register-organizaton-form { + width: 690px; + margin: 0px auto; + padding: 80px 50px; + + .register-org-title { + margin-bottom: 30px; + + h2 { + font-size: 22px; + font-weight: 400; + color: #555555; + line-height: 2em; + } + p { + font-size: 14px; + } + } + h3 { + font-size: 18px; + font-weight: 400; + color: #888888; + margin-bottom: 20px; + } + + .bp3-form-group { + .bp3-input-group { + .bp3-input { + position: relative; + width: 619px; + height: 38px; + } + } + } + + .form-group--base-currency, + .form-group--language { + .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + min-width: 300px; + min-height: 38px; + } + } + .form-group--language { + margin-left: 18px; + } + .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + min-width: 619px; + min-height: 38px; + } + + .form-group--time-zone { + .bp3-text-muted { + color: #000000; + } + .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + background: #fff; + box-shadow: 0 0 0 transparent; + border: 1px solid #ced4da; + padding: 8px; + } + } + + .register-org-note { + width: 618px; + font-size: 14px; + line-height: 2.7rem; + margin-bottom: 20px; + border-bottom: 3px solid #f5f5f5; + } + .register-org-button { + .bp3-button { + background-color: #0052cc; + width: 174px; + min-height: 40px; + } + } +} diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss new file mode 100644 index 000000000..3e316f569 --- /dev/null +++ b/client/src/style/pages/register-wizard-page.scss @@ -0,0 +1,125 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +// Register Left Sidebar +.wizard-left-side { + position: fixed; + background: #778cab; + overflow: auto; + z-index: 1; + height: 100%; + max-width: 25%; + left: 0; + top: 0; + + .content { + display: flex; + flex-direction: column; + color: #ffffff; + padding: 25px; + margin: 0px auto; + border: none; + cursor: pointer; + .content-logo { + margin-bottom: 45px; + } + .content-title { + font-size: 25px; + font-weight: 700; + line-height: normal; + margin-bottom: 25px; + } + .content-text { + font-size: 14px; + } + .content-org { + font-size: 14px; + + span > a { + text-decoration: underline; + color: #ffffff; + margin-left: 5px; + } + span ::after { + border-top: 2px solid #707070; + } + } + .content-contact { + position: absolute; + bottom: 15px; + a { + text-decoration: none; + color: #ffffff; + font-size: 14px; + } + } + } +} +.wizard-right-side { + padding-left: 25%; +} + +// Register Wizard Steps +.wizard-container { + width: 80%; + margin: 60px auto; + + .wizard-wrapper li { + position: relative; + list-style-type: none; + width: 25%; + float: left; + text-align: center; + color: #000; + font-size: 15px; + } + .wizard-wrapper li::before { + width: 13px; + height: 13px; + content: ''; + line-height: 30px; + display: block; + text-align: center; + margin: 0 auto 10px auto; + border-radius: 50%; + background-color: #75859c; + } + .wizard-wrapper li::after { + width: 100%; + height: 2px; + content: ''; + position: absolute; + background-color: #75859c; + top: 6px; + left: -50%; + z-index: -1; + } + .wizard-wrapper li:first-child::after { + display: none; + } + + .wizard-wrapper > li.complete::before { + background-color: #75859c; + } + + .wizard-wrapper > li.complete ~ li::before { + background: #ebebeb; + } + + .wizard-wrapper > li.complete ~ li::after { + background: #ebebeb; + } + .wizard-wrapper > li.complete p.wizard-info { + color: #004dd0; + } +} + +// @import './billing.scss'; + +//Register Subscription form +.register-subscription-form { + padding-top: 50px; +}