fix(cc-dark-theme): minor improvements
- Fix dialog close button color.
- Fix color for error messages when loading threads.
- Fix "duplicate thread" dialog buttons color.
Fixed: twpowertools:193
Change-Id: Ie4048a0faf297b7cad9a75030bf9c63a42914b6d
diff --git a/src/ccDarkTheme/abstracts/_variables.scss b/src/ccDarkTheme/abstracts/_variables.scss
index b34670f..9deae11 100644
--- a/src/ccDarkTheme/abstracts/_variables.scss
+++ b/src/ccDarkTheme/abstracts/_variables.scss
@@ -10,6 +10,7 @@
--TWPT-card-border: #5f6368;
--TWPT-subtle-border: #383735;
--TWPT-link: #8ab4f8;
+ --TWPT-icon-color: rgba(255, 255, 255, .87);
--TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
--TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
--TWPT-drawer-background: #2d2e30;
diff --git a/src/ccDarkTheme/components/_icon.scss b/src/ccDarkTheme/components/_icon.scss
index 5a1fef6..ccba370 100644
--- a/src/ccDarkTheme/components/_icon.scss
+++ b/src/ccDarkTheme/components/_icon.scss
@@ -11,12 +11,12 @@
ec-editor-command material-icon,
ec-canned-responses ec-canned-response-row material-icon,
ec-ask-flow > .header material-button {
- color: rgba(255, 255, 255, .87)!important;
+ color: var(--TWPT-icon-color)!important;
}
material-drawer ec-icon,
.search-results ec-thread-option ec-icon,
ec-thread-summary material-expansionpanel .title ec-icon,
ec-announcements-menu-item ec-icon {
- fill: rgba(255, 255, 255, .87)!important;
+ fill: var(--TWPT-icon-color)!important;
}
diff --git a/src/ccDarkTheme/components/_rich-text-editor.scss b/src/ccDarkTheme/components/_rich-text-editor.scss
index 61553f4..2a6d818 100644
--- a/src/ccDarkTheme/components/_rich-text-editor.scss
+++ b/src/ccDarkTheme/components/_rich-text-editor.scss
@@ -29,7 +29,7 @@
}
material-select-searchbox + material-list material-list-item {
- color: rgba(255, 255, 255, .87)!important;
+ color: var(--TWPT-icon-color)!important;
}
ec-attachment .filename {
diff --git a/src/ccDarkTheme/components/_thread-view.scss b/src/ccDarkTheme/components/_thread-view.scss
index 17bd302..0878169 100644
--- a/src/ccDarkTheme/components/_thread-view.scss
+++ b/src/ccDarkTheme/components/_thread-view.scss
@@ -188,3 +188,23 @@
.explanation-icon material-icon:hover {
color: var(--TWPT-blue-A100)!important;
}
+
+// Notice used e.g. for deleted threads
+ec-thread .notice {
+ material-icon {
+ color: var(--TWPT-icon-color)!important;
+ }
+
+ .notice-heading {
+ color: var(--TWPT-primary-text)!important;
+ }
+
+ .notice-message {
+ color: var(--TWPT-secondary-text)!important;
+ }
+
+ material-button {
+ background: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+ }
+}
diff --git a/src/ccDarkTheme/components/buttons/_button.scss b/src/ccDarkTheme/components/buttons/_button.scss
index 10ad660..b748e5d 100644
--- a/src/ccDarkTheme/components/buttons/_button.scss
+++ b/src/ccDarkTheme/components/buttons/_button.scss
@@ -3,5 +3,7 @@
}
.mdc-button {
+ --gm-colortextbutton-ink-color: var(--TWPT-interop-blue);
+ --gm-colortextbutton-ink-color--stateful: var(--TWPT-interop-blue);
--gm-colortextbutton-disabled-ink-color: rgba(255, 255, 255, .26);
}
diff --git a/src/ccDarkTheme/components/dialogs/_dialog.scss b/src/ccDarkTheme/components/dialogs/_dialog.scss
index 5ae0bf1..4f3570c 100644
--- a/src/ccDarkTheme/components/dialogs/_dialog.scss
+++ b/src/ccDarkTheme/components/dialogs/_dialog.scss
@@ -10,6 +10,10 @@
color: var(--TWPT-primary-text-alt)!important;
}
+material-dialog header material-button:is(.close-button, [debugid="close-button"]) material-icon {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
color: var(--TWPT-primary-background)!important;
}
diff --git a/src/ccDarkTheme/components/inputs/_pickers.scss b/src/ccDarkTheme/components/inputs/_pickers.scss
index 2cf091c..d551158 100644
--- a/src/ccDarkTheme/components/inputs/_pickers.scss
+++ b/src/ccDarkTheme/components/inputs/_pickers.scss
@@ -5,6 +5,14 @@
border-color: var(--TWPT-subtle-border)!important;
}
-.material-popup-content .popup-content .title {
- color: var(--TWPT-primary-text)!important;
+.material-popup-content .popup-content {
+ header {
+ .title {
+ color: var(--TWPT-primary-text)!important;
+ }
+
+ material-button material-icon {
+ color: var(--TWPT-subtle-button-background)!important;
+ }
+ }
}
diff --git a/src/ccDarkTheme/components/inputs/_selector.scss b/src/ccDarkTheme/components/inputs/_selector.scss
index e0a62f0..96650ac 100644
--- a/src/ccDarkTheme/components/inputs/_selector.scss
+++ b/src/ccDarkTheme/components/inputs/_selector.scss
@@ -34,7 +34,7 @@
menu-item-groups .menu-item-label,
menu-item-groups .label,
menu-item-groups .text-segment {
- color: rgba(255, 255, 255, .87)!important;
+ color: var(--TWPT-icon-color)!important;
}
.popup .item-group-list material-icon {
diff --git a/src/ccDarkTheme/layout/_header.scss b/src/ccDarkTheme/layout/_header.scss
index abfca60..8e13bac 100644
--- a/src/ccDarkTheme/layout/_header.scss
+++ b/src/ccDarkTheme/layout/_header.scss
@@ -12,7 +12,7 @@
.mdc-button.mdc-icon-button,
.mdc-button.mdc-icon-button material-icon,
notification-bell material-icon) {
- color: rgba(255, 255, 255, .87)!important;
+ color: var(--TWPT-icon-color)!important;
}
.search-box {
@@ -21,11 +21,11 @@
.search-box .clear-icon {
opacity: 0.8;
- color: rgba(255, 255, 255, .87)!important;
+ color: var(--TWPT-icon-color)!important;
}
.material-content > header .bell.mixin {
- fill: rgba(255, 255, 255, .87)!important;
+ fill: var(--TWPT-icon-color)!important;
}
// Header menus