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

Simplified markup and styles; Bigger close button hitbox

Browse source
This commit is contained in:
Vladimir Borisov 2019-10-31 17:58:50 +02:00
parent 5a664d7007
commit ec3caac603
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
2 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,7 +16,7 @@ const ToastItem = ({ type, title, text, icon, closeButton, onClick, onClose }) =
icon
?
<div className={styles['icon-container']}>
<Icon className={styles['icon']} icon={icon} />
<Icon icon={icon} />
</div>
:
null
@ -34,11 +34,9 @@ const ToastItem = ({ type, title, text, icon, closeButton, onClick, onClose }) =
{
closeButton
?
<div className={styles['close-button-container']}>
<button onClick={onClose}>
<Icon className={styles['icon']} icon={'ic_x'} />
</button>
</div>
<button onClick={onClose}>
<Icon icon={'ic_x'} />
</button>
:
null
}

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

@ -1,4 +1,3 @@
.toast-item {
pointer-events: all;
border: 1px solid;
@ -6,7 +5,6 @@
background-color: var(--color-surfacelighter);
color: var(--color-backgrounddarker);
fill: var(--color-backgrounddarker);
padding: 1rem;
margin-bottom: 1rem;
overflow: visible;
display: flex;
@ -28,8 +26,9 @@
}
.icon-container {
width: 3rem;
margin-right: 1rem;
width: 5rem;
padding: 1rem;
padding-right: 0;
display: flex;
flex-flow: row;
flex-shrink: 0;
@ -37,6 +36,7 @@
.message-container {
flex-grow: 1;
padding: 1rem;
&.clickable {
cursor: pointer;
@ -47,13 +47,13 @@
}
}
.close-button-container {
margin-left: 1rem;
width: 1rem;
flex-shrink: 0;
button {
cursor: pointer;
button {
height: 3rem;
padding: 1rem;
flex: 0 0 3rem;
cursor: pointer;
&:hover {
background-color: var(--color-surfacelight);
}
}
}