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 (element-hq/element-web#8111).

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;
 }

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 {

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");
+
+        let onClick = null;
+        let hasStatus = false;
 
-        const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : 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}