Merge pull request #6432 from matrix-org/travis/voice-messages/colours

Clean up visual style of files and voice messages

Author: turt2live

res/css/_components.scss

@@ -159,10 +159,10 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
+@import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_EventTileBubble.scss";
-@import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
@@ -172,7 +172,6 @@
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
-@import "./views/messages/_MVoiceMessageBody.scss";
 @import "./views/messages/_MediaBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
@@ -201,8 +200,8 @@
 @import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
-@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_EventBubbleTile.scss";
+@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/views/audio_messages/_AudioPlayer.scss

@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AudioPlayer_container {
+.mx_MediaBody.mx_AudioPlayer_container {
     padding: 16px 12px 12px 12px;
-    max-width: 267px; // use max to make the control fit in the files/pinned panels
 
     .mx_AudioPlayer_primaryContainer {
         display: flex;

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -18,10 +18,10 @@ limitations under the License.
 // are shared amongst multiple voice message components.
 
 // Container for live recording and playback controls
-.mx_VoiceMessagePrimaryContainer {
-    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
-    // has a 1px padding on it that we want to account for.
-    padding: 7px 12px 7px 11px;
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
+    // The waveform (right) has a 1px padding on it that we want to account for, otherwise
+    // inherit from mx_MediaBody
+    padding-right: 11px;
 
     // Cheat at alignment a bit
     display: flex;

res/css/views/messages/_MFileBody.scss

@@ -60,12 +60,6 @@ limitations under the License.
 }
 
 .mx_MFileBody_info {
-    background-color: $message-body-panel-bg-color;
-    border-radius: 12px;
-    width: 243px; // same width as a playable voice message, accounting for padding
-    padding: 6px 12px;
-    color: $message-body-panel-fg-color;
-
     .mx_MFileBody_info_icon {
         background-color: $message-body-panel-icon-bg-color;
         border-radius: 20px;

res/css/views/messages/_MVoiceMessageBody.scss

@@ -20,9 +20,11 @@ limitations under the License.
 .mx_MediaBody {
     background-color: $message-body-panel-bg-color;
     border-radius: 12px;
+    max-width: 243px; // use max-width instead of width so it fits within right panels
 
     color: $message-body-panel-fg-color;
     font-size: $font-14px;
     line-height: $font-24px;
-}
 
+    padding: 6px 12px;
+}

res/css/views/messages/_MediaBody.scss

@@ -29,8 +29,10 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         // min-height at this level so the mx_BasicMessageComposer_input
-        // still stays vertically centered when less than 50px
-        min-height: 50px;
+        // still stays vertically centered when less than 55px.
+        // We also set this to ensure the voice message recording widget
+        // doesn't cause a jump.
+        min-height: 55px;
 
         .mx_BasicMessageComposer_input {
             padding: 3px 0;

res/css/views/rooms/_SendMessageComposer.scss

@@ -209,8 +209,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #394049; // "Dark Tile"
-$message-body-panel-icon-fg-color: #21262C; // "Separator"
-$message-body-panel-icon-bg-color: $tertiary-fg-color;
+$message-body-panel-icon-fg-color: $secondary-fg-color;
+$message-body-panel-icon-bg-color: #21262C; // "System Dark"
 
 $voice-record-stop-border-color: $quaternary-fg-color;
 $voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;

res/themes/dark/css/_dark.scss

@@ -207,8 +207,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #394049;
-$message-body-panel-icon-fg-color: $primary-bg-color;
-$message-body-panel-icon-bg-color: $secondary-fg-color;
+$message-body-panel-icon-fg-color: $secondary-fg-color;
+$message-body-panel-icon-bg-color: #21262C;
 
 // See non-legacy dark for variable information
 $voice-record-stop-border-color: #6F7882;

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

@@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #E3E8F0;
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $primary-bg-color;
+$message-body-panel-icon-bg-color: #F4F6FA;
 
 // See non-legacy _light for variable information
 $voice-record-stop-symbol-color: #ff4b55;

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

@@ -327,7 +327,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #E3E8F0; // "Separator"
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $primary-bg-color;
+$message-body-panel-icon-bg-color: #F4F6FA;
 
 // These two don't change between themes. They are the $warning-color, but we don't
 // want custom themes to affect them by accident.

res/themes/light/css/_light.scss

@@ -141,7 +141,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
         let placeholder = null;
         if (this.props.showGenericPlaceholder) {
             placeholder = (
-                <div className="mx_MFileBody_info">
+                <div className="mx_MediaBody mx_MFileBody_info">
                     <span className="mx_MFileBody_info_icon" />
                     <span className="mx_MFileBody_info_filename">
                         { presentableTextForFile(content, _t("Attachment"), false) }