OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Portal notification styles

Browse Source 
DES-548

Portal popup notification styles look outdated and harsh. Also in-popup notifications have several issues with positioning, alignment etc.
This commit is contained in:
Peter Zimon 2024-07-04 09:50:03 +02:00
parent 895e3719bd
commit 15ead1e4d3
4 changed files with 23 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/portal/src/components/Global.styles.js
View File

@ -26,7 +26,7 @@ export const GlobalStyles = `
--red: #f02525;
--darkerRed: #C50202;
--yellow: #FFDC15;
--green: #7FC724;
--green: #30CF43;
}
/* Globals

6
apps/portal/src/components/Notification.js
View File

@ -17,7 +17,7 @@ const Styles = () => {
right: '0',
maxWidth: '415px',
width: '100%',
height: '120px',
height: '220px',
animation: '250ms ease 0s 1 normal none running animation-bhegco',
transition: 'opacity 0.3s ease 0s',
overflow: 'hidden'
@ -34,13 +34,13 @@ const NotificationText = ({type, status, context}) => {
const firstname = context.member.firstname || '';
return (
<p>
{firstname ? t('Welcome back, {{name}}!', {name: firstname}) : t('Welcome back!')}<br />{t('You\'ve successfully signed in.')}
<strong>{firstname ? t('Welcome back, {{name}}!', {name: firstname}) : t('Welcome back!')}</strong><br />{t('You\'ve successfully signed in.')}
</p>
);
} else if (type === 'signin' && status === 'error') {
return (
<p>
{t('Could not sign in. Login link expired.')} <a href={signinPortalLink} target="_parent">{t('Click here to retry')}</a>
{t('Could not sign in. Login link expired.')} <br /><a href={signinPortalLink} target="_parent">{t('Click here to retry')}</a>
</p>
);
} else if (type === 'signup' && status === 'success') {

32
apps/portal/src/components/Notification.styles.js
View File

@ -15,21 +15,21 @@ const NotificationStyles = `
top: 12px;
right: 12px;
width: 100%;
padding: 14px 44px 18px 20px;
padding: 16px 44px 16px 20px;
max-width: 380px;
min-height: 66px;
font-size: 1.3rem;
letter-spacing: 0.2px;
background: rgba(var(--grey1rgb),0.95);
background: var(--white);
backdrop-filter: blur(8px);
color: var(--white);
color: var(--grey0);
border-radius: 7px;
box-shadow: 0 3.2px 3.6px rgba(var(--black), 0.024), 0 8.8px 10px -5px rgba(var(--black), 0.08);
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.30), 0px 51px 40px 0px rgba(0, 0, 0, 0.05), 0px 15.375px 12.059px 0px rgba(0, 0, 0, 0.03), 0px 6.386px 5.009px 0px rgba(0, 0, 0, 0.03), 0px 2.31px 1.812px 0px rgba(0, 0, 0, 0.02);
animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.gh-portal-notification.slideout {
animation: notification-slideout 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190);
/*animation: notification-slideout 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190);*/
}
.gh-portal-notification.hide {
@ -42,16 +42,12 @@ const NotificationStyles = `
line-height: 1.5em;
text-align: left;
margin: 0;
padding: 0 0 0 40px;
color: var(--grey13);
}
.gh-portal-notification p strong {
color: var(--white);
padding: 0 0 0 26px;
color: var(--grey0);
}
.gh-portal-notification a {
color: var(--white);
color: var(--grey0);
text-decoration: underline;
transition: all 0.2s ease-in-out;
outline: none;
@ -63,10 +59,10 @@ const NotificationStyles = `
.gh-portal-notification-icon {
position: absolute;
top: calc(50% - 14px);
left: 17px;
width: 28px;
height: 28px;
top: calc(50% - 20px);
left: 16px;
width: 18px;
height: 18px;
}
.gh-portal-notification-icon.success {
@ -82,7 +78,7 @@ const NotificationStyles = `
top: 5px;
bottom: 0;
right: 5px;
color: var(--white);
color: var(--grey8);
cursor: pointer;
width: 12px;
height: 12px;
@ -93,7 +89,7 @@ const NotificationStyles = `
.gh-portal-notification-closeicon:hover {
opacity: 1.0;
}
}
@keyframes notification-slidein {
0% { transform: translateX(380px); }

13
apps/portal/src/components/common/PopupNotification.js
View File

@ -15,14 +15,11 @@ export const PopupNotificationStyles = `
left: 8px;
right: 8px;
padding: 12px;
background: var(--grey2);
background: var(--white);
z-index: 11000;
border-radius: 5px;
font-size: 1.5rem;
box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(var(--blackrgb),0.01),
0px 2.2538793087005615px 2.2538793087005615px 0px rgba(var(--blackrgb),0.02),
0px 5.426473140716553px 5.426473140716553px 0px rgba(var(--blackrgb),0.03),
0px 18px 18px 0px rgba(var(--blackrgb),0.04);
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 1px 4px 0px rgba(0, 0, 0, 0.07), 0px 3px 7px 0px rgba(0, 0, 0, 0.02);
animation: popupnotification-slidein 0.3s ease-in-out;
}
@ -31,7 +28,7 @@ export const PopupNotificationStyles = `
}
.gh-portal-popupnotification p {
color: var(--white);
color: var(--grey0);
margin: 0;
padding: 0 20px;
font-size: 1.5rem;
@ -41,7 +38,7 @@ export const PopupNotificationStyles = `
}
.gh-portal-popupnotification a {
color: var(--white);
color: var(--grey0);
}
.gh-portal-popupnotification-icon {
@ -65,7 +62,7 @@ export const PopupNotificationStyles = `
top: 3px;
bottom: 0;
right: 3px;
color: var(--white);
color: var(--grey8);
cursor: pointer;
width: 16px;
height: 16px;