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

refactor: change delete icon

Browse source
This commit is contained in:
Timothy Z. 2024-10-22 15:30:45 +03:00
parent fd88b18cdd
commit 22376793b7
5 changed files with 92 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -13,7 +13,7 @@
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.47.8",
"@stremio/stremio-icons": "5.2.0",
"@stremio/stremio-icons": "5.4.0",
"@stremio/stremio-video": "0.0.38",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",
@ -3155,9 +3155,15 @@
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/@stremio/stremio-icons": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.2.0.tgz",
"integrity": "sha512-rABlPBTFF17QcSm/4IizVoE/jh+REt+waqA0RvIxuGjQppXlvj7CalqVvTam0CC2wgY00zNG1v/9kVHUDVzo4Q=="
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz",
"integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==",
"workspaces": [
"react",
"react-native",
"solid",
"angularjs"
]
},
"node_modules/@stremio/stremio-video": {
"version": "0.0.38",

2
package.json
View file

@ -17,7 +17,7 @@
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.47.8",
"@stremio/stremio-icons": "5.2.0",
"@stremio/stremio-icons": "5.4.0",
"@stremio/stremio-video": "0.0.38",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",

159
src/common/Checkbox/Checkbox.less
View file

@ -3,89 +3,84 @@
.checkbox {
display: flex;
align-items: center;
}
.checkbox label {
display: flex;
align-items: center;
cursor: pointer;
}
label {
display: flex;
align-items: center;
cursor: pointer;
.checkbox-container {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--primary-accent-color);
border-radius: 0.25rem;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
cursor: pointer;
outline: none;
user-select: none;
.checkbox-checked {
.checkbox-container {
background-color: var(--primary-accent-color);
border-color: var(--primary-accent-color);
}
.checkbox-icon {
color: var(--secondary-foreground-color);
}
}
.checkbox-unchecked {
.checkbox-container {
background-color: transparent;
border-color: var(--primary-accent-color);
}
}
.checkbox-disabled {
cursor: not-allowed;
.checkbox-container {
cursor: not-allowed;
}
.checkbox-label {
color: var(--primary-foreground-color);
opacity: 0.6;
}
}
.checkbox-error {
.checkbox-container {
border-color: var(--color-reddit);
}
.checkbox-label {
color: var(--color-reddit);
}
}
&:focus {
outline: var(--focus-outline-size) solid var(--primary-accent-color);
outline-offset: 2px;
.checkbox-container {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--primary-accent-color);
border-radius: 0.25rem;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
cursor: pointer;
outline: none;
user-select: none;
&:focus {
outline: var(--focus-outline-size) solid var(--primary-accent-color);
outline-offset: 2px;
}
input[type='checkbox'] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.checkbox-icon {
color: var(--primary-background-color);
width: 1rem;
}
}
}
&:hover {
background-color: var(--overlay-color);
}
}
.checkbox-container input[type='checkbox'] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.checkbox-icon {
color: var(--primary-foreground-color);
width: 1rem;
}
.checkbox-label {
margin-left: 0.75rem;
color: var(--primary-foreground-color);
font-size: 1rem;
}
.checkbox-checked .checkbox-container {
background-color: var(--primary-accent-color);
border-color: var(--primary-accent-color);
}
.checkbox-checked .checkbox-icon {
color: var(--secondary-foreground-color);
}
.checkbox-unchecked .checkbox-container {
background-color: transparent;
border-color: var(--primary-accent-color);
}
.checkbox-disabled {
cursor: not-allowed;
}
.checkbox-disabled .checkbox-container {
border-color: var(--overlay-color);
cursor: not-allowed;
}
.checkbox-disabled .checkbox-label {
color: var(--primary-foreground-color);
opacity: 0.6;
}
.checkbox-error .checkbox-container {
border-color: var(--color-reddit);
}
.checkbox-error .checkbox-label {
color: var(--color-reddit);
}
}

6
src/routes/Settings/URLsManager/Item/Item.less
View file

@ -71,7 +71,7 @@
top: 50%;
display: none;
gap: 0.5rem;
padding: 0.25rem;
padding: 0.5rem 0.25rem;
align-items: center;
justify-content: center;
background-color: transparent;
@ -82,8 +82,8 @@
opacity: 0.6;
.icon {
width: 2rem;
height: 2rem;
width: 1.5rem;
height: 1.5rem;
color: var(--primary-foreground-color);
}

2
src/routes/Settings/URLsManager/Item/Item.tsx
View file

@ -65,7 +65,7 @@ const ViewMode = ({ url, onDelete, onSelect }: ViewModeProps) => {
{
!defaultUrl ?
<Button className={styles['delete']} onClick={handleDelete}>
<Icon name={'close'} className={styles['icon']} />
<Icon name={'bin'} className={styles['icon']} />
</Button>
: null
}