Updated disabled cookie warning

no refs.
- added different disabled cookie warning messages depending on the context
- disabled input fields, checkboxes and buttons globally if cookies are disabled
- refined copy and visuals

ghost/portal/src/components/Frame.styles.js

@@ -93,6 +93,11 @@ const FrameStyles = `
         border-color: var(--grey10);
     }
 
+    .gh-portal-btn:disabled {
+        opacity: 0.3 !important;
+        cursor: auto;
+    }
+
     .gh-portal-btn-icon svg {
         width: 16px;
         height: 16px;
@@ -422,6 +427,16 @@ const FrameStyles = `
         margin: 12px 0;
     }
 
+    .gh-portal-cookiebanner {
+        background: var(--red);
+        color: var(--white);
+        text-align: center;
+        font-size: 1.4rem;
+        letter-spacing: 0.2px;
+        line-height: 1.4em;
+        padding: 8px;
+    }
+
     /* Icons
     /* ----------------------------------------------------- */
     .gh-portal-icon {

ghost/portal/src/components/PopupModal.js

@@ -4,7 +4,7 @@ import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
 import Pages, {getActivePage} from '../pages';
 import PopupNotification from './common/PopupNotification';
-import { isCookiesDisabled } from '../utils/helpers';
+import {isCookiesDisabled} from '../utils/helpers';
 
 const React = require('react');
 
@@ -39,11 +39,11 @@ const StylesWrapper = ({member}) => {
     };
 };
 
