feat(extra-info): adapt chips styles to the RCE thread page
The RCE thread page includes a different style of chip compared to the
old thread page.
Fixed: twpowertools:173
Change-Id: I59368cf09be778a4ad7f5d2aefdf5177cb370f11
diff --git a/src/ccDarkTheme/components/_thread-view.scss b/src/ccDarkTheme/components/_thread-view.scss
index 74efcd6..17bd302 100644
--- a/src/ccDarkTheme/components/_thread-view.scss
+++ b/src/ccDarkTheme/components/_thread-view.scss
@@ -67,8 +67,7 @@
color: var(--TWPT-primary-text-alt) !important;
}
-ec-question .state-chips material-chip,
- .TWPT-extrainfo-chip {
+ec-question .state-chips material-chip {
background-color: var(--TWPT-button-background)!important;
border: none!important;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
@@ -76,8 +75,7 @@
0 1px 3px 0 rgba(0, 0, 0, 0.12)!important;
}
-ec-question .state-chips material-chip .content,
- .TWPT-extrainfo-chip .TWPT-content {
+ec-question .state-chips material-chip .content {
color: var(--TWPT-primary-text)!important;
}
diff --git a/src/ccDarkTheme/components/custom/_chip.scss b/src/ccDarkTheme/components/custom/_chip.scss
new file mode 100644
index 0000000..f2840d3
--- /dev/null
+++ b/src/ccDarkTheme/components/custom/_chip.scss
@@ -0,0 +1,4 @@
+.TWPT-extrainfo-chip {
+ border: 1px solid var(--TWPT-interop-subtle-border)!important;
+ color: var(--TWPT-interop-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/custom/_index.scss b/src/ccDarkTheme/components/custom/_index.scss
index 90ce688..e73007c 100644
--- a/src/ccDarkTheme/components/custom/_index.scss
+++ b/src/ccDarkTheme/components/custom/_index.scss
@@ -1,2 +1,3 @@
+@forward 'chip';
@forward 'log';
@forward 'warning';
diff --git a/src/contentScripts/communityConsole/extraInfo/injections/base.js b/src/contentScripts/communityConsole/extraInfo/injections/base.js
index ee997c4..78ded47 100644
--- a/src/contentScripts/communityConsole/extraInfo/injections/base.js
+++ b/src/contentScripts/communityConsole/extraInfo/injections/base.js
@@ -84,23 +84,15 @@
* instantiated.
*/
addChipToContainer(chipContent, container) {
- let chip = document.createElement('material-chip');
+ let chip = document.createElement('div');
chip.classList.add('TWPT-extrainfo-chip');
- let chipContentContainer = document.createElement('div');
- chipContentContainer.classList.add('TWPT-chip-content-container');
-
- let content = document.createElement('div');
- content.classList.add('TWPT-content');
-
const [badge, badgeTooltip] = createExtBadge();
let span = document.createElement('span');
span.append(chipContent);
- content.append(badge, span);
- chipContentContainer.append(content);
- chip.append(chipContentContainer);
+ chip.append(badge, span);
container.append(chip);
return badgeTooltip;
diff --git a/src/static/css/extrainfo.css b/src/static/css/extrainfo.css
index ae15f8d..de9d361 100644
--- a/src/static/css/extrainfo.css
+++ b/src/static/css/extrainfo.css
@@ -2,52 +2,33 @@
display: flex;
align-items: center;
flex-wrap: wrap;
-}
-
-.TWPT-extrainfo-chip,
- ec-canned-response-row .TWPT-tag {
- background-color: transparent;
- color: #474747;
- border: 1px solid #ababab;
- display: flex;
- align-items: center;
- border-radius: 16px;
- height: 32px;
- overflow: hidden;
+ gap: 0.25rem;
}
.TWPT-extrainfo-chip {
- margin: 4px;
-}
+ color: #444746;
+ font-family: "Google Sans Text", "Roboto", "Arial", sans-serif;
+ font-size: .875rem;
+ line-height: 1.25rem;
+ letter-spacing: .018em;
-ec-canned-response-row .TWPT-tag {
- margin: 0 0 0 4px;
-}
+ height: 2rem;
+ border: 1px solid #ababab;
+ border-radius: 8rem;
+ padding-inline-start: 0.5rem;
+ padding-inline-end: 0.75rem;
-.TWPT-extrainfo-chip .TWPT-chip-content-container,
- ec-canned-response-row .TWPT-chip-content-container {
- margin: 0 12px;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.TWPT-extrainfo-chip .TWPT-content,
- ec-canned-response-row .TWPT-content {
- overflow: hidden;
- text-overflow: ellipsis;
display: flex;
+ justify-content: flex-start;
align-items: center;
- color: var(--TWPT-interop-secondary-text, #444746);
+ gap: 0.375rem;
}
-.TWPT-extrainfo-chip .TWPT-content .TWPT-badge,
- ec-canned-response-row .TWPT-content .TWPT-badge {
+.TWPT-extrainfo-chip .TWPT-badge {
--icon-size: 14px;
- margin-inline-end: 6px;
}
-.TWPT-extrainfo-chip .TWPT-content span[aria-describedby],
- ec-canned-response-row .TWPT-content span[aria-describedby] {
+.TWPT-extrainfo-chip span[aria-describedby] {
cursor: help;
}
@@ -64,37 +45,29 @@
align-self: end;
}
-/* This modifies the CC styles */
-ec-question .state-chips {
+/* This overrides the CC styles */
+sc-tailwind-thread-question-state-chips .scTailwindThreadQuestionStatechipsroot {
align-items: center;
flex-wrap: wrap;
}
-ec-question .TWPT-extrainfo-chip,
- ec-message .footer .TWPT-extrainfo-chip,
+sc-tailwind-thread-question-state-chips .TWPT-extrainfo-chip {
+ font-weight: 500;
+}
+
+sc-tailwind-thread-message-message-card .TWPT-extrainfo-chip,
ec-thread-summary .main .toolbelt .TWPT-extrainfo-chip {
height: 30px;
font-size: 12px;
color: var(--TWPT-secondary-text, #6c6c6c);
}
-ec-question .TWPT-extrainfo-chip .TWPT-chip-content-container,
- ec-message .footer .TWPT-extrainfo-chip .TWPT-chip-content-container,
- ec-thread-summary .main .toolbelt .TWPT-extrainfo-chip .TWPT-chip-content-container {
- margin-block: 0;
- margin-inline: 6px 10px;
-}
-
-ec-message .footer .TWPT-extrainfo-container {
- margin-top: 8px;
-}
-
ec-thread-summary .main .toolbelt .TWPT-extrainfo-container {
margin-inline-start: 115px;
margin-bottom: 16px;
}
-/* This modifies the CC styles */
+/* This overrides the CC styles */
ec-thread-summary .author-line .removed-label {
width: auto!important;
min-width: 72px!important;