Fixed switch UI bugs

no refs.
- fixed switch basic styles
- applied brandcolor to switch ON style
- fixed account page layout bug

ghost/portal/src/App.js

@@ -142,8 +142,8 @@ export default class App extends React.Component {
             return {
                 showPopup: true,
                 site: Fixtures.site,
-                member: Fixtures.member.free,
-                page: 'signup'
+                member: Fixtures.member.paid,
+                page: 'accountHome'
             };
         }
         return {};

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

@@ -30,8 +30,8 @@ export const SwitchStyles = `
         left: 0;
         right: 0;
         bottom: 0;
-        background: #e5eff5;
-        border: 1px solid #dae8f1;
+        background: #f4f4f4;
+        border: 1px solid #e4e4e4;
         transition: .3s;
         width: 50px !important;
         height: 28px !important;
@@ -47,23 +47,24 @@ export const SwitchStyles = `
     .gh-portal-for-switch .input-toggle-component:before {
         position: absolute;
         content: "";
-        height: 22px !important;
-        width: 22px !important;
+        height: 24px !important;
+        width: 24px !important;
         left: 2px !important;
         top: 2px !important;
         background-color: white;
         transition: .3s;
-        box-shadow: 0 0 1px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.2);
+        box-shadow: 0 0 1px rgba(0,0,0,.3), 0 4px 6px rgba(0,0,0,.1);
         border-radius: 999px;
     }
 
     .gh-portal-for-switch input:checked + .input-toggle-component {
-        background: #a4d037;
+        background: var(--brandcolor);
         border-color: transparent;
     }
 
     .gh-portal-for-switch input:checked + .input-toggle-component:before {
         transform: translateX(22px);
+        box-shadow: none;
     }
 
     .gh-portal-for-switch .container {

ghost/portal/src/components/pages/AccountHomePage.js

@@ -67,7 +67,7 @@ export const AccountHomePageStyles = `
 
     .gh-portal-accountdetail-data {
         line-height: 1em;
-        margin-top: 4px;
+        margin-top: 2px;
         color: #777;
     }
 
@@ -281,9 +281,7 @@ class PaidAccountHomePage extends React.Component {
                 <section className='gh-portal-accountdetail-section'>
                     <div className='flex flex-column flex-grow-1'>
                         <h3 className='gh-portal-setting-heading paid-home'>Plan</h3>
-                        <div>
-                            <div className='gh-portal-accountdetail-data'>{this.getPlanLabel(plan)}</div>
-                        </div>
+                        <div className='gh-portal-accountdetail-data'>{this.getPlanLabel(plan)}</div>
                     </div>
                     <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openUpdatePlan(e)}>Change</button>
                 </section>
@@ -291,9 +289,7 @@ class PaidAccountHomePage extends React.Component {
                 <section className='gh-portal-accountdetail-section'>
                     <div className='flex flex-column flex-grow-1'>
                         <h3 className='gh-portal-setting-heading paid-home'>Billing Info</h3>
-                        <div>
-                            <div className='gh-portal-accountdetail-data'>{this.getCardLabel({defaultCardLast4})}</div>
-                        </div>
+                        <div className='gh-portal-accountdetail-data'>{this.getCardLabel({defaultCardLast4})}</div>
                     </div>
                     <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.onEditBilling(e)}>Update</button>
                 </section>
@@ -301,9 +297,7 @@ class PaidAccountHomePage extends React.Component {
                 <section className='gh-portal-accountdetail-section'>
                     <div className='flex flex-column flex-grow-1'>
                         <h3 className='gh-portal-setting-heading paid-home'>Newsletter</h3>
-                        <div>
-                            <div className='gh-portal-accountdetail-data'>You are subscribed to email newsletters</div>
-                        </div>
+                        <div className='gh-portal-accountdetail-data'>You are subscribed to email newsletters</div>
                     </div>
                     <div>
                         <Switch onToggle={(e) => {

ghost/portal/src/components/pages/AccountProfilePage.js

@@ -152,7 +152,7 @@ export default class AccountProfilePage extends React.Component {
 
     renderProfileData() {
         return (
-            <div className='gh-portal-section form'>
+            <div>
                 {this.renderInputField('name')}
                 {this.renderInputField('email')}
             </div>
@@ -170,18 +170,10 @@ export default class AccountProfilePage extends React.Component {
         }
         const label = subscribed ? 'You are subscribed to email newsletters' : 'You are not subscribed to email newsletters';
         return (
-            <div>
-                <div style={{flexGrow: 1}}>
-                    <div style={{
-                        marginBottom: '3px',
-                        fontSize: '12px',
-                        fontWeight: '700'
-                    }}> Newsletter </div>
-                    <div style={{
-                        color: '#666666',
-                        fontSize: '13px',
-                        lineHeight: '6px'
-                    }}> {label} </div>
+            <div className='flex items-center justify-between' style={{marginTop: '24px'}}>
+                <div className='flex flex-column flex-grow-1'>
+                    <h3 className='gh-portal-setting-heading paid-home'>Newsletter</h3>
+                    <div className='gh-portal-accountdetail-data'>{label}</div>
                 </div>
                 <div>
                     <Switch onToggle={(e) => {
@@ -198,10 +190,12 @@ export default class AccountProfilePage extends React.Component {
             return null;
         }
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
+            <div>
                 {this.renderHeader()}
-                {this.renderProfileData()}
-                {this.renderNewsletterOption()}
+                <div className='gh-portal-section form'>
+                    {this.renderProfileData()}
+                    {this.renderNewsletterOption()}
+                </div>
                 {this.renderAccountFooter()}
             </div>
         );