-const CookieDisabledBanner = () => {
+function CookieDisabledBanner({message}) {
     const cookieDisabled = isCookiesDisabled();
     if (cookieDisabled) {
         return (
-            <div> Cookies are disabled </div>
+            <div className='gh-portal-cookiebanner'>{message}</div>
         );
     }
     return null;
@@ -108,10 +108,22 @@ class PopupContent extends React.Component {
         if (portalPlans.length <= 1) {
             popupWidthStyle = 'gh-portal-container-narrow';
         }
+        let cookieBannerText = '';
+        switch (page) {
+        case 'signup':
+            cookieBannerText = 'Cookies must be enabled in your browser to sign up.';
+            break;
+        case 'signin':
+            cookieBannerText = 'Cookies must be enabled in your browser to sign in.';
+            break;
+        default:
+            cookieBannerText = 'Cookies must be enabled in your browser.';
+            break;
+        }
         return (
             <div className='gh-portal-popup-wrapper'>
                 <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + ' ' + popupWidthStyle} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
-                    <CookieDisabledBanner />
+                    <CookieDisabledBanner message={cookieBannerText} />
                     {this.renderPopupNotification()}
                     {this.renderActivePage()}
                 </div>

ghost/portal/src/components/common/ActionButton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import getContrastColor from '../../utils/contrast-color';
 import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
+import {isCookiesDisabled} from '../../utils/helpers';
 
 export const ActionButtonStyles = `
     .gh-portal-btn-main {
@@ -27,7 +28,11 @@ export const ActionButtonStyles = `
         border: none;
     }
 
-    .gh-portal-btn-destructive:hover {
+    .gh-portal-btn-primary:disabled:hover::before {
+        display: none;
+    }
+
+    .gh-portal-btn-destructive:not(:disabled):hover {
         color: var(--red);
         border-color: var(--red);
     }
@@ -87,7 +92,9 @@ function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, i
     if (isDestructive) {
         className += ' gh-portal-btn-destructive';
     }
-    
+    if (isCookiesDisabled()) {
+        disabled = true;
+    }
     const loaderClassName = isPrimary ? 'gh-portal-loadingicon' : 'gh-portal-loadingicon dark';
     return (
         <button className={className} style={Style.button} onClick={e => onClick(e)} disabled={disabled}>

ghost/portal/src/components/common/InputField.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {isCookiesDisabled} from '../../utils/helpers';
 
 export const InputFieldStyles = `
     .gh-portal-input {
@@ -52,6 +53,16 @@ export const InputFieldStyles = `
     .gh-portal-input::placeholder {
         color: var(--grey7);
     }
+
+    .gh-portal-input:disabled {
+        background: var(--grey13);
+        color: var(--grey9);
+        box-shadow: none;
+    }
+
+    .gh-portal-input:disabled::placeholder {
+        color: var(--grey9);
+    }
 `;
 
 function InputError({message, style}) {
@@ -72,6 +83,9 @@ function InputField({name, id, label, hideLabel, type, value, placeholder, disab
     onBlur = onBlur || function (){};
     const labelClasses = hideLabel ? 'gh-portal-input-label hidden' : 'gh-portal-input-label';
     const inputClasses = errorMessage ? 'gh-portal-input error' : 'gh-portal-input';
+    if (isCookiesDisabled()) {
+        disabled = true;
+    }
     return (
         <section className='gh-portal-input-section'>
             <div className='gh-portal-input-labelcontainer'>

ghost/portal/src/components/common/PlansSection.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {isCookiesDisabled} from '../../utils/helpers';
 
 export const PlanSectionStyles = `
     .gh-portal-plans-container {
@@ -21,6 +22,10 @@ export const PlanSectionStyles = `
         cursor: pointer;
     }
 
+    .gh-portal-plans-container.disabled .gh-portal-plan-section {
+        cursor: auto;
+    }
+
     .gh-portal-plan-section.checked::before {
         position: absolute;
         display: block;
@@ -48,6 +53,10 @@ export const PlanSectionStyles = `
         border-right: none;
     }
 
+    .gh-portal-plans-container.disabled .gh-portal-plan-section.checked::before {
+        opacity: 0.3;
+    }
+
     .gh-portal-plan-pricelabel {
         margin-top: 8px;
     }
@@ -102,6 +111,10 @@ export const PlanSectionStyles = `
         user-select: none;
     }
 
+    .gh-portal-plans-container.disabled .gh-portal-plan-checkbox {
+        cursor: auto;
+    }
+
     .gh-portal-plan-checkbox input {
         position: absolute;
         height: 0;
@@ -146,6 +159,10 @@ export const PlanSectionStyles = `
         transform: rotate(45deg);
     }
 
+    .gh-portal-plans-container.disabled .gh-portal-plan-checkbox input:checked ~ .checkmark {
+        opacity: 0.3;
+    }
+
     .gh-portal-content.signup.singleplan .gh-portal-plan-section {
         cursor: auto;
     }
@@ -178,32 +195,8 @@ export const PlanSectionStyles = `
         opacity: 0.5;
     }
 
-    .gh-portal-plan-section:not(.checked).show-check-onhover .checkmark:before {
-        position: absolute;
-        display: block;
-        content: "";
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: var(--brandcolor);
-        border-radius: 999px;
+    .gh-portal-plans-container.disabled .gh-portal-plan-section:not(.checked):hover::before {
         opacity: 0;
-        transition: all 0.2s ease-in-out;
-    }
-
-    .gh-portal-plan-section:not(.checked).show-check-onhover:hover .checkmark:before {
-        opacity: 0.2;
-    }
-
-    .gh-portal-plan-section:not(.checked).show-check-onhover .checkmark:after {
-        display: block;
-        opacity: 0;
-        transition: all 0.2s ease-in-out;
-    }
-
-    .gh-portal-plan-section:not(.checked).show-check-onhover:hover .checkmark:after {
-        opacity: 1.0;
     }
 
     .gh-portal-plans-container.hide-checkbox .gh-portal-plan-checkbox {
@@ -225,7 +218,10 @@ export const PlanSectionStyles = `
     }
 `;
 
-function Checkbox({name, onPlanSelect, isChecked}) {
+function Checkbox({name, onPlanSelect, isChecked, disabled}) {
+    if (isCookiesDisabled()) {
+        disabled = true;
+    }
     return (
         <div className='gh-portal-plan-checkbox'>
             <input
@@ -235,6 +231,7 @@ function Checkbox({name, onPlanSelect, isChecked}) {
                 checked={isChecked}
                 aria-label={name}
                 onChange={e => onPlanSelect(e, name)}
+                disabled={disabled}
             />
             <span className='checkmark'></span>
         </div>
@@ -300,10 +297,14 @@ function PlansSection({plans, showLabel = true, type, selectedPlan, onPlanSelect
     if (!plans || plans.length === 0 || (plans.length === 1 && plans[0].type === 'free')) {
         return null;
     }
+    const cookiesDisabled = isCookiesDisabled();
+    if (cookiesDisabled) {
+        onPlanSelect = (e, name) => {};
+    } 
     return (
         <section>
             <PlanLabel showLabel={showLabel} />
-            <div className={'gh-portal-plans-container' + (changePlan ? ' hide-checkbox' : '')}>
+            <div className={'gh-portal-plans-container' + (changePlan ? ' hide-checkbox' : '') + (cookiesDisabled ? ' disabled' : '')}>
                 <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
             </div>
         </section>