Applying basic styles to members popups

no issue
2024-12-03 03:55:26 +03:00 · 2019-02-15 18:16:30 +01:00 · 2019-02-15 18:16:30 +01:00 · 17e29a3185
commit 17e29a3185
parent 8e9ade6357
13 changed files with 191 additions and 98 deletions
--- a/core/server/lib/members/static/auth/assets/images/icon-right-arrow.svg
+++ b/core/server/lib/members/static/auth/assets/images/icon-right-arrow.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.75 23.25c-.2 0-.389-.078-.53-.22-.292-.292-.292-.768 0-1.061l9.22-9.22H.75C.336 12.75 0 12.414 0 12s.336-.75.75-.75h20.689l-9.22-9.22C12.078 1.889 12 1.7 12 1.5s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.5 10.5c.07.07.125.152.163.245l.01.026c.031.081.047.17.047.259 0 .087-.016.174-.047.258l-.006.016c-.042.104-.098.187-.168.257L13.28 23.03c-.141.142-.33.22-.53.22z"/></svg>
--- a/core/server/lib/members/static/auth/components/FormHeader.js
+++ b/core/server/lib/members/static/auth/components/FormHeader.js
@ -2,7 +2,6 @@ import { IconError } from './icons';

 export default ({title, error, errorText, children}) => (
    <div>
-        <div className="gm-logo"></div>
        <div className="gm-auth-header">
            <h1>{ title }</h1>
            { children }
--- a/core/server/lib/members/static/auth/components/FormHeaderCTA.js
+++ b/core/server/lib/members/static/auth/components/FormHeaderCTA.js
@ -1,8 +1,11 @@
+import { IconRightArrow } from './icons';
+
 export default ({title, label, hash}) => (
    <div className="flex items-baseline mt2">
        <h4>{ title }</h4>
        <a href={hash}>
            { label }
+            { IconRightArrow }
        </a>
    </div>
 );
--- a/core/server/lib/members/static/auth/components/FormInput.js
+++ b/core/server/lib/members/static/auth/components/FormInput.js
@ -15,7 +15,6 @@ export default ({type, name, placeholder, value = '', error, onInput, required,
                    className
                ].join(' ')}
            />
-            <label for={ name }>{ placeholder }</label>
            <i>{ icon }</i>
            { children }
        </div>
--- a/core/server/lib/members/static/auth/components/icons.js
+++ b/core/server/lib/members/static/auth/components/icons.js
@ -17,4 +17,8 @@ export const IconClose = (

 export const IconError = (
    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-error</title><g fill="none" fill-rule="evenodd"><path d="M15 7.88c.005 1.944-.674 3.61-2.038 4.997C11.6 14.263 9.945 14.97 8 14.999c-1.921.029-3.567-.63-4.937-1.976S1.005 10.043 1 8.123c-.005-1.946.674-3.612 2.037-4.999C4.401 1.737 6.055 1.029 8 1.001c1.921-.029 3.567.63 4.938 1.977 1.37 1.347 2.057 2.98 2.062 4.902zM7.933 9.337V4.67" stroke="#F05230" stroke-linecap="round" stroke-linejoin="round" /><path d="M7.927 11.67c-.046 0-.084.018-.116.051-.031.033-.046.073-.044.119.004.109.06.163.168.163.046 0 .085-.018.116-.051.032-.033.047-.073.045-.119-.003-.105-.057-.16-.163-.163H7.93" stroke="#F05230" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
+);
+
+export const IconRightArrow = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.75 23.25c-.2 0-.389-.078-.53-.22-.292-.292-.292-.768 0-1.061l9.22-9.22H.75C.336 12.75 0 12.414 0 12s.336-.75.75-.75h20.689l-9.22-9.22C12.078 1.889 12 1.7 12 1.5s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.5 10.5c.07.07.125.152.163.245l.01.026c.031.081.047.17.047.259 0 .087-.016.174-.047.258l-.006.016c-.042.104-.098.187-.168.257L13.28 23.03c-.141.142-.33.22-.53.22z" /></svg>
 );
--- a/core/server/lib/members/static/auth/pages/PasswordResetSentPage.js
+++ b/core/server/lib/members/static/auth/pages/PasswordResetSentPage.js
@ -2,7 +2,7 @@ import FormHeader from '../components/FormHeader';
 import FormSubmit from '../components/FormSubmit';

 export default ({ error, handleSubmit }) => (
-    <div>
+    <div className="gm-modal-form">
        <FormHeader title="Sign up" error={error} errorText="Unable to send email" />
        <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
            <div className="gm-reset-sent">
--- a/core/server/lib/members/static/auth/pages/RequestPasswordResetPage.js
+++ b/core/server/lib/members/static/auth/pages/RequestPasswordResetPage.js
@ -5,7 +5,7 @@ import FormSubmit from '../components/FormSubmit';
 import Form from '../components/Form';

 export default ({ error, handleClose, handleSubmit }) => (
-    <div>
+    <div className="gm-modal-form">
        <FormHeader title="Reset password" error={error} errorText="Unable to send email" />
        <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
            <EmailInput bindTo="email" />
--- a/core/server/lib/members/static/auth/pages/ResetPasswordPage.js
+++ b/core/server/lib/members/static/auth/pages/ResetPasswordPage.js
@ -11,7 +11,7 @@ const getTokenData = frameLocation => {
 };

 export default ({ error, frameLocation, handleSubmit }) => (
-    <div>
+    <div className="gm-modal-form">
        <FormHeader title="Reset password" error={error} errorText="Unable to reset password" />
        <Form includeData={getTokenData(frameLocation)} onSubmit={handleSubmit}>
            <PasswordInput bindTo="password" />
--- a/core/server/lib/members/static/auth/pages/SigninPage.js
+++ b/core/server/lib/members/static/auth/pages/SigninPage.js
@ -7,7 +7,7 @@ import EmailInput from '../components/EmailInput';
 import PasswordInput from '../components/PasswordInput';

 export default ({ error, handleSubmit }) => (
-    <div>
+    <div className="gm-modal-form">
        <FormHeader title="Log in" error={error} errorText="Wrong email or password">
            <FormHeaderCTA title="Not a member?" label="Sign up" hash="#signup" />
        </FormHeader>
--- a/core/server/lib/members/static/auth/pages/SignupPage.js
+++ b/core/server/lib/members/static/auth/pages/SignupPage.js
@ -9,7 +9,7 @@ import PasswordInput from '../components/PasswordInput';
 import { IconClose } from '../components/icons';

 export default ({ error, handleClose, handleSubmit }) => (
-    <div>
+    <div className="gm-modal-form">
        <FormHeader title="Sign up" error={error} errorText="Email already registered">
            <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
        </FormHeader>
--- a/core/server/lib/members/static/auth/pages/StripePaymentPage.js
+++ b/core/server/lib/members/static/auth/pages/StripePaymentPage.js
@ -37,8 +37,7 @@ class PaymentForm extends Component {
                <EmailInput bindTo="email" />
                <PasswordInput bindTo="password" />
                <CheckoutForm />
-
-                <FormSubmit label="Confirm Payment" />
+                <FormSubmit label="Confirm payment" />
            </Form>
        );
    }
@ -56,24 +55,13 @@ export default class StripePaymentPage extends Component {
    }

    renderPlan({ currency, amount, id, interval, name }) {
-        let planStyle = {
-            padding: "12px",
-            border: "1px solid #e2e8ed",
-            borderRadius: "6px",
-            marginBottom: "12px",
-            marginTop: "12px",
-            display: 'flex',
-            alignItems: 'center',
-            width: "200px"
-        };
        const selectedPlanId = this.state.selectedPlan ? this.state.selectedPlan.id : "";
        return (
-            <div style={planStyle}>
+            <div class="gm-plan">
                <input type="radio" id={id} name="radio-group" value={id} defaultChecked={id === selectedPlanId} />
                <label for={id}>
-                    <span style={{ fontSize: "24px", marginLeft: "9px" }}> {`$${amount}`}</span>
-                    <span style={{ padding: "0px 1px", color: "#77919c" }}> / </span>
-                    <span style={{ color: "#77919c" }}> {`${interval}`}</span>
+                    <span class="gm-amount">{`$${amount}`}</span>
+                    <span class="gm-interval">{`${interval}`}</span>
                </label>
            </div>
        )
@ -88,7 +76,7 @@ export default class StripePaymentPage extends Component {

    renderPlans(plans) {
        return (
-            <div onChange={(e) => this.changePlan(e)}>
+            <div className="gm-plans" onChange={(e) => this.changePlan(e)}>
                {
                    plans.map((plan) => this.renderPlan(plan))
                }
@ -97,22 +85,15 @@ export default class StripePaymentPage extends Component {
    }

    renderPlansSection() {
-        const separatorStyle = {
-            height: "1px",
-            borderTop: "2px solid #e7f0f6",
-            width: "180px",
-            margin: "12px 0"
-        }
        return (
-            <div style={{ padding: "20px", width: "295px", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", background: "#fcfdfd" }}>
-                <div style={{ display: "flex", alignItems: "center" }}>
+            <div className="gm-plans-container">
+                <div className="gm-publication-info">
                    <div className="gm-logo"></div>
-                    <div style={{ display: "flex", flexDirection: "column", paddingLeft: "12px" }}>
-                        <span style={{ fontSize: "16px", fontWeight: "bold" }}> The Blueprint</span>
-                        <span style={{ fontSize: "14px", color: "#9cb2bc", marginTop: "3px" }}> Subscription</span>
+                    <div className="gm-publication-name">
+                        <h2>Expensive Publication</h2>
+                        <span>Subscription</span>
                    </div>
                </div>
-                <div className="separator" style={separatorStyle}> </div>
                {this.renderPlans(this.plans)}
            </div>
        )
@ -121,8 +102,8 @@ export default class StripePaymentPage extends Component {
    render({ error, handleSubmit, stripeConfig }) {
        const publicKey = stripeConfig.config.publicKey || '';
        return (
-            <div style={{ display: "flex" }}>
-                <div style={{ width: "300px", padding: "20px" }}>
+            <div className="flex">
+                <div className="gm-modal-form gm-subscribe-form">
                    <FormHeader title="Subscribe" error={error} errorText="Unable to confirm payment">
                        <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
                    </FormHeader>
@ -132,7 +113,6 @@ export default class StripePaymentPage extends Component {
                        </Elements>
                    </StripeProvider>
                </div>
-                <div style={{ border: "1px solid black" }}></div>
                {this.renderPlansSection()}
            </div>
        )
--- a/core/server/lib/members/static/auth/styles/components.css
+++ b/core/server/lib/members/static/auth/styles/components.css
@ -28,21 +28,21 @@
    position: relative;
    top: 50%;
    transform: translateY(-50%);
+    display: flex;
 }

 .gm-modal {
    position: relative;
    background: white;
    margin: 0 auto;
-    width: 288px;
-    border-radius: 4px;
-    padding: 40px;
+    border-radius: 8px;
    box-shadow: var(--box-shadow-base);
    animation: openModal 0.6s ease 1 forwards;
 }

-.gm-subscribe-modal {
-    width: 600px;
+.gm-modal-form {
+    width: 300px;
+    padding: 48px;
 }

 .gm-modal-close {
@ -163,7 +163,7 @@ button {
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
-    padding: 15px 15px 16px;
+    padding: 13px 16px 14px;
    border-radius: 4px;
    outline: none;
    transition: all var(--animation-speed-f1) ease-in-out;
@ -231,7 +231,7 @@ select:-webkit-autofill:active {
 ::-moz-placeholder,
 :-ms-input-placeholder,
 :-moz-placeholder {
-    color: var(--white);
+    color: var(--grey);
 }

 .gm-form-element {
@ -249,16 +249,16 @@ select:-webkit-autofill:active {
    border: none;
    border-radius: 4px;
    border: 1px solid var(--grey-l1);
-    height: 38px;
    -webkit-appearance: none;
    box-sizing: border-box;
    background: var(--white);
    width: 100%;
    outline: none;
    transition: border var(--animation-speed-f1) ease-in-out;
-    padding: 20px 14px 22px 38px; /* 1px bottom padding fixes jump that's caused by the border change */
+    padding: 12px 14px 12px 38px; /* 1px bottom padding fixes jump that's caused by the border change */
    letter-spacing: 0.2px;
-    line-height: 14px;
+    vertical-align: middle;
+    line-height: 18px;
 }

 .gm-input input:hover {
@ -396,44 +396,4 @@ select:-webkit-autofill:active {

 .gm-form-errortext i {
    margin: 1px 8px 0 0;
-}
-
-/**
- * The CSS shown here will not be introduced in the Quickstart guide, but shows
- * how you can use CSS to style your Element's container.
- */
- .StripeElement {
-    font-size: var(--text-s);
-    color: var(--grey-d3);
-    border: none;
-    border-radius: 4px;
-    border: 1px solid var(--grey-l1);
-    height: 38px;
-    -webkit-appearance: none;
-    box-sizing: border-box;
-    background: var(--white);
-    width: 100%;
-    outline: none;
-    transition: border var(--animation-speed-f1) ease-in-out;
-    letter-spacing: 0.2px;
-    line-height: 14px;
-    padding: 10px 12px;
-  }
-
-  .StripeElement:hover {
-    border: 1px solid var(--grey);
-  }
-
-  .StripeElement--focus {
-    border: 1px solid color-mod(var(--blue) a(0.8));
-    box-shadow: 0 0 6px rgba(62, 176, 239, 0.3), 0 0 0px 40px #FFF inset;
-  }
-
-  .StripeElement--invalid {
-    border: 1px solid color-mod(var(--red) a(0.8));
-    background: color-mod(var(--red) a(0.02))
-  }
-
-  .StripeElement--webkit-autofill {
-    background-color: #fefde5 !important;
-  }
+}
--- a/core/server/lib/members/static/auth/styles/screen.css
+++ b/core/server/lib/members/static/auth/styles/screen.css
@ -55,9 +55,10 @@ a:hover {
 /* Auth Modal */
 /* --------------------------------------------- */
 .gm-logo {
-    width: 52px;
-    height: 52px;
-    border-radius: 4px;
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    flex-shrink: 0;
    margin: 0 auto;
    background: #343F44 url('../assets/images/ghost-logo.svg') center center no-repeat;
 }
@ -67,12 +68,11 @@ a:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    align-items: center;
-    margin: 24px 0 0;
+    margin: 0;
 }

 .gm-auth-header h1 {
-    font-size: var(--text-xl);
+    font-size: var(--text-2xl);
 }

 .gm-auth-header h4,
@ -80,12 +80,12 @@ a:hover {
    font-weight: normal;
    font-size: var(--text-s);
    letter-spacing: 0.4px;
-    /* color: var(--grey-d1); */
 }

 .gm-auth-header a,
 .gm-auth-footer a {
-    display: block;
+    display: flex;
+    align-items: center;
    font-size: var(--text-s);
    letter-spacing: 0.4px;
    padding: 8px;
@ -100,6 +100,27 @@ a:hover {
    color: var(--blue-d3);
 }

+.gm-auth-header a svg {
+    width: 12px;
+    height: 12px;
+    margin: 0 0 0 4px;
+}
+
+.gm-auth-header a svg g,
+.gm-auth-header a svg path {
+    fill: var(--blue);
+    transition: fill var(--animation-speed-f1) ease-in-out;
+}
+
+.gm-auth-header a:hover svg g,
+.gm-auth-header a:hover svg path {
+    fill: var(--blue-d3);
+}
+
+.gm-auth-footer {
+    margin: 24px 0 0;
+}
+
 .gm-forgot-link {
    position: absolute;
    top: 14px;
@ -127,4 +148,130 @@ a:hover {
    h4 {
        display: none;
    }
+}
+
+.gm-subscribe-form {
+    width: 340px;
+}
+
+.gm-plans-container {
+    background: var(--grey-l3);
+    border-left: 1px solid var(--grey-l2);
+    padding: 48px;
+    min-width: 240px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.gm-plans-container .gm-publication-info {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 92px 0 0;
+}
+
+.gm-publication-name {
+    margin: 0 0 0 12px;
+    flex-grow: 1;
+}
+
+.gm-publication-name h2 {
+    padding: 0;
+    margin: 0;
+    font-size: var(--text-l);
+    color: var(--grey-d3);
+    word-wrap: none;
+    white-space: nowrap;
+}
+
+.gm-publication-name span {
+    color: var(--grey-d1);
+    font-size: var(--text-s);
+}
+
+.gm-plans {
+    border: 1px solid var(--grey-l1);
+    border-radius: 8px;
+    margin: 26px 0 0;
+}
+
+.gm-plan {
+    display: flex;
+    align-items: center;
+    padding: 13px 16px;
+    border-bottom: 1px solid var(--grey-l1);
+    margin: 0;
+}
+
+.gm-plan:last-child {
+    border-bottom: none;
+}
+
+.gm-plan input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    margin: 0 8px 0 0;
+}
+
+.gm-plan .gm-amount {
+    font-size: var(--text-xl);
+}
+
+.gm-plan .gm-interval {
+    position: relative;
+    font-size: var(--text-s);
+    color: var(--grey-d1);
+    padding: 0 0 0 9px;
+    margin: 0 0 0 6px;
+}
+
+.gm-plan .gm-interval::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 1px;
+    display: block;
+    width: 1px;
+    height: 18px;
+    background: var(--grey-d1);
+    transform: rotate(25deg);
+}
+
+/**
+ * The CSS shown here will not be introduced in the Quickstart guide, but shows
+ * how you can use CSS to style your Element's container.
+ */
+.StripeElement {
+    font-size: var(--text-s);
+    color: var(--grey-d3);
+    border: none;
+    border-radius: 4px;
+    border: 1px solid var(--grey-l1);
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    background: var(--white);
+    width: 100%;
+    outline: none;
+    transition: border var(--animation-speed-f1) ease-in-out;
+    letter-spacing: 0.2px;
+    line-height: 18px;
+    padding: 14px 12px 14px 10px;
+}
+
+.StripeElement:hover {
+    border: 1px solid var(--grey);
+}
+
+.StripeElement--focus {
+    border: 1px solid color-mod(var(--blue) a(0.8));
+    box-shadow: 0 0 6px rgba(62, 176, 239, 0.3), 0 0 0px 40px #FFF inset;
+}
+
+.StripeElement--invalid {
+    border: 1px solid color-mod(var(--red) a(0.8));
+    background: color-mod(var(--red) a(0.02))
+}
+
+.StripeElement--webkit-autofill {
+    background-color: #fefde5 !important;
 }
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.75 23.25c-.2 0-.389-.078-.53-.22-.292-.292-.292-.768 0-1.061l9.22-9.22H.75C.336 12.75 0 12.414 0 12s.336-.75.75-.75h20.689l-9.22-9.22C12.078 1.889 12 1.7 12 1.5s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.5 10.5c.07.07.125.152.163.245l.01.026c.031.081.047.17.047.259 0 .087-.016.174-.047.258l-.006.016c-.042.104-.098.187-.168.257L13.28 23.03c-.141.142-.33.22-.53.22z"/></svg>`