From eae1e4c9aa5395a01a2970153d3bfb10b49950a4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 14 Jan 2019 10:26:11 -0600
Subject: [PATCH] Tweak custom status avatar ring

Adjusts the appearance of the avatar ring to match the latest comps.

In addition, we now always render the surrounding button element, which
simplifies styling since the same size is now occupied both with and without the
feature.

This improves alignment between text in the composer and text in the message
history (https://github.com/vector-im/riot-web/issues/8111).
---
 .../avatars/_MemberStatusMessageAvatar.scss   | 16 +++++++++++----
 res/css/views/rooms/_MessageComposer.scss     |  2 +-
 .../avatars/MemberStatusMessageAvatar.js      | 20 +++++++++++--------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/res/css/views/avatars/_MemberStatusMessageAvatar.scss b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
index 29cae9df34..03e7fdd188 100644
--- a/res/css/views/avatars/_MemberStatusMessageAvatar.scss
+++ b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
@@ -14,8 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberStatusMessageAvatar_hasStatus {
-    border: 2px solid $accent-color;
-    border-radius: 40px;
-    padding-right: 0 !important; /* Override AccessibleButton styling */
+.mx_MemberStatusMessageAvatar .mx_BaseAvatar {
+    padding: 1.5px;
+    border: 1.2px solid transparent;
+    border-radius: 14px;
+}
+
+.mx_MemberStatusMessageAvatar .mx_BaseAvatar_initial {
+    left: 1.5px;
+}
+
+.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
+    border-color: $accent-color;
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index c1acf56232..4a052482ad 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -58,7 +58,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
-    padding: 0 28px;
+    padding: 0 27px;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.js
index aebd1741b7..5118a25cdb 100644
--- a/src/components/views/avatars/MemberStatusMessageAvatar.js
+++ b/src/components/views/avatars/MemberStatusMessageAvatar.js
@@ -96,21 +96,25 @@ export default class MemberStatusMessageAvatar extends React.Component {
     };
 
     render() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return <MemberAvatar member={this.props.member}
-                                 width={this.props.width}
-                                 height={this.props.height}
-                                 resizeMethod={this.props.resizeMethod} />;
-        }
+        const customStatusFeatureEnabled =
+            SettingsStore.isFeatureEnabled("feature_custom_status");
 
-        const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : false;
+        let onClick = null;
+        let hasStatus = false;
+
+        if (customStatusFeatureEnabled) {
+            onClick = this._onClick;
+            if (this.props.member.user) {
+                hasStatus = !!this.props.member.user._unstable_statusMessage;
+            }
+        }
 
         const classes = classNames({
             "mx_MemberStatusMessageAvatar": true,
             "mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
         });
 
-        return <AccessibleButton onClick={this._onClick} className={classes} element="div">
+        return <AccessibleButton onClick={onClick} className={classes} element="div">
             <MemberAvatar member={this.props.member}
                           width={this.props.width}
                           height={this.props.height}