diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2020-10-04 15:02:36 +0200 |
|---|---|---|
| committer | Thibaut Girka <thib@sitedethib.com> | 2020-10-26 19:51:09 +0100 |
| commit | 47edac871c7e20ddc5bc106e3976891873b4f346 (patch) | |
| tree | 270a1a9c001fa0ce4167b94fca6e4ebcc560064e | |
| parent | 8f950e540b83e13748c0df9bc30afbb06ef26f3e (diff) | |
[Glitch] Fix regressions in icon buttons in web UI
Port a549415868fe23e0afaf258c17afafac117d0163 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
3 files changed, 13 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js index 51540d17d..58d3568dd 100644 --- a/app/javascript/flavours/glitch/components/icon_button.js +++ b/app/javascript/flavours/glitch/components/icon_button.js @@ -123,6 +123,7 @@ export default class IconButton extends React.PureComponent { activate, deactivate, overlayed: overlay, + 'icon-button--with-counter': typeof counter !== 'undefined', }); if (typeof counter !== 'undefined') { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 337005a59..0614278e2 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -144,8 +144,7 @@ } .icon-button { - display: inline-flex; - align-items: center; + display: inline-block; padding: 0; color: $action-button-color; border: 0; @@ -154,6 +153,7 @@ cursor: pointer; transition: all 100ms ease-in; transition-property: background-color, color; + text-decoration: none; &:hover, &:active, @@ -228,6 +228,12 @@ } } + &--with-counter { + display: inline-flex; + align-items: center; + width: auto !important; + } + &__counter { display: inline-block; width: 14px; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index c589d935a..7ec377bad 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -568,6 +568,10 @@ .status__action-bar-button { margin-right: 18px; + + &.icon-button--with-counter { + margin-right: 14px; + } } .status__action-bar-dropdown { |