refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/_user-badge.scss b/src/ccDarkTheme/components/_user-badge.scss
new file mode 100644
index 0000000..3915b62
--- /dev/null
+++ b/src/ccDarkTheme/components/_user-badge.scss
@@ -0,0 +1,55 @@
+/**
+ * Some fixes for the interop PE badge components in the Community Console.
+ *
+ * The |.scTailwindThreadPost_headerUserinfotag| elements have a
+ * |style="--color:#aaaaaa"| attribute which indicates the color of the badge,
+ * and we are transforming it to the dark mode color accordingly.
+ *
+ * The | .scTailwindThreadMessageMessageinteractionsuser-label| elements have a
+ * |style="--userLabelColor: #aaaaaa"| attribute, so we do the same there.
+ *
+ * We match only the hex color instead of the whole attribute because over time
+ * the attributes have changed (spaces have been removed, for instance).
+ */
+
+// Alumnus
+.scTailwindThreadPost_headerUserinfotag[style*="#0F9D58" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#0F9D58" i] {
+ --color: #C4EED0!important;
+ --userLabelColor: #C4EED0!important;
+}
+
+// Bronze
+.scTailwindThreadPost_headerUserinfotag[style*="#896E63" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#896E63" i] {
+ --color: #B9ABA3!important;
+ --userLabelColor: #B9ABA3!important;
+}
+
+// Silver
+.scTailwindThreadPost_headerUserinfotag[style*="#5F6368" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#5F6368" i] {
+ --color: #C4C7C5!important;
+ --userLabelColor: #C4C7C5!important;
+}
+
+// Gold
+.scTailwindThreadPost_headerUserinfotag[style*="#E37400" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#E37400" i] {
+ --color: #F09D00!important;
+ --userLabelColor: #F09D00!important;
+}
+
+// Platinum
+.scTailwindThreadPost_headerUserinfotag[style*="#455A64" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#455A64" i] {
+ --color: #E3E3E3!important;
+ --userLabelColor: #E3E3E3!important;
+}
+
+// Diamond, Community Specialist, Community Manager and Google Employee
+.scTailwindThreadPost_headerUserinfotag[style*="#1A73E8" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#1A73E8" i] {
+ --color: #A8C7FA!important;
+ --userLabelColor: #A8C7FA!important;
+}