TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-18 16:01:40 +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;
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}) {

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 {getSiteNewsletters} from '../../utils/helpers';
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');
@ -24,16 +24,18 @@ function AccountHeader() {
function SuccessIcon({show, checked}) {
let classNames = [];
if (show) {
classNames.push('gh-portal-show');
classNames.push('gh-portal-checkmark-show');
}
if (checked) {
classNames.push('gh-portal-toggle-checked');
}
classNames.push('gh-portal-checkmark-container');
return (
<div style={{marginRight: '8px', display: 'flex', transition: 'all ease 1s'}} className={classNames.join(' ')}>
<CheckmarkIcon className='gh-portal-checkmark-icon' alt='' style={{height: '24px', color: '#30cf43'}} />
<div className={classNames.join(' ')}>
<CheckmarkIcon className='gh-portal-checkmark-icon' alt='' />
</div>
);
}
@ -63,7 +65,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => {
setShowUpdated(false);
}, 3000);
}, 2000);
setTimeoutId(newTimeoutId);
} else {
updatedNewsletters = subscribedNewsletters.filter((d) => {
@ -73,7 +75,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => {
setShowUpdated(false);
}, 3000);
}, 2000);
setTimeoutId(newTimeoutId);
}
setSubscribedNewsletters(updatedNewsletters);