diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index 6cbce68745..e219c0c5e4 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -45,3 +45,46 @@ limitations under the License.
* big the content of the iframe is. */
height: 1.5em;
}
+
+.mx_MFileBody_info {
+ background-color: $message-body-panel-bg-color;
+ border-radius: 4px;
+ width: 270px;
+ padding: 8px;
+ color: $message-body-panel-fg-color;
+
+ .mx_MFileBody_info_icon {
+ background-color: $message-body-panel-icon-bg-color;
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ position: relative;
+ vertical-align: middle;
+ margin-right: 12px;
+
+ &::before {
+ content: '';
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: cover;
+ mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
+ background-color: $message-body-panel-fg-color;
+ width: 13px;
+ height: 15px;
+
+ position: absolute;
+ top: 8px;
+ left: 9px;
+ }
+ }
+
+ .mx_MFileBody_info_filename {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: inline-block;
+ width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
+ vertical-align: middle;
+ }
+}
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 792c2f1f58..21baa795e6 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -181,8 +181,7 @@ $irc-line-height: $font-18px;
> span {
display: flex;
- > .mx_SenderProfile_name,
- > .mx_SenderProfile_aux {
+ > .mx_SenderProfile_name {
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
@@ -212,8 +211,7 @@ $irc-line-height: $font-18px;
background: transparent;
> span {
- > .mx_SenderProfile_name,
- > .mx_SenderProfile_aux {
+ > .mx_SenderProfile_name {
min-width: inherit;
}
}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 6c0e6d301d..a54fdf411c 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -200,6 +200,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color;
+$message-body-panel-bg-color: #21262c82;
+$message-body-panel-icon-bg-color: #8e99a4;
+$message-body-panel-fg-color: $primary-fg-color;
+
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 92b55e7c7d..9541a160f8 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -195,6 +195,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color;
+$message-body-panel-bg-color: #21262c82;
+$message-body-panel-icon-bg-color: #8e99a4;
+$message-body-panel-fg-color: $primary-fg-color;
+
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index d6ac54c364..172eea3266 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -320,6 +320,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
+$message-body-panel-bg-color: #e3e8f082;
+$message-body-panel-icon-bg-color: #ffffff;
+$message-body-panel-fg-color: $muted-fg-color;
+
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 4a2bafb50a..6781a26639 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -318,6 +318,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
+$message-body-panel-bg-color: #e3e8f082;
+$message-body-panel-icon-bg-color: #ffffff;
+$message-body-panel-fg-color: $muted-fg-color;
+
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 37f85a108f..587dee4513 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -105,7 +105,7 @@ export default class MAudioBody extends React.Component {
return (
-