Add CI to run rethemendex.sh (#9577)

.github/workflows/static_analysis.yaml

@@ -76,6 +76,16 @@ jobs:
     name: "i18n Check"
     uses: matrix-org/matrix-react-sdk/.github/workflows/i18n_check.yml@develop
 
+  rethemendex_lint:
+    name: "Rethemendex Check"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: ./res/css/rethemendex.sh
+
+      - run: git diff --exit-code
+
   js_lint:
     name: "ESLint"
     runs-on: ubuntu-latest

res/css/_common.pcss

@@ -793,3 +793,56 @@ legend {
     min-width: 18px;
     background-color: $secondary-content !important;
 }
+
+@define-mixin composerButtonHighLight {
+    background: rgba($accent, 0.25);
+    /* make the icon the accent color too */
+    &::before {
+        background-color: $accent !important;
+    }
+}
+
+@define-mixin composerButton $border-radius,$hover-color {
+    --size: 26px;
+    position: relative;
+    cursor: pointer;
+    height: var(--size);
+    line-height: var(--size);
+    width: auto;
+    padding-left: var(--size);
+    border-radius: $border-radius;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        height: 20px;
+        width: 20px;
+        background-color: $icon-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 0;
+        width: var(--size);
+        height: var(--size);
+        border-radius: $border-radius;
+    }
+
+    &:hover {
+        &::after {
+            background: rgba($hover-color, 0.1);
+        }
+
+        &::before {
+            background-color: $hover-color;
+        }
+    }
+}

res/css/_components.pcss

@@ -260,8 +260,8 @@
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
-@import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
+@import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
 @import "./views/rooms/_EventTile.pcss";

res/css/views/rooms/_EmojiButton.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_MessageComposerButton.pcss";
-
 .mx_EmojiButton {
     @mixin composerButton 50%,$accent;
 }

res/css/views/rooms/_MessageComposer.pcss

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_MessageComposerButton.pcss";
-
 .mx_MessageComposer_wrapper {
     vertical-align: middle;
     margin: auto;