TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-19 16:42:17 +03:00
Code Issues Projects Releases Wiki Activity

Updated checkmark notification design

Browse Source 
refs https://github.com/TryGhost/Team/issues/1440
This commit is contained in:
Djordje Vlaisavljevic 2022-05-10 11:30:19 +02:00
parent fe961b0630
commit 334c2c290a
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ghost/portal/src/components/Frame.styles.js
View File

@ -1075,6 +1075,27 @@ const MultipleProductsGlobalStyles = `
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.gh-portal-toggle-checked {
transition: all 0.3s;
transition-delay: 2s;
}
.gh-portal-checkmark-container {
display: flex;
opacity: 0;
margin-right: 8px;
transition: opacity ease 0.4s 0.2s;
}
.gh-portal-checkmark-show {
opacity: 1;
}
.gh-portal-checkmark-icon {
height: 22px;
color: #30cf43;
}
`; `;
export function getFrameStyles({site}) { export function getFrameStyles({site}) {

14
ghost/portal/src/components/common/NewsletterManagement.js
View File

@ -5,7 +5,7 @@ import {useContext, useState} from 'react';
import Switch from '../common/Switch'; import Switch from '../common/Switch';
import {getSiteNewsletters} from '../../utils/helpers'; import {getSiteNewsletters} from '../../utils/helpers';
import ActionButton from '../common/ActionButton'; import ActionButton from '../common/ActionButton';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark-circle.svg'; import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.svg';
const React = require('react'); const React = require('react');
@ -24,16 +24,18 @@ function AccountHeader() {
function SuccessIcon({show, checked}) { function SuccessIcon({show, checked}) {
let classNames = []; let classNames = [];
if (show) { if (show) {
classNames.push('gh-portal-show'); classNames.push('gh-portal-checkmark-show');
} }
if (checked) { if (checked) {
classNames.push('gh-portal-toggle-checked'); classNames.push('gh-portal-toggle-checked');
} }
classNames.push('gh-portal-checkmark-container');
return ( return (
<div style={{marginRight: '8px', display: 'flex', transition: 'all ease 1s'}} className={classNames.join(' ')}> <div className={classNames.join(' ')}>
<CheckmarkIcon className='gh-portal-checkmark-icon' alt='' style={{height: '24px', color: '#30cf43'}} /> <CheckmarkIcon className='gh-portal-checkmark-icon' alt='' />
</div> </div>
); );
} }
@ -63,7 +65,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
clearTimeout(timeoutId); clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => { let newTimeoutId = setTimeout(() => {
setShowUpdated(false); setShowUpdated(false);
}, 3000); }, 2000);
setTimeoutId(newTimeoutId); setTimeoutId(newTimeoutId);
} else { } else {
updatedNewsletters = subscribedNewsletters.filter((d) => { updatedNewsletters = subscribedNewsletters.filter((d) => {
@ -73,7 +75,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
clearTimeout(timeoutId); clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => { let newTimeoutId = setTimeout(() => {
setShowUpdated(false); setShowUpdated(false);
}, 3000); }, 2000);
setTimeoutId(newTimeoutId); setTimeoutId(newTimeoutId);
} }
setSubscribedNewsletters(updatedNewsletters); setSubscribedNewsletters(updatedNewsletters);