Fix logo button style (#15428)

* Fix bell button rtl style

* Remove size and style props from button component

* Fix logo button style

* Update jest snapshot

app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap

@@ -4,13 +4,6 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] =
 <button
   className="button button-secondary"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -18,13 +11,6 @@ exports[`<Button /> renders a button element 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -33,13 +19,6 @@ exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
   className="button"
   disabled={true}
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -47,13 +26,6 @@ exports[`<Button /> renders class="button--block" if props.block given 1`] = `
 <button
   className="button button--block"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -61,13 +33,6 @@ exports[`<Button /> renders the children 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   <p>
     children
@@ -79,13 +44,6 @@ exports[`<Button /> renders the given text 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   foo
 </button>
@@ -95,13 +53,6 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   foo
 </button>

app/javascript/mastodon/components/button.js

@@ -10,17 +10,11 @@ export default class Button extends React.PureComponent {
     disabled: PropTypes.bool,
     block: PropTypes.bool,
     secondary: PropTypes.bool,
-    size: PropTypes.number,
     className: PropTypes.string,
     title: PropTypes.string,
-    style: PropTypes.object,
     children: PropTypes.node,
   };
 
-  static defaultProps = {
-    size: 36,
-  };
-
   handleClick = (e) => {
     if (!this.props.disabled) {
       this.props.onClick(e);
@@ -36,13 +30,6 @@ export default class Button extends React.PureComponent {
   }
 
   render () {
-    const style = {
-      padding: `0 ${this.props.size / 2.25}px`,
-      height: `${this.props.size}px`,
-      lineHeight: `${this.props.size}px`,
-      ...this.props.style,
-    };
-
     const className = classNames('button', this.props.className, {
       'button-secondary': this.props.secondary,
       'button--block': this.props.block,
@@ -54,7 +41,6 @@ export default class Button extends React.PureComponent {
         disabled={this.props.disabled}
         onClick={this.handleClick}
         ref={this.setRef}
-        style={style}
         title={this.props.title}
       >
         {this.props.text || this.props.children}

app/javascript/mastodon/features/account/components/header.js

@@ -164,13 +164,17 @@ class Header extends ImmutablePureComponent {
       info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>);
     }
 
+    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
+      bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
+    }
+
     if (me !== account.get('id')) {
       if (!account.get('relationship')) { // Wait until the relationship is loaded
         actionBtn = '';
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
+        actionBtn = <Button className={classNames('logo-button', { 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} style={account.getIn(['relationship', 'following']) && { padding: '0 10px', 'min-width': '88px' }} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }
@@ -178,10 +182,6 @@ class Header extends ImmutablePureComponent {
       actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />;
     }
 
-    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
-      bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
-    }
-
     if (account.get('moved') && !account.getIn(['relationship', 'following'])) {
       actionBtn = '';
     }

app/javascript/styles/mastodon/components.scss

@@ -154,6 +154,11 @@
     display: block;
     width: 100%;
   }
+
+  .layout-multiple-columns &.button--with-bell {
+    font-size: 12px;
+    padding: 0 8px;
+  }
 }
 
 .column__wrapper {

app/javascript/styles/mastodon/containers.scss

@@ -444,6 +444,11 @@
       }
     }
 
+    .logo-button {
+      line-height: 36px;
+      padding: 3px 15px;
+    }
+
     &__image {
       border-radius: 4px 4px 0 0;
       overflow: hidden;

app/javascript/styles/mastodon/rtl.scss

@@ -170,6 +170,11 @@ body.rtl {
     right: 42px;
   }
 
+  .account__header__tabs__buttons > .icon-button {
+    margin-right: 0;
+    margin-left: 8px;
+  }
+
   .account__avatar-overlay-overlay {
     right: auto;
     left: 0;

app/javascript/styles/mastodon/statuses.scss

@@ -83,9 +83,14 @@
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 36px;
+  line-height: 16px;
   height: auto;
-  padding: 3px 15px;
+  min-height: 36px;
+  min-width: 88px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  padding: 0 15px;
   border: 0;
 
   svg {