From 3131a5878b8d94a29360cf1d06437e05ba85c87a Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Mon, 14 Jul 2025 02:49:03 +0200
Subject: [PATCH] Poll: Fix check color (#6057)
---
.../font-icons/crown-take-off-outline.svg | 2 +-
src/components/middle/message/Poll.scss | 4 +--
src/components/middle/message/TodoList.scss | 4 +--
src/components/ui/Checkbox.scss | 31 ++++++++++++++-----
src/components/ui/Checkbox.tsx | 6 ++--
5 files changed, 31 insertions(+), 16 deletions(-)
diff --git a/src/assets/font-icons/crown-take-off-outline.svg b/src/assets/font-icons/crown-take-off-outline.svg
index 21dfb544c..eee47e2df 100644
--- a/src/assets/font-icons/crown-take-off-outline.svg
+++ b/src/assets/font-icons/crown-take-off-outline.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss
index 114b2b0e3..70306e78e 100644
--- a/src/components/middle/message/Poll.scss
+++ b/src/components/middle/message/Poll.scss
@@ -87,8 +87,8 @@
left: 0.125rem;
background-color: var(--accent-color);
- .theme-dark & {
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiM3NjZhYzgiLz48L3N2Zz4=);
+ .theme-dark .Message.own & {
+ color: var(--color-primary);
}
}
}
diff --git a/src/components/middle/message/TodoList.scss b/src/components/middle/message/TodoList.scss
index 8ecf2ee44..2ec206bd0 100644
--- a/src/components/middle/message/TodoList.scss
+++ b/src/components/middle/message/TodoList.scss
@@ -74,8 +74,8 @@
background-color: var(--accent-color);
outline: 1px solid var(--background-color);
- .theme-dark & {
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiM3NjZhYzgiLz48L3N2Zz4=);
+ .theme-dark .Message.own & {
+ color: var(--color-primary);
}
}
diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss
index aff90b212..03216561e 100644
--- a/src/components/ui/Checkbox.scss
+++ b/src/components/ui/Checkbox.scss
@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../../styles/icons";
+
.Checkbox {
cursor: var(--custom-cursor, pointer);
@@ -77,18 +80,23 @@
}
&.blocking {
+ .Checkbox-main {
+ &::before,
+ &::after {
+ transition: none;
+ }
+ }
+
input:not(:checked) ~ .Checkbox-main {
&::before {
border-color: var(--color-error);
}
&::after {
+ content: map.get(icons.$icons-map, "remove");
+ border-radius: 0.25rem;
opacity: 1;
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==);
- background-position: -0.125rem -0.125rem;
-
- // Compensate for svg having incorrect size
- background-size: 1.5rem;
+ background-color: var(--color-error);
}
}
}
@@ -125,10 +133,17 @@
}
&::after {
+ @include icons.icon;
+
+ content: map.get(icons.$icons-map, "check");
+
+ position: absolute;
+
+ font-size: 1.25rem;
+ color: var(--color-white);
+
opacity: 0;
- /* stylelint-disable-next-line scss/operator-no-unspaced */
- background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
- background-size: 0.875rem;
+
transition: opacity 0.1s ease;
}
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index c94f4a46c..38f009b6f 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -46,14 +46,14 @@ type OwnProps = {
onlyInput?: boolean;
isRound?: boolean;
className?: string;
- onChange?: (e: ChangeEvent, nestedOptionList?: IRadioOption) => void;
- onCheck?: (isChecked: boolean) => void;
- onClickLabel?: (e: React.MouseEvent, value?: string) => void;
nestedCheckbox?: boolean;
nestedCheckboxCount?: number | undefined;
nestedOptionList?: IRadioOption;
leftElement?: TeactNode;
values?: string[];
+ onChange?: (e: ChangeEvent, nestedOptionList?: IRadioOption) => void;
+ onCheck?: (isChecked: boolean) => void;
+ onClickLabel?: (e: React.MouseEvent, value?: string) => void;
};
const AVATAR_SIZE = 1.25 * REM;