From 22376793b797066a9c74adb9e23c14fe9ff8cbb2 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Tue, 22 Oct 2024 15:30:45 +0300 Subject: [PATCH] refactor: change delete icon --- package-lock.json | 14 +- package.json | 2 +- src/common/Checkbox/Checkbox.less | 159 +++++++++--------- .../Settings/URLsManager/Item/Item.less | 6 +- src/routes/Settings/URLsManager/Item/Item.tsx | 2 +- 5 files changed, 92 insertions(+), 91 deletions(-) diff --git a/package-lock.json b/package-lock.json index 46eb25c54..4a46a295b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index b3e1e8086..40c6d5130 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/common/Checkbox/Checkbox.less b/src/common/Checkbox/Checkbox.less index 876deb26d..284a14862 100644 --- a/src/common/Checkbox/Checkbox.less +++ b/src/common/Checkbox/Checkbox.less @@ -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); -} +} \ No newline at end of file diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less index 58705d6c5..90e5c8048 100644 --- a/src/routes/Settings/URLsManager/Item/Item.less +++ b/src/routes/Settings/URLsManager/Item/Item.less @@ -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); } diff --git a/src/routes/Settings/URLsManager/Item/Item.tsx b/src/routes/Settings/URLsManager/Item/Item.tsx index 411cdec5f..110fc0c48 100644 --- a/src/routes/Settings/URLsManager/Item/Item.tsx +++ b/src/routes/Settings/URLsManager/Item/Item.tsx @@ -65,7 +65,7 @@ const ViewMode = ({ url, onDelete, onSelect }: ViewModeProps) => { { !defaultUrl ? : null }