From 45c6dd3b8bb1e5c1901a674da0dfa7d2985013dd Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Mon, 20 Jul 2020 17:33:10 +0200 Subject: [PATCH] Updated paid account styles no refs. - added basic styling to paid account settings styles --- ghost/portal/src/App.js | 2 +- ghost/portal/src/components/Frame.styles.js | 52 +++++++- .../src/components/common/ActionButton.js | 47 +++---- .../src/components/pages/AccountHomePage.js | 119 +++++++++++------- 4 files changed, 144 insertions(+), 76 deletions(-) diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index c377a01f35..c07a02cc3e 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -173,7 +173,7 @@ export default class App extends React.Component { } return null; } else if (process.env.NODE_ENV === 'development') { - return member || Fixtures.member.free; + return member || Fixtures.member.paid; } return member; } diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index a236f519f4..5abf74ab45 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -79,11 +79,28 @@ export const GlobalStyles = ` .fixed { position: fixed; } .sticky { position: sticky; } + .ma0 { margin: 0; } + .mt0 { margin-top: 0; } + .mr0 { margin-right: 0; } + .mb0 { margin-bottom: 0; } + .ml0 { margin-left: 0; } + .mh0 { margin-left: 0; margin-right: 0; } + .mv0 { margin-top: 0; margin-bottom: 0; } + + .pa0 { padding: 0; } + .pt0 { padding-top: 0; } + .pr0 { padding-right: 0; } + .pb0 { padding-bottom: 0; } + .pl0 { padding-left: 0; } + .ph0 { padding-left: 0; padding-right: 0; } + .pv0 { padding-top: 0; padding-bottom: 0; } + /* Typography /* ----------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; + line-height: 1.15em; } h1 { @@ -127,6 +144,39 @@ export const GlobalStyles = ` text-align: center; } + .gh-portal-setting-heading { + font-size: 13px; + } + + /* Buttons + /* ----------------------------------------------------- */ + .gh-portal-btn { + position: relative; + display: inline-block; + padding: 0 1.8rem; + height: 44px; + border: none; + font-size: 1.5rem; + line-height: 1em; + font-weight: 500; + letter-spacing: 0.2px; + text-align: center; + text-decoration: none; + white-space: nowrap; + border-radius: 5px; + cursor: pointer; + transition: .4s ease; + box-shadow: none; + user-select: none; + background: #fff; + box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19); + color: #212121; + } + + .gh-portal-btn:hover { + box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px -3px rgba(0,0,0,0.19); + } + /* Global layout styles /* ----------------------------------------------------- */ .gh-portal-popup-container { @@ -170,8 +220,8 @@ export const GlobalStyles = ` // Append all styles as string which we want to pass to iframe const FrameStyle = - AccountHomePageStyles + GlobalStyles + + AccountHomePageStyles + SwitchStyles + ActionButtonStyles; diff --git a/ghost/portal/src/components/common/ActionButton.js b/ghost/portal/src/components/common/ActionButton.js index 16d922cc63..059a1aa34f 100644 --- a/ghost/portal/src/components/common/ActionButton.js +++ b/ghost/portal/src/components/common/ActionButton.js @@ -2,37 +2,20 @@ import React from 'react'; import getContrastColor from '../../utils/contrast-color'; export const ActionButtonStyles = ` -.gh-portal-btn { - position: relative; - display: inline-block; - padding: 0 1.8rem; - height: 44px; - border: 0; - font-size: 1.5rem; - line-height: 42px; - font-weight: 500; - letter-spacing: 0.2px; - text-align: center; - text-decoration: none; - white-space: nowrap; - border-radius: 5px; - cursor: pointer; - transition: .4s ease; - box-shadow: none; - user-select: none; - width: 100%; -} - -.gh-portal-btn:hover::before { - position: absolute; - content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.08); - border-radius: 5px; -} + .gh-portal-btn-main { + width: 100%; + box-shadow: none; + } + .gh-portal-btn-primary:hover::before { + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.08); + border-radius: 5px; + } `; const Styles = ({brandColor, retry, disabled, style = {}}) => { @@ -57,7 +40,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => { function ActionButton({label, onClick, disabled, retry, brandColor, style}) { let Style = Styles({disabled, retry, brandColor, style}); return ( - ); diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js index e9b9e27c7f..8bc788ccb0 100644 --- a/ghost/portal/src/components/pages/AccountHomePage.js +++ b/ghost/portal/src/components/pages/AccountHomePage.js @@ -19,6 +19,10 @@ export const AccountHomePageStyles = ` margin-top: -16px; } + .gh-portal-account-footer.paid { + margin-top: 12px; + } + .gh-portal-account-footermenu { display: flex; list-style: none; @@ -34,6 +38,44 @@ export const AccountHomePageStyles = ` margin-right: 0; } + .gh-portal-accountdetail-section { + display: flex; + align-items: center; + margin-bottom: 32px; + } + + .gh-portal-accountdetail-section:first-of-type { + margin-top: 24px; + margin-bottom: 26px; + } + + .gh-portal-account-divider { + margin: 12px -32px; + border: none; + border-bottom: 1px solid #EDEDED; + } + + .gh-portal-account-divider:last-of-type { + margin-bottom: 40px; + } + + .gh-portal-btn-accountdetail { + height: 36px; + font-size: 1.3rem; + width: 88px; + padding: 0 12px; + } + + .gh-portal-accountdetail-data { + color: #656565; + line-height: 1em; + margin-top: 4px; + } + + .gh-portal-accountdetail-data.small { + font-size: 1.3rem; + } + /* Avatar styles */ .gh-portal-avatar-container { position: relative; @@ -51,7 +93,7 @@ export const AccountHomePageStyles = ` const Divider = () => { return ( -
+
); }; @@ -167,7 +209,7 @@ class PaidAccountHomePage extends React.Component { return (
-

+

Hey {firstname || name || email}! You have an active {siteTitle} account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.

@@ -212,10 +254,6 @@ class PaidAccountHomePage extends React.Component { } renderAccountDetails() { - const buttonStyle = { - padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center', - borderRadius: '5px', cursor: 'pointer' - }; const {name, email, subscriptions, subscribed} = this.context.member; const { @@ -224,46 +262,43 @@ class PaidAccountHomePage extends React.Component { } = subscriptions[0]; return ( -
-
-
-
Profile
-
-
{name}
-
{email}
+
+
+
+

Profile

+
+
{name}
+
{email}
-
this.openEditProfile(e)}> - Edit -
-
-
-
-
Plan
-
-
{this.getPlanLabel(plan)}
+ + + +
+
+

Plan

+
+
{this.getPlanLabel(plan)}
-
this.openUpdatePlan(e)}> - Change -
-
-
-
-
Billing Info
-
-
{this.getCardLabel({defaultCardLast4})}
+ + + +
+
+

Billing Info

+
+
{this.getCardLabel({defaultCardLast4})}
-
this.onEditBilling(e)}> - Update -
-
-
-
-
Newsletter
-
-
You are subscribed to email newsletters
+ + + +
+
+

Newsletter

+
+
You are subscribed to email newsletters
@@ -271,7 +306,7 @@ class PaidAccountHomePage extends React.Component { this.onToggleSubscription(e, subscribed); }} checked={subscribed} />
-
+
); } @@ -279,7 +314,7 @@ class PaidAccountHomePage extends React.Component { render() { const {member, brandColor} = this.context; return ( -
+
{this.renderAccountWelcome()}