Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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(() => {
return typeof props.icon === 'string' ? props.icon :
type === 'success' ? 'checkmark' :
type === 'error' ? 'warning' :
type === 'error' ? 'close' :
null;
}, [type, props.icon]);
const toastOnClick = React.useCallback((event) => {

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

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