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

uninstall-pop-up modal-dialog new styling

Browse source
This commit is contained in:
kKaskak 2023-09-28 15:04:27 +03:00
parent 2a422fa8e0
commit c7e5421c77
3 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/ModalDialog/ModalDialog.js
View file

@ -75,7 +75,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
<Button title={label} {...props} key={index} className={classnames(className, label === 'Uninstall' ? styles['uninstall-button'] : styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} name={icon} />

29
src/common/ModalDialog/styles.less
View file

@ -19,6 +19,7 @@
padding: 0 2rem;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
box-shadow: 0px 0px 30px #7B5BF55E;
.close-button-container {
position: absolute;
@ -33,11 +34,13 @@
display: block;
width: 100%;
height: 100%;
color: var(--overlay-color);
color: var(--primary-foreground-color);
opacity: 0.4;
}
&:hover, &:focus {
.icon {
opacity: 1;
color: var(--primary-foreground-color);
}
}
@ -61,6 +64,7 @@
flex: 1;
align-self: stretch;
overflow-y: auto;
padding: 32px 0;
&:last-child {
margin-bottom: 2rem;
@ -80,8 +84,7 @@
}
}
}
.action-button {
.base-button() {
flex: 1;
display: flex;
flex-direction: row;
@ -90,10 +93,8 @@
height: 3.5rem;
border-radius: 3.5rem;
padding: 1.2rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
@ -125,6 +126,24 @@
}
}
.uninstall-button {
.base-button();
background-color: rgba(72, 69, 114, 1);
&:hover {
outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
}
}
.action-button {
.base-button();
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
}
}
@media only screen and (max-width: @minimum) {
.modal-container {
.modal-dialog-container {

2
src/routes/Search/styles.less
View file

@ -240,7 +240,6 @@
.search-container {
.search-content {
.search-hints-wrapper {
margin-top: 4rem;
.search-hints-container {
max-width: 100%;
.search-hint-container {
@ -283,6 +282,7 @@
}
.search-hints-wrapper {
margin-top: 4rem;
.search-hints-container {
padding: 4rem 2rem;
.search-hint-container {