Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Added icon to 'Back' button

Browse source
This commit is contained in:
Peter Zimon 2020-07-21 11:26:39 +02:00
parent e7459437cb
commit 2449991847
4 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ghost/portal/src/components/Frame.styles.js
View file

@ -161,7 +161,9 @@ export const GlobalStyles = `
/* ----------------------------------------------------- */
.gh-portal-btn {
position: relative;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1.8rem;
height: 44px;
border: none;
@ -186,6 +188,17 @@ export const GlobalStyles = `
box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px -3px rgba(0,0,0,0.19);
}
.gh-portal-btn-icon svg {
width: 16px;
height: 16px;
margin-right: 4px;
stroke: currentColor;
}
.gh-portal-btn-icon svg path {
stroke: currentColor;
}
/* Global layout styles
/* ----------------------------------------------------- */
.gh-portal-popup-container {

3
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -2,6 +2,7 @@ import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton';
import PlansSection from '../common/PlansSection';
import isPreviewMode from '../../utils/is-preview-mode';
import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
const React = require('react');
@ -38,7 +39,7 @@ export default class AccountPlanPage extends React.Component {
renderHeader() {
return (
<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>
<button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button>
<h3 className='gh-portal-maiin-title'>Choose plan</h3>
</div>
);

3
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -4,6 +4,7 @@ import ActionButton from '../common/ActionButton';
import InputField from '../common/InputField';
import Switch from '../common/Switch';
import isPreviewMode from '../../utils/is-preview-mode';
import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
const React = require('react');
@ -86,7 +87,7 @@ export default class AccountProfilePage extends React.Component {
renderHeader() {
return (
<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>
<button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button>
<h3 className='gh-portal-maiin-title'>Account settings</h3>
</div>
);

1
ghost/portal/src/images/icons/arrow-left.svg Normal file
View file

@ -0,0 +1 @@
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;fill-rule:evenodd;}</style></defs><title>arrow-left-1</title><path class="cls-1" d="M16.25,23.25,5.53,12.53a.749.749,0,0,1,0-1.06L16.25.75"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 332 B