mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Added new default button icons
This commit is contained in:
Peter Zimon
parent
4b29d0ce15
commit
32149a5d48
9 changed files with 38 additions and 16 deletions
|
|
@ -142,7 +142,7 @@ export default class App extends React.Component {
|
|||
return {
|
||||
showPopup: true,
|
||||
site: Fixtures.site,
|
||||
member: Fixtures.member.free,
|
||||
member: Fixtures.member.paid,
|
||||
page: 'signup'
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@ const Styles = ({brandColor, hasText}) => {
|
|||
overflow: 'hidden'
|
||||
},
|
||||
userIcon: {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
width: '26px',
|
||||
height: '26px',
|
||||
color: invertColor
|
||||
},
|
||||
closeIcon: {
|
||||
|
|
@ -173,7 +173,7 @@ class TriggerButtonContent extends React.Component {
|
|||
const textColor = getContrastColor(brandColor);
|
||||
if (this.hasText()) {
|
||||
return (
|
||||
<span style={{padding: '0 12px', color: textColor}}> {buttonText} </span>
|
||||
<span style={{padding: '0 8px', color: textColor}}> {buttonText} </span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
|
@ -189,7 +189,7 @@ class TriggerButtonContent extends React.Component {
|
|||
if (hasText) {
|
||||
return (
|
||||
<div style={Style.button} onClick={e => this.onToggle(e)}>
|
||||
<div style={{padding: '0 24px', display: 'flex', alignItems: 'center'}} ref={this.container}>
|
||||
<div style={{padding: '0 16px 0 20px', display: 'flex', alignItems: 'center'}} ref={this.container}>
|
||||
{this.renderTriggerIcon()}
|
||||
{this.renderText()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,15 +22,37 @@ export const AvatarStyles = `
|
|||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
opacity: 1;
|
||||
maxWidth: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
const Styles = ({style = {}}) => {
|
||||
return {
|
||||
avatarContainer: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '999px',
|
||||
...(style.avatarContainer || {}) // Override any custom style
|
||||
},
|
||||
gravatar: {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
top: '-1px',
|
||||
right: '-1px',
|
||||
bottom: '-1px',
|
||||
left: '-1px',
|
||||
width: 'calc(100% + 2px)',
|
||||
height: 'calc(100% + 2px)',
|
||||
opacity: '1',
|
||||
maxWidth: 'unset',
|
||||
...(style.avatarContainer || {}) // Override any custom style
|
||||
},
|
||||
userIcon: {
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
width: '34px',
|
||||
height: '34px',
|
||||
color: '#fff',
|
||||
...(style.userIcon || {}) // Override any custom style
|
||||
}
|
||||
|
|
@ -40,9 +62,9 @@ const Styles = ({style = {}}) => {
|
|||
function MemberGravatar({gravatar, style}) {
|
||||
let Style = Styles({style});
|
||||
return (
|
||||
<figure className='gh-portal-avatar'>
|
||||
<figure className='gh-portal-avatar' style={Style.avatarContainer}>
|
||||
<UserIcon style={Style.userIcon} />
|
||||
{gravatar ? <img src={gravatar} alt="Gravatar" /> : null}
|
||||
{gravatar ? <img style={Style.gravatar} src={gravatar} alt="Gravatar" /> : null}
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M12 15.75c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6zm0-10.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z"/><path d="M12 24c-2.677 0-5.211-.868-7.332-2.51-.021-.012-.066-.038-.11-.082l-.016-.017C1.655 19.094 0 15.674 0 12 0 5.383 5.383 0 12 0s12 5.383 12 12c0 3.674-1.655 7.094-4.543 9.391l-.015.016c-.043.043-.087.069-.112.084C17.211 23.132 14.677 24 12 24zm-5.716-3.199C7.99 21.914 9.956 22.5 12 22.5c2.045 0 4.011-.586 5.717-1.699-1.604-1.322-3.616-2.045-5.716-2.045-2.1-.001-4.112.723-5.717 2.045zM12 1.5C6.21 1.5 1.5 6.21 1.5 12c0 3.023 1.294 5.875 3.562 7.874 1.915-1.69 4.366-2.617 6.938-2.617 2.573 0 5.023.927 6.938 2.616 2.268-2 3.562-4.851 3.562-7.874C22.5 6.21 17.79 1.5 12 1.5z"/></svg>
|
||||
<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.2px;}</style></defs><title>single-neutral</title><circle class="cls-1" cx="12" cy="6" r="5.25"/><path class="cls-1" d="M2.25,23.25a9.75,9.75,0,0,1,19.5,0"/></svg>
|
||||
|
Before Width: | Height: | Size: 837 B After Width: | Height: | Size: 343 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M18.75 24c-1.067 0-2.061-.582-2.594-1.5h-6.062C9.561 23.418 8.567 24 7.5 24s-2.061-.582-2.594-1.5H2.25C1.009 22.5 0 21.491 0 20.25V15.8c.002-.753.376-1.452 1.002-1.869l1.316-.877.41-2.299c.003-.016.006-.033.011-.05C2.989 9.701 3.887 9 4.921 9h2.708c.313-.885 1.161-1.5 2.121-1.5h1.5c0-1.654 1.346-3 3-3s3 1.346 3 3h4.5C22.991 7.5 24 8.509 24 9.75v10.5c0 1.241-1.009 2.25-2.25 2.25h-.406c-.533.918-1.527 1.5-2.594 1.5zm0-4.5c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5zm-11.25 0c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5S9 21.827 9 21s-.673-1.5-1.5-1.5zM21.75 21c.414 0 .75-.336.75-.75V9.75c0-.414-.336-.75-.75-.75h-12c-.414 0-.75.336-.75.75v8.656c.918.533 1.5 1.527 1.5 2.594h5.25c0-1.654 1.346-3 3-3s3 1.346 3 3zM3.738 13.632c-.036.2-.153.38-.323.492l-1.582 1.055c-.209.139-.333.372-.334.623v4.448c.001.414.337.75.751.75H4.5c0-1.654 1.346-3 3-3v-7.5H4.921c-.337 0-.632.224-.722.547l-.461 2.585zM15.75 7.5c0-.827-.673-1.5-1.5-1.5s-1.5.673-1.5 1.5h3z"/><path d="M15.75 17.25c-.414 0-.75-.336-.75-.75V15h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75H15V12c0-.414.336-.75.75-.75s.75.336.75.75v1.5H18c.414 0 .75.336.75.75s-.336.75-.75.75h-1.5v1.5c0 .414-.336.75-.75.75zM14.25 3c-.414 0-.75-.336-.75-.75V.75c0-.414.336-.75.75-.75s.75.336.75.75v1.5c0 .414-.336.75-.75.75zM18 4.5c-.115 0-.231-.027-.334-.079-.37-.185-.521-.636-.336-1.006l.75-1.5c.127-.256.384-.415.67-.415.115 0 .231.027.334.079.37.185.521.636.336 1.006l-.75 1.5c-.127.256-.384.415-.67.415zM10.5 4.5c-.286 0-.543-.159-.671-.414l-.75-1.5c-.185-.37-.034-.821.335-1.006.105-.053.22-.08.336-.08.286 0 .543.159.671.415l.75 1.5c.185.37.034.821-.335 1.006-.105.052-.22.079-.336.079z"/></svg>
|
||||
<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.2px;}</style></defs><title>single-neutral-actions-edit-1</title><path class="cls-1" d="M22.63,14.869,15,22.5l-3.75.75L12,19.5l7.63-7.631a2.116,2.116,0,0,1,2.992,0l.008.009A2.113,2.113,0,0,1,22.63,14.869Z"/><circle class="cls-1" cx="7.5" cy="4.875" r="4.125"/><path class="cls-1" d="M13.338,13.919A6.729,6.729,0,0,0,.75,17.25"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 514 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M11.962 22.112c-.251-.002-.511-.048-.758-.137-1.531-.604-3.129-.906-4.771-.906-1.181 0-2.35.16-3.474.475-.187.048-.373.072-.595.078-.64-.001-1.231-.247-1.676-.692-.445-.447-.689-1.039-.688-1.668V4.929c.002-1.031.663-1.932 1.644-2.243 1.521-.525 3.121-.792 4.746-.792 1.837 0 3.634.339 5.342 1.008.047.017.11.029.186.035.026-.003.054-.004.082-.004.028 0 .055.002.082.005.079-.007.147-.021.208-.043 1.69-.663 3.482-1.001 5.316-1.001 1.628 0 3.232.268 4.768.798.967.307 1.624 1.206 1.626 2.235v14.336c0 .198-.025.396-.074.588-.156.609-.541 1.122-1.082 1.443-.365.216-.779.329-1.198.329-.197 0-.395-.025-.589-.074-1.136-.318-2.308-.478-3.491-.478-1.641 0-3.239.302-4.747.897-.256.093-.514.14-.777.145l-.041.002-.039-.003zM6.43 19.569c1.659 0 3.277.276 4.82.822V4.322l-.045-.016C9.657 3.7 8.04 3.395 6.389 3.395c-1.459 0-2.897.241-4.274.715-.371.117-.614.446-.615.82v14.332c0 .23.089.445.25.607.161.162.377.252.606.252.068 0 .149-.01.214-.027 1.242-.347 2.544-.525 3.86-.525zm6.32.822c1.534-.545 3.154-.822 4.816-.822 1.319 0 2.624.178 3.879.53.059.015.129.024.198.024.152 0 .302-.042.436-.121.197-.117.337-.303.393-.525.018-.07.027-.142.027-.213V4.929c-.001-.373-.241-.7-.597-.813-1.391-.479-2.834-.721-4.296-.721-1.647 0-3.259.304-4.789.904l-.067.023v16.069z"/></svg>
|
||||
<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.2px;}</style></defs><title>single-neutral-id-card-3</title><path class="cls-1" d="M9.75,5.25H2.25a1.5,1.5,0,0,0-1.5,1.5v13.5a1.5,1.5,0,0,0,1.5,1.5h19.5a1.5,1.5,0,0,0,1.5-1.5V6.75a1.5,1.5,0,0,0-1.5-1.5h-7.5"/><path class="cls-1" d="M14.25,4.5a2.25,2.25,0,0,0-4.5,0v3a.75.75,0,0,0,.75.75h3a.75.75,0,0,0,.75-.75Z"/><circle class="cls-1" cx="8.25" cy="13.875" r="2.625"/><path class="cls-1" d="M3.75,21.75a4.5,4.5,0,0,1,9,0Z"/><line class="cls-1" x1="14.25" y1="12.75" x2="18.75" y2="12.75"/><line class="cls-1" x1="14.25" y1="15.75" x2="20.25" y2="15.75"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 740 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M3.75 24c-1.241 0-2.25-1.009-2.25-2.25v-9c0-.414.336-.75.75-.75s.75.336.75.75v9c0 .414.336.75.75.75H12v-6c0-2.068 1.682-3.75 3.75-3.75s3.75 1.682 3.75 3.75v6h.75c.414 0 .75-.336.75-.75v-9c0-.414.336-.75.75-.75s.75.336.75.75v9c0 1.241-1.009 2.25-2.25 2.25H3.75zM18 22.5v-6c0-1.241-1.009-2.25-2.25-2.25s-2.25 1.009-2.25 2.25v6H18zM21 10.5c-.863 0-1.685-.38-2.25-1.018-.565.638-1.387 1.018-2.25 1.018s-1.685-.38-2.25-1.018c-.565.638-1.387 1.018-2.25 1.018s-1.685-.38-2.25-1.018C9.185 10.12 8.363 10.5 7.5 10.5s-1.685-.38-2.25-1.018C4.685 10.12 3.863 10.5 3 10.5c-1.654 0-3-1.346-3-3 0-.054.006-.108.018-.162l1.369-6.164C1.542.483 2.144 0 2.852 0h18.295c.698 0 1.314.494 1.465 1.175l1.37 6.162c.012.052.018.107.018.163 0 1.654-1.346 3-3 3zm-2.25-3.75c.414 0 .75.336.75.75 0 .827.673 1.5 1.5 1.5.796 0 1.459-.636 1.498-1.426L21.148 1.5H2.852l-1.35 6.074C1.541 8.364 2.204 9 3 9c.827 0 1.5-.673 1.5-1.5 0-.414.336-.75.75-.75s.75.336.75.75C6 8.327 6.673 9 7.5 9S9 8.327 9 7.5c0-.414.336-.75.75-.75s.75.336.75.75c0 .827.673 1.5 1.5 1.5s1.5-.673 1.5-1.5c0-.414.336-.75.75-.75s.75.336.75.75c0 .827.673 1.5 1.5 1.5S18 8.327 18 7.5c0-.414.336-.75.75-.75z"/><path d="M6 21c-.827 0-1.5-.673-1.5-1.5v-3c0-.827.673-1.5 1.5-1.5h3c.827 0 1.5.673 1.5 1.5v3c0 .827-.673 1.5-1.5 1.5H6zm0-1.5h3v-3H6v3z"/><circle cx="16.125" cy="18.375" r="1.125"/></svg>
|
||||
<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.2px;}</style></defs><title>single-neutral-actions-add</title><circle class="cls-1" cx="17.25" cy="17.25" r="6"/><line class="cls-1" x1="17.25" y1="14.25" x2="17.25" y2="20.25"/><line class="cls-1" x1="14.25" y1="17.25" x2="20.25" y2="17.25"/><path class="cls-1" d="M.75,17.25a6.753,6.753,0,0,1,9.4-6.208"/><circle class="cls-1" cx="7.5" cy="4.875" r="4.125"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 546 B |
|
|
@ -1 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill=currentColor><title>gift</title><g fill=currentColor fill-rule="nonzero"><path d="M12 21.488H4v-10.75c0-.414-.336-.75-.75-.75s-.75.336-.75.75v10.75c0 .914.586 1.5 1.5 1.5h8c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"/><path d="M12.25 21.488h8v-10.75c0-.414.336-.75.75-.75s.75.336.75.75v10.75c0 .914-.586 1.5-1.5 1.5h-8c-.414 0-.75-.336-.75-.75s.336-.75.75-.75z"/><path d="M2.682 6.238h18.636c1.004 0 1.682.546 1.682 1.5v2.25c0 .954-.678 1.5-1.682 1.5H2.682c-1.004 0-1.682-.546-1.682-1.5v-2.25c0-.954.678-1.5 1.682-1.5zm0 1.5c-.239 0-.182-.046-.182 0v2.25c0 .046-.057 0 .182 0h18.636c.239 0 .182.046.182 0v-2.25c0-.046.057 0-.182 0H2.682z"/><path d="M12.75 22.238V6.988c0-.414-.336-.75-.75-.75s-.75.336-.75.75v15.25c0 .414.336.75.75.75s.75-.336.75-.75z"/><path d="M3.5 17.25h17c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-17c-.414 0-.75.336-.75.75s.336.75.75.75zM7.271 5.457c1.35 1.058 2.855 1.81 4.51 2.255.558.15 1.069-.36.92-.918-.445-1.657-1.197-3.162-2.256-4.511-1.498-1.506-2.74-1.626-3.774-.6-1.033 1.027-.908 2.273.533 3.714l.067.06zm.458-2.709c.397-.395.702-.366 1.596.528.587.755 1.079 1.6 1.456 2.516-.909-.377-1.758-.872-2.549-1.487-.865-.872-.89-1.173-.503-1.557z"/><path d="M16.796 5.397l-.067.06c-1.35 1.058-2.855 1.81-4.512 2.255-.557.15-1.068-.36-.918-.918.444-1.656 1.197-3.162 2.315-4.579 1.44-1.438 2.681-1.558 3.715-.531 1.033 1.026.908 2.272-.533 3.713zm-.525-2.649c-.397-.395-.702-.366-1.537.46-.628.801-1.132 1.662-1.515 2.584.909-.377 1.758-.873 2.549-1.487.865-.872.89-1.173.503-1.557z"/></g></svg>
|
||||
<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.2px;}</style></defs><title>single-neutral-actions-star</title><path class="cls-1" d="M.75,17.25a6.751,6.751,0,0,1,10.517-5.6"/><circle class="cls-1" cx="7.5" cy="4.875" r="4.125"/><path class="cls-1" d="M17.946,11.68,19.488,15h3a.735.735,0,0,1,.518,1.283l-2.6,2.562,1.443,3.314a.786.786,0,0,1-1.119.982l-3.487-1.961-3.486,1.961a.786.786,0,0,1-1.12-.982l1.443-3.314-2.6-2.562A.734.734,0,0,1,11.988,15h3l1.544-3.323A.8.8,0,0,1,17.946,11.68Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 628 B |
|
|
@ -17,7 +17,7 @@ export const site = {
|
|||
portal_name: true,
|
||||
portal_plans: ['free', 'monthly', 'yearly'],
|
||||
portal_button_icon: 'icon-1',
|
||||
portal_button_signup_text: 'Subscribe Now for free access to everything',
|
||||
portal_button_signup_text: 'Subscribe now',
|
||||
portal_button_style: 'icon-and-text'
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue