Re-add margin to tiles based on EventTileBubble (#9015)

* Re-add margin to HistoryTile, which is based on EventTileBubble

Signed-off-by: Suguru Hirahara <[email protected]>

* Readd margin to the other tiles based on EventTileBubble

Signed-off-by: Suguru Hirahara <[email protected]>

* Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile

Signed-off-by: Suguru Hirahara <[email protected]>

* Cancel left value for cryptoEvent on IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/messages/_CreateEvent.scss

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateEvent {
+.mx_EventTileBubble.mx_CreateEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     &::before {
         background-color: $header-panel-text-primary-color;
         mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');

res/css/views/messages/_EventTileBubble.scss

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_EventTileBubble {
+    --EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
+
     background-color: $dark-panel-bg-color;
     padding: 10px; // TODO: Use a spacing variable
     border-radius: 8px;

res/css/views/messages/_MJitsiWidgetEvent.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MJitsiWidgetEvent {
+.mx_EventTileBubble.mx_MJitsiWidgetEvent {
     &::before {
         background-color: $header-panel-text-primary-color; // XXX: Variable abuse
         mask-image: url('$(res)/img/element-icons/call/video-call.svg');

res/css/views/messages/_common_CryptoEvent.scss

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_cryptoEvent {
+.mx_EventTileBubble.mx_cryptoEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     // white infill for the transparency
     &.mx_cryptoEvent_icon::before {
         background-color: #ffffff;

res/css/views/rooms/_EventTile.scss

@@ -74,7 +74,7 @@ $left-gutter: 64px;
     }
 
     .mx_EventTileBubble {
-        margin-block: 10px; // TODO: Use a spacing variable
+        margin-block: var(--EventTileBubble_margin-block);
     }
 
     .mx_MImageBody {
@@ -238,6 +238,10 @@ $left-gutter: 64px;
         .mx_EventTileBubble {
             position: relative;
             left: var(--EventTile_irc_line_info-inset-inline-start);
+
+            &.mx_cryptoEvent {
+                left: unset;
+            }
         }
 
         .mx_ReplyTile .mx_EventTileBubble {

res/css/views/rooms/_HistoryTile.scss

@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HistoryTile::before {
-    background-color: $header-panel-text-primary-color;
-    mask-image: url('$(res)/img/element-icons/hide.svg');
+.mx_EventTileBubble.mx_HistoryTile {
+    margin: var(--EventTileBubble_margin-block) auto;
+
+    &::before {
+        background-color: $header-panel-text-primary-color;
+        mask-image: url('$(res)/img/element-icons/hide.svg');
+    }
 }