fix(flatten-threads): change reply button color to violet
Due to the recent change in the md3 color theme, the button was styled
green, and the recommended button next to it was also green. This can
cause confusion, and that's why this CL changes the color of the button
back to the color it previously had.
Fixed: twpowertools:186
Change-Id: Ib14028c7f22cfe5802b20e3e004faba7707f0b6a
diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index 45f6507..a8b2ac7 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -55,6 +55,9 @@
--md-sys-color-surface-container-high: var(--TWPT-md-sys-color-surface-container-high, rgb(227 234 231));
--md-sys-color-surface-container-highest: var(--TWPT-md-sys-color-surface-container-highest, rgb(221 228 225));
+ /* Custom colors */
+ --reply-button-color: var(--TWPT-reply-button-color, #65558f);
+
/* Material Design 2 theme */
--mdc-theme-surface: var(--TWPT-primary-background, #fff);
--mdc-theme-on-surface: var(--TWPT-primary-text, #000);
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
index 73a4cc1..8adf676 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
@@ -19,6 +19,22 @@
md-outlined-button {
--md-outlined-button-container-shape: 0.25rem;
--md-outlined-button-container-height: 38px;
+
+ /**
+ * We change the color because otherwise it would have a very similar
+ * color to the "Recommend" button.
+ */
+ --md-outlined-button-label-text-color: var(--reply-button-color);
+ --md-outlined-button-focus-label-text-color: var(--reply-button-color);
+ --md-outlined-button-hover-label-text-color: var(--reply-button-color);
+ --md-outlined-button-hover-state-layer-color: var(--reply-button-color);
+ --md-outlined-button-label-text-color: var(--reply-button-color);
+ --md-outlined-button-pressed-label-text-color: var(--reply-button-color);
+ --md-outlined-button-pressed-state-layer-color: var(--reply-button-color);
+ --md-outlined-button-focus-icon-color: var(--reply-button-color);
+ --md-outlined-button-hover-icon-color: var(--reply-button-color);
+ --md-outlined-button-icon-color: var(--reply-button-color);
+ --md-outlined-button-pressed-icon-color: var(--reply-button-color);
}
`,
];
diff --git a/src/md3/theme.scss b/src/md3/theme.scss
index c06c226..066db8c 100644
--- a/src/md3/theme.scss
+++ b/src/md3/theme.scss
@@ -50,6 +50,9 @@
--#{$var-prefix}md-sys-color-surface-container: rgb(26 33 32);
--#{$var-prefix}md-sys-color-surface-container-high: rgb(37 43 42);
--#{$var-prefix}md-sys-color-surface-container-highest: rgb(48 54 53);
+
+ // Custom colors
+ --#{$var-prefix}reply-button-color: #d0bcfe;
}
@mixin light-theme {
@@ -102,4 +105,7 @@
--md-sys-color-surface-container: rgb(233 239 237);
--md-sys-color-surface-container-high: rgb(227 234 231);
--md-sys-color-surface-container-highest: rgb(221 228 225);
+
+ // Custom colors
+ --reply-button-color: #65558f;
}