diff --git a/apps/portal/src/components/Global.styles.js b/apps/portal/src/components/Global.styles.js index afecf0c913..28306773c6 100644 --- a/apps/portal/src/components/Global.styles.js +++ b/apps/portal/src/components/Global.styles.js @@ -26,7 +26,7 @@ export const GlobalStyles = ` --red: #f02525; --darkerRed: #C50202; --yellow: #FFDC15; - --green: #7FC724; + --green: #30CF43; } /* Globals diff --git a/apps/portal/src/components/Notification.js b/apps/portal/src/components/Notification.js index 49095d4860..ed200f4ff1 100644 --- a/apps/portal/src/components/Notification.js +++ b/apps/portal/src/components/Notification.js @@ -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 (

- {firstname ? t('Welcome back, {{name}}!', {name: firstname}) : t('Welcome back!')}
{t('You\'ve successfully signed in.')} + {firstname ? t('Welcome back, {{name}}!', {name: firstname}) : t('Welcome back!')}
{t('You\'ve successfully signed in.')}

); } else if (type === 'signin' && status === 'error') { return (

- {t('Could not sign in. Login link expired.')} {t('Click here to retry')} + {t('Could not sign in. Login link expired.')}
{t('Click here to retry')}

); } else if (type === 'signup' && status === 'success') { diff --git a/apps/portal/src/components/Notification.styles.js b/apps/portal/src/components/Notification.styles.js index 43bd634c74..6123768e12 100644 --- a/apps/portal/src/components/Notification.styles.js +++ b/apps/portal/src/components/Notification.styles.js @@ -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); } diff --git a/apps/portal/src/components/common/PopupNotification.js b/apps/portal/src/components/common/PopupNotification.js index a9593a4262..328e7293c8 100644 --- a/apps/portal/src/components/common/PopupNotification.js +++ b/apps/portal/src/components/common/PopupNotification.js @@ -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;