Improve pills

res/css/_components.scss

@@ -127,6 +127,7 @@
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_FacePile.scss";
+@import "./views/elements/_Pill.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";

res/css/structures/_RoomDirectory.scss

@@ -154,7 +154,7 @@ limitations under the License.
     line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
+    background-color: $pill-bg-color;
 }
 
 .mx_RoomDirectory_topic {

res/css/views/elements/_Pill.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2021 Šimon Brandner <[email protected]>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Pill {
+    padding: $font-1px 0.4em $font-1px 0;
+    line-height: $font-17px;
+    border-radius: $font-16px;
+    vertical-align: text-top;
+    display: inline-flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    color: $accent-fg-color !important; // To override .markdown-body
+    background-color: $pill-bg-color !important; // To override .markdown-body
+
+    &.mx_UserPill_me,
+    &.mx_AtRoomPill {
+        background-color: $warning-color !important; // To override .markdown-body
+    }
+
+    &:hover {
+        background-color: $pill-hover-bg-color !important; // To override .markdown-body
+    }
+
+    &.mx_UserPill_me:hover {
+        background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
+    }
+
+    // We don't want to indicate clickability
+    &.mx_AtRoomPill:hover {
+        background-color: $warning-color !important; // To override .markdown-body
+        cursor: unset;
+    }
+
+    &.mx_SpacePill {
+        border-radius: $font-5px;
+
+        .mx_BaseAvatar {
+            border-radius: $font-5px;
+        }
+    }
+
+    .mx_BaseAvatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 10rem;
+        margin-right: 0.24rem;
+    }
+
+    a& {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: calc(100% - 1ch);
+        text-decoration: none !important; // To override .markdown-body
+    }
+}

res/css/views/elements/_RichText.scss

@@ -2,90 +2,6 @@
 // naming scheme; it's completely unclear where or how they're being used
 // --Matthew
 
-.mx_UserPill,
-.mx_RoomPill,
-.mx_GroupPill,
-.mx_AtRoomPill {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    border-radius: $font-16px;
-    line-height: $font-15px;
-    padding-left: 0;
-}
-
-a.mx_Pill {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: calc(100% - 1ch);
-}
-
-.mx_Pill {
-    padding: $font-1px;
-    padding-right: 0.4em;
-    vertical-align: text-top;
-    line-height: $font-17px;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
-    color: $accent-fg-color;
-    background-color: $rte-group-pill-color;
-}
-
-/* More specific to override `.markdown-body a` text-decoration */
-.mx_EventTile_content .markdown-body a.mx_Pill {
-    text-decoration: none;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_UserPill,
-.mx_UserPill {
-    color: $primary-fg-color;
-    background-color: $other-user-pill-bg-color;
-}
-
-.mx_UserPill_selected {
-    background-color: $accent-color !important;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
-.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
-.mx_EventTile_content .mx_AtRoomPill,
-.mx_MessageComposer_input .mx_AtRoomPill {
-    color: $accent-fg-color;
-    background-color: $mention-user-pill-bg-color;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_RoomPill,
-.mx_GroupPill {
-    color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
-}
-
-.mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill,
-.mx_EventTile_body .mx_GroupPill {
-    cursor: pointer;
-}
-
-.mx_UserPill .mx_BaseAvatar,
-.mx_RoomPill .mx_BaseAvatar,
-.mx_GroupPill .mx_BaseAvatar,
-.mx_AtRoomPill .mx_BaseAvatar {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    border-radius: 10rem;
-    margin-right: 0.24rem;
-}
-
 .mx_Markdown_BOLD {
     font-weight: bold;
 }

res/css/views/rooms/_BasicMessageComposer.scss

@@ -45,8 +45,14 @@ limitations under the License.
         overflow-x: hidden;
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
-            span.mx_UserPill, span.mx_RoomPill {
+            span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill {
                 position: relative;
+                cursor: unset; // We don't want indicate clickability
+
+                &:hover {
+                    // We don't want indicate clickability | To override the overriding of .markdown-body
+                    background-color: $pill-bg-color !important;
+                }
 
                 // avatar psuedo element
                 &::before {
@@ -65,6 +71,10 @@ limitations under the License.
                     font-size: $font-10-4px;
                 }
             }
+
+            span.mx_SpacePill::before {
+                border-radius: $font-5px;
+            }
         }
 
         &.mx_BasicMessageComposer_input_disabled {

res/themes/dark/css/_dark.scss

@@ -29,10 +29,8 @@ $light-fg-color: $header-panel-text-secondary-color;
 // used for focusing form controls
 $focus-bg-color: $room-highlight-color;
 
-$mention-user-pill-bg-color: $warning-color;
-$other-user-pill-bg-color: $room-highlight-color;
-$rte-room-pill-color: $room-highlight-color;
-$rte-group-pill-color: $room-highlight-color;
+$pill-bg-color: $room-highlight-color;
+$pill-hover-bg-color: #545a66;
 
 // informational plinth
 $info-plinth-bg-color: $header-panel-bg-color;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -29,10 +29,8 @@ $light-fg-color: $header-panel-text-secondary-color;
 // used for focusing form controls
 $focus-bg-color: $room-highlight-color;
 
-$mention-user-pill-bg-color: $warning-color;
-$other-user-pill-bg-color: $room-highlight-color;
-$rte-room-pill-color: $room-highlight-color;
-$rte-group-pill-color: $room-highlight-color;
+$pill-bg-color: $room-highlight-color;
+$pill-hover-bg-color: #545a66;
 
 // informational plinth
 $info-plinth-bg-color: $header-panel-bg-color;

res/themes/legacy-light/css/_legacy-light.scss

@@ -8,9 +8,9 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: nunito, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji';
 
 // unified palette
 // try to use these colors when possible
@@ -53,8 +53,6 @@ $orange-warning-color: #ff8d13; // used for true warnings
 // background colour for warnings
 $warning-bg-color: #df2a8b;
 $info-bg-color: #2a9edf;
-$mention-user-pill-bg-color: $warning-color;
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 
 // pinned events indicator
 $pinned-unread-color: $notice-primary-color;
@@ -160,8 +158,9 @@ $voip-accept-color: #80f480;
 
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
-$rte-group-pill-color: #aaa;
+
+$pill-bg-color: #aaa;
+$pill-hover-bg-color: #ccc;
 
 $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
@@ -383,7 +382,7 @@ $composer-shadow-color: tranparent;
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

res/themes/light/css/_light.scss

@@ -8,9 +8,9 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: inter, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji';
 
 // unified palette
 // try to use these colors when possible
@@ -50,8 +50,6 @@ $orange-warning-color: #ff8d13; // used for true warnings
 // background colour for warnings
 $warning-bg-color: #DF2A8B;
 $info-bg-color: #2A9EDF;
-$mention-user-pill-bg-color: $warning-color;
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 
 // informational plinth
 $info-plinth-bg-color: #f7f7f7;
@@ -149,8 +147,9 @@ $voip-accept-color: #80f480;
 
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
-$rte-group-pill-color: #aaa;
+
+$pill-bg-color: #aaa;
+$pill-hover-bg-color: #ccc;
 
 $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
@@ -385,7 +384,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }