Update design of files list in right panel (#144)

* Update design of files list in right panel

Signed-off-by: Michael Telatynski <[email protected]>

* Make i18n script happier

Signed-off-by: Michael Telatynski <[email protected]>

* Improve coverage

Signed-off-by: Michael Telatynski <[email protected]>

* Improve coverage

Signed-off-by: Michael Telatynski <[email protected]>

* Improve coverage

Signed-off-by: Michael Telatynski <[email protected]>

* Discard changes to src/components/structures/MessagePanel.tsx

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Update tests

Signed-off-by: Michael Telatynski <[email protected]>

* Fix flaky screenshot test

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/e2e/right-panel/file-panel.spec.ts

@@ -84,7 +84,7 @@ test.describe("FilePanel", () => {
             await expect(filePanelMessageList.locator(".mx_EventTile")).toHaveCount(3);
 
             // Assert that the download links are rendered
-            await expect(filePanelMessageList.locator(".mx_MFileBody_download")).toHaveCount(3);
+            await expect(filePanelMessageList.locator(".mx_MFileBody_download,.mx_MFileBody_info")).toHaveCount(3);
 
             // Assert that the sender of the files is rendered on all of the tiles
             await expect(filePanelMessageList.getByText(NAME)).toHaveCount(3);
@@ -176,8 +176,7 @@ test.describe("FilePanel", () => {
             // Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
             // See: https://github.com/vector-im/element-web/issues/24866
             await expect(tile.locator(".mx_MFileBody_info_filename", { hasText: size })).toBeVisible();
-            await expect(tile.locator(".mx_MFileBody_download a", { hasText: size })).toBeVisible();
-            await expect(tile.locator(".mx_MFileBody_download .mx_MImageBody_size", { hasText: size })).toBeVisible();
+            await expect(tile.locator(".mx_MFileBody_info", { hasText: size })).toBeVisible();
         });
     });
 

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png

@@ -20,70 +20,51 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_RoomView_MessageList {
         width: 100%;
-
-        h2 {
-            display: none;
-        }
+        gap: var(--cpd-space-6x);
     }
 
     /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
    we should make EventTile a base CSS class and customise it specifically
    for usage in {Message,File,Notification}Panel. */
 
-    .mx_EventTile_avatar {
-        display: none;
-    }
-
     /* Overrides for the attachment body tiles */
     .mx_EventTile {
         word-break: break-word;
-        margin-top: 10px;
         padding-top: 0;
 
-        .mx_EventTile_line {
-            padding-inline-start: 0;
+        & + .mx_EventTile {
+            border-top: 1px solid var(--cpd-color-gray-400);
+            padding-top: var(--cpd-space-6x);
         }
 
-        .mx_MFileBody {
-            line-height: 2.4rem;
+        .mx_EventTile_line {
+            padding-inline-start: 0;
         }
 
         .mx_MFileBody_download {
-            padding-top: $spacing-8;
-            display: flex;
-            justify-content: space-between;
-            font: var(--cpd-font-body-md-regular);
-            color: $event-timestamp-color;
-
-            .mx_MImageBody_size {
-                font: var(--cpd-font-body-md-regular);
-                text-align: right;
-                white-space: nowrap;
-            }
-        }
-
-        .mx_MFileBody_downloadLink {
-            flex: 1 1 auto;
-            color: $light-fg-color;
+            margin-top: var(--cpd-space-4x);
         }
 
         /* anchor link as wrapper */
         .mx_EventTile_senderDetailsLink {
             text-decoration: none;
+            margin-bottom: var(--cpd-space-1x);
+            display: block;
 
             .mx_EventTile_senderDetails {
                 display: flex;
-                justify-content: space-between;
                 margin-top: -2px;
+                gap: var(--cpd-space-2x);
+                align-items: center;
 
                 .mx_DisambiguatedProfile {
                     color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
                 }
 
                 .mx_MessageTimestamp {
-                    text-align: right;
-                    color: $secondary-content;
-                    font: var(--cpd-font-body-sm-regular);
+                    margin-left: auto;
+                    font: var(--cpd-font-body-xs-regular);
+                    color: var(--cpd-color-text-secondary);
                 }
             }
         }

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png

@@ -8,25 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MFileBody_download {
     color: $accent;
-
-    .mx_MFileBody_download_icon {
-        /* 12px instead of 14px to better match surrounding font size */
-        width: 12px;
-        height: 12px;
-        mask-size: 12px;
-
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-image: url("$(res)/img/download.svg");
-        background-color: $accent;
-        display: inline-block;
-    }
-}
-
-.mx_MFileBody_download a {
-    color: $accent;
-    text-decoration: none;
-    cursor: pointer;
+    height: var(--cpd-space-9x);
 }
 
 .mx_MFileBody_download object {
@@ -43,12 +25,6 @@ Please see LICENSE files in the repository root for full details.
     padding: 0px;
     border: none;
     width: 100%;
-    /* Set the height of the iframe to be 1 line of text.
-     * Iframes don't automatically size themselves to fit their content.
-     * So either we have to fix the height of the iframe using CSS or
-     * use javascript's cross-origin postMessage API to communicate how
-     * big the content of the iframe is. */
-    height: 1.5em;
 }
 
 .mx_MFileBody_info {
@@ -81,6 +57,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MFileBody_info_filename {
+        font: var(--cpd-font-body-md-regular);
+        color: var(--cpd-color-text-primary);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;