Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #573 from Stremio/feat-toast-design

Browse source 
feature: toasts new design
This commit is contained in:
Tim 2024-01-30 12:58:30 +01:00 committed by GitHub
commit 3fb210f38b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/Toast/ToastItem/ToastItem.js
View file

@ -17,7 +17,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
const icon = React.useMemo(() => { const icon = React.useMemo(() => {
return typeof props.icon === 'string' ? props.icon : return typeof props.icon === 'string' ? props.icon :
type === 'success' ? 'checkmark' : type === 'success' ? 'checkmark' :
type === 'error' ? 'warning' : type === 'error' ? 'close' :
null; null;
}, [type, props.icon]); }, [type, props.icon]);
const toastOnClick = React.useCallback((event) => { const toastOnClick = React.useCallback((event) => {

51
src/common/Toast/ToastItem/styles.less
View file

@ -5,55 +5,53 @@
.toast-item-container { .toast-item-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start;
width: 25rem; width: 25rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: @color-surface-light4;
overflow: visible; overflow: visible;
box-shadow: 0 0.3rem 0.5rem @color-background-dark5-40, box-shadow: var(--outer-glow);
0 0.6rem 1rem @color-background-dark5-20; background-color: var(--modal-background-color);
pointer-events: auto; pointer-events: auto;
border-radius: var(--border-radius);
border: 0.4px solid var(--primary-accent-color);
backdrop-filter: blur(10px);
padding: 1rem;
&.success { &.success {
.icon-container { .icon-container {
background-color: @color-accent3;
.icon { .icon {
color: @color-surface-light5-90; color: @color-accent3;
} }
} }
} }
&.error { &.error {
.icon-container { .icon-container {
background-color: @color-accent2;
.icon { .icon {
color: @color-surface-light5-90; color: var(--color-trakt);
} }
} }
} }
.icon-container { .icon-container {
flex: none; border-radius: 3px;
align-self: stretch; background-color: var(--overlay-color);
width: 2.5rem;
padding: 0.5rem;
.icon { .icon {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: @color-background-dark5-90; max-width: 2rem;
} }
} }
.info-container { .info-container {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
padding: 1rem; padding: 0.2rem 1rem;
.title-container { .title-container {
font-size: 1.2rem; font-size: 1.2rem;
color: var(--primary-foreground-color);
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
@ -62,25 +60,28 @@
.message-container { .message-container {
font-size: 1.1rem; font-size: 1.1rem;
color: var(--primary-foreground-color);
opacity: 0.8;
} }
} }
.close-button-container { .close-button-container {
flex: none;
align-self: flex-start;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin: 0.2rem; border-radius: 3px;
padding: 0.5rem;
&:hover {
background-color: @color-surface-light2;
}
.icon { .icon {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--primary-foreground-color);
opacity: 0.4;
}
&:hover {
.icon {
opacity: 1;
}
} }
} }
} }