From 5484d5e2d887fa0bfc6226049445edf6805f6608 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 24 Jul 2020 10:46:13 +0200
Subject: [PATCH] Cleaned up style attributes

---
 ghost/portal/src/App.js                       |  2 +-
 .../src/components/common/MemberGravatar.js   | 32 +++++++++----------
 .../src/components/pages/AccountHomePage.js   |  1 +
 .../src/components/pages/AccountPlanPage.js   |  2 +-
 .../components/pages/AccountProfilePage.js    |  6 ++--
 5 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 8e63a19fca..333e8c4364 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -143,7 +143,7 @@ export default class App extends React.Component {
                 showPopup: true,
                 site: Fixtures.site,
                 member: Fixtures.member.free,
-                page: 'signup'
+                page: 'accountPlan'
             };
         }
         return {};
diff --git a/ghost/portal/src/components/common/MemberGravatar.js b/ghost/portal/src/components/common/MemberGravatar.js
index 94ee088cec..10958e5dc8 100644
--- a/ghost/portal/src/components/common/MemberGravatar.js
+++ b/ghost/portal/src/components/common/MemberGravatar.js
@@ -11,29 +11,29 @@ export const AvatarStyles = `
         margin-bottom: 8px;
         border-radius: 999px;
     }
+
+    .gh-portal-avatar img {
+        display: block;
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        opacity: 1;
+        maxWidth: unset;
+    }
 `;
 
 const Styles = ({style = {}}) => {
     return {
         userIcon: {
-            width: '20px',
-            height: '20px',
+            width: '56px',
+            height: '56px',
             color: '#fff',
             ...(style.userIcon || {}) // Override any custom style
         },
-        gravatar: {
-            display: 'block',
-            position: 'absolute',
-            top: '-1px',
-            right: '-1px',
-            bottom: '-1px',
-            left: '-1px',
-            width: 'calc(100% + 2px)',
-            height: 'calc(100% + 2px)',
-            opacity: '1',
-            maxWidth: 'unset',
-            ...(style.gravatar || {}) // Override any custom style
-        }
     };
 };
 
@@ -42,7 +42,7 @@ function MemberGravatar({gravatar, style}) {
     return (
         <figure className='gh-portal-avatar'>
             <UserIcon style={Style.userIcon} />
-            {gravatar ? <img style={Style.gravatar} src={gravatar} alt="Gravatar" /> : null}
+            {gravatar ? <img src={gravatar} alt="Gravatar" /> : null}
         </figure>
     );
 }
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 5470dcf10c..38a77c9d05 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -55,6 +55,7 @@ export const AccountHomePageStyles = `
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-top: 24px;
     }
 
     .gh-portal-freeaccount-newsletter .label {
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 5ac37e1c93..0090a2e89f 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -128,7 +128,7 @@ export default class AccountPlanPage extends React.Component {
             return null;
         }
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
+            <div>
                 {this.renderHeader()}
                 {this.renderPlanChooser()}
             </div>
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index 517e88cf43..ef662b7e5e 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -68,7 +68,7 @@ export default class AccountProfilePage extends React.Component {
 
     renderDeleteAccountButton() {
         return (
-            <div style={{cursor: 'pointer', color: 'red'}} role='button'> Delete Account </div>
+            <div style={{cursor: 'pointer', color: 'red'}} role='button'>Delete account</div>
         );
     }
 
@@ -108,7 +108,7 @@ export default class AccountProfilePage extends React.Component {
 
         return (
             <div style={avatarContainerStyle}>
-                <MemberAvatar gravatar={avatarImg} style={{userIcon: {color: 'black', width: '45px', height: '45px'}}} />
+                <MemberAvatar gravatar={avatarImg} style={{userIcon: {color: 'black', width: '56px', height: '56px'}}} />
             </div>
         );
     }
@@ -167,7 +167,7 @@ export default class AccountProfilePage extends React.Component {
         }
         const label = subscribed ? 'Subscribed to email newsletters' : 'Not subscribed to email newsletters';
         return (
-            <div className='gh-portal-freeaccount-newsletter' style={{marginTop: '24px'}}>
+            <div className='gh-portal-freeaccount-newsletter'>
                 <div className='label'>
                     <h3 className='gh-portal-input-label'>Newsletter</h3>
                     <div className='gh-portal-setting-data'>{label}</div>