diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap index 5c04e09799f..86fbba917b7 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap @@ -4,13 +4,6 @@ exports[` adds class "button-secondary" if props.secondary given 1`] = `; @@ -18,13 +11,6 @@ exports[` renders a button element 1`] = ` `; @@ -33,13 +19,6 @@ exports[` 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[` renders class="button--block" if props.block given 1`] = ` `; @@ -61,13 +33,6 @@ exports[` renders the children 1`] = ` children @@ -79,13 +44,6 @@ exports[` renders the given text 1`] = ` foo @@ -95,13 +53,6 @@ exports[` renders the props.text instead of children 1`] = ` foo diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index eb8dd7dc8eb..85b2d78ca9e 100644 --- a/app/javascript/mastodon/components/button.js +++ b/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} diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index c8fd85e1d92..b47ebed62e1 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -164,13 +164,17 @@ class Header extends ImmutablePureComponent { info.push(); } + if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { + bellBtn = ; + } + if (me !== account.get('id')) { if (!account.get('relationship')) { // Wait until the relationship is loaded actionBtn = ''; } else if (account.getIn(['relationship', 'requested'])) { - actionBtn = ; + actionBtn = ; } else if (!account.getIn(['relationship', 'blocking'])) { - actionBtn = ; + actionBtn = ; } else if (account.getIn(['relationship', 'blocking'])) { actionBtn = ; } @@ -178,10 +182,6 @@ class Header extends ImmutablePureComponent { actionBtn = ; } - if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { - bellBtn = ; - } - if (account.get('moved') && !account.getIn(['relationship', 'following'])) { actionBtn = ''; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c248f681ef0..d6385f161cc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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 { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 51d9b46b0f3..cb03013723c 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 8051e4edb5f..baacf46b9fe 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 7ae1c5a2406..b49b4c7cdd5 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/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 {
children @@ -79,13 +44,6 @@ exports[` renders the given text 1`] = ` foo @@ -95,13 +53,6 @@ exports[` renders the props.text instead of children 1`] = ` foo diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index eb8dd7dc8eb..85b2d78ca9e 100644 --- a/app/javascript/mastodon/components/button.js +++ b/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} diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index c8fd85e1d92..b47ebed62e1 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -164,13 +164,17 @@ class Header extends ImmutablePureComponent { info.push(); } + if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { + bellBtn = ; + } + if (me !== account.get('id')) { if (!account.get('relationship')) { // Wait until the relationship is loaded actionBtn = ''; } else if (account.getIn(['relationship', 'requested'])) { - actionBtn = ; + actionBtn = ; } else if (!account.getIn(['relationship', 'blocking'])) { - actionBtn = ; + actionBtn = ; } else if (account.getIn(['relationship', 'blocking'])) { actionBtn = ; } @@ -178,10 +182,6 @@ class Header extends ImmutablePureComponent { actionBtn = ; } - if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { - bellBtn = ; - } - if (account.get('moved') && !account.getIn(['relationship', 'following'])) { actionBtn = ''; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c248f681ef0..d6385f161cc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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 { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 51d9b46b0f3..cb03013723c 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 8051e4edb5f..baacf46b9fe 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 7ae1c5a2406..b49b4c7cdd5 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/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 {