diff --git a/src/html/private/preview-pricing/pricing-hero.hbs b/src/html/private/preview-pricing/pricing-hero.hbs index 72fc5070..9263949d 100644 --- a/src/html/private/preview-pricing/pricing-hero.hbs +++ b/src/html/private/preview-pricing/pricing-hero.hbs @@ -49,7 +49,7 @@

Enterprise

-
+

No spam — we promise!

diff --git a/src/js/signup.js b/src/js/signup.js index ba122c0d..add90a5a 100644 --- a/src/js/signup.js +++ b/src/js/signup.js @@ -219,14 +219,15 @@ function submitForm(e) { function sundipValidation(resultMessage, form, formName) { var prevError = form.getElementsByClassName('red')[0]; var error = document.createElement('small'); + var submitButton = form.getElementsByTagName('button')[0]; if (prevError) { prevError.parentNode.removeChild(prevError); } - error.classList.add('small','red','text-center'); + error.classList.add('popover', 'bottom', 'in', 'small','red','text-center'); error.innerHTML = resultMessage; - form.appendChild(error); + submitButton.appendChild(error); analytics.ready(function() { analytics.track('Error ' + formName + '-list form', {error: resultMessage, clientId: ga.getAll()[0].get('clientId')}); diff --git a/src/styles/components/popover.scss b/src/styles/components/popover.scss index d89439d3..a012feae 100644 --- a/src/styles/components/popover.scss +++ b/src/styles/components/popover.scss @@ -90,6 +90,13 @@ visibility: hidden; z-index: 100; + &.in { + opacity: 1; + transform: scale3d(1,1,1) translate3d(-50%,0,0); + transition: all .15s ease-in-out; + visibility: visible; + } + &.bottom { box-shadow: 0 1px 3px rgba($black,.1); top: calc(100% + 12px); diff --git a/src/styles/pricing/pricing-hero.scss b/src/styles/pricing/pricing-hero.scss index 5e049605..8d1a6f14 100644 --- a/src/styles/pricing/pricing-hero.scss +++ b/src/styles/pricing/pricing-hero.scss @@ -113,7 +113,7 @@ &.form { .price-wrapper { - margin-bottom: 11px; + margin-bottom: 20px; padding-top: 20px; } @@ -137,16 +137,16 @@ } } - .divider { - background: $gray-lightest; - height: 1px; - margin: auto 0 20px; - width: 100%; - } - .input { margin-bottom: 10px; } + + .popover { + line-height: 1.4; + white-space: normal; + width: 100%; + word-wrap: break-word; + } } .sup {