Applied basic styles to account profile

no refs.

ghost/portal/src/App.js

@@ -61,7 +61,7 @@ export default class App extends React.Component {
         // Loads default page and popup state for local UI testing
         if (process.env.NODE_ENV === 'development') {
             return {
-                page: 'accountHome',
+                page: 'accountProfile',
                 showPopup: true
             };
         }

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

@@ -6,6 +6,8 @@
 import {ActionButtonStyles} from './common/ActionButton';
 import {SwitchStyles} from './common/Switch';
 import {AccountHomePageStyles} from './pages/AccountHomePage';
+import {AccountProfilePageStyles} from './pages/AccountProfilePage';
+import {InputFieldStyles} from './common/InputField';
 
 // Global styles
 export const GlobalStyles = `
@@ -115,6 +117,12 @@ export const GlobalStyles = `
         letter-spacing: 0.2px;
     }
 
+    h3 {
+        font-size: 20px;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+    }
+
     p {
         font-size: 15px;
         line-height: 1.55em;
@@ -146,6 +154,8 @@ export const GlobalStyles = `
 
     .gh-portal-setting-heading {
         font-size: 13px;
+        margin-bottom: 4px;
+        font-weight: 500;
     }
 
     /* Buttons
@@ -216,12 +226,37 @@ export const GlobalStyles = `
     .gh-portal-section {
         margin-bottom: 32px;
     }
+
+    .gh-portal-section.form {
+        margin-bottom: 20px;
+    }
+
+    .gh-portal-detail-header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0 20px;
+    }
+
+    .gh-portal-detail-header .gh-portal-btn-back,
+    .gh-portal-detail-header .gh-portal-btn-back:hover {        
+        position: absolute;
+        top: -8px;
+        left: 0;
+        background: none;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+    }
 `;
 
 // Append all styles as string which we want to pass to iframe
 const FrameStyle = 
     GlobalStyles +
     AccountHomePageStyles +
+    AccountProfilePageStyles +
+    InputFieldStyles +
     SwitchStyles + 
     ActionButtonStyles;
 

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

@@ -6,6 +6,11 @@ export const ActionButtonStyles = `
         width: 100%;
         box-shadow: none;
     }
+
+    .gh-portal-btn-main:hover {
+        box-shadow: none;
+    }
+
     .gh-portal-btn-primary:hover::before {
         position: absolute;
         content: "";

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

@@ -1,47 +1,36 @@
 import React from 'react';
 
-const Styles = ({disabled, style = {}} = {}) => {
-    return {
-        input: {
-            display: 'block',
-            padding: '0 .6em',
-            width: '100%',
-            height: '44px',
-            outline: '0',
-            border: '1px solid #c5d2d9',
-            color: 'inherit',
-            textDecoration: 'none',
-            background: disabled ? '#ececec' : '#fff',
-            borderRadius: '9px',
-            fontSize: '14px',
-            marginBottom: '12px',
-            boxSizing: 'border-box',
-            ...(style.input || {}) // Override any custom style
-        },
-        label: {
-            marginBottom: '3px',
-            fontSize: '12px',
-            fontWeight: '700',
-            ...(style.label || {}) // Override any custom style
-        }
-    };
-};
+export const InputFieldStyles = `
+    .gh-portal-input {
+        display: block;
+        padding: 0 12px;
+        width: 100%;
+        height: 40px;
+        outline: none;
+        border: 1px solid #ddd;
+        color: inherit;
+        background: #fff;
+        border-radius: 5px;
+        font-size: 1.5rem;
+        margin-bottom: 12px;
+        box-sizing: border-box;
+    }
+`;
 
 function InputField({name, id, label, type, value, placeholder, disabled, onChange, style}) {
-    const Style = Styles({disabled, style});
     id = id || `input-${name}`;
     return (
         <>
-            <label htmlFor={id} style={Style.label}> {label} </label>
+            <label htmlFor={id} className='gh-portal-setting-heading'> {label} </label>
             <input
                 id={id}
                 type={type}
                 name={name}
                 placeholder={placeholder}
                 value={value}
+                className='gh-portal-input'
                 disabled={disabled}
                 onChange={e => onChange(e, name)}
-                style={Style.input}
                 aria-label={label}
             />
         </>

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

@@ -7,6 +7,8 @@ import isPreviewMode from '../../utils/is-preview-mode';
 
 const React = require('react');
 
+export const AccountProfilePageStyles = ``;
+
 export default class AccountProfilePage extends React.Component {
     static contextType = AppContext;
 
@@ -75,7 +77,7 @@ export default class AccountProfilePage extends React.Component {
 
     renderAccountFooter() {
         return (
-            <div style={{display: 'flex', padding: '0 24px', marginTop: '12px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px', alignItems: 'center'}}>
+            <div>
                 <div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
                     {this.renderSaveButton()}
                 </div>
@@ -85,9 +87,9 @@ export default class AccountProfilePage extends React.Component {
 
     renderHeader() {
         return (
-            <div style={{display: 'flex', padding: '0 24px'}}>
-                <div style={{color: this.context.brandColor, cursor: 'pointer'}} role="button" onClick={e => this.onBack(e)}> &lt; Back </div>
-                <div style={{flexGrow: 1, fontWeight: 'bold', display: 'flex', justifyContent: 'center'}}> Account Settings </div>
+            <div className='gh-portal-detail-header'>
+                <button className='gh-portal-btn gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}>Back</button>
+                <h3 className='gh-portal-maiin-title'>Account settings</h3>
             </div>
         );
     }
@@ -150,7 +152,7 @@ export default class AccountProfilePage extends React.Component {
 
     renderProfileData() {
         return (
-            <div style={{padding: '0 24px', marginTop: '24px'}}>
+            <div className='gh-portal-section form'>
                 {this.renderInputField('name')}
                 {this.renderInputField('email')}
             </div>
@@ -168,7 +170,7 @@ 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 style={{padding: '0 24px', display: 'flex', alignItems: 'center', marginBottom: '20px'}}>
+            <div>
                 <div style={{flexGrow: 1}}>
                     <div style={{
                         marginBottom: '3px',