Minor accessibility improvements

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/account/components/header.js

@@ -323,13 +323,13 @@ class Header extends ImmutablePureComponent {
             {info}
           </div>
 
-          <div className='account__header__subscribe'>
-            <SubscriptionButton account={account} />
-          </div>
-
           {header && <a className='account__header__header' href={account.get('header')} onClick={this.handleHeaderClick} target='_blank'>
             <StillImage src={account.get('header')} alt='' className='parallax' />
           </a>}
+
+          <div className='account__header__subscribe'>
+            <SubscriptionButton account={account} />
+          </div>
         </div>
 
         <div className='account__header__bar'>

app/soapbox/features/account_timeline/index.js

@@ -193,7 +193,7 @@ class AccountTimeline extends ImmutablePureComponent {
         </div>
         <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
           <div className='column-header__collapsible-inner'>
-            <ColumnSettingsContainer />
+            {(!collapsed || animating) && <ColumnSettingsContainer />}
           </div>
         </div>
         <StatusList

app/soapbox/features/reactions/index.js

@@ -73,7 +73,7 @@ class Reactions extends ImmutablePureComponent {
 
   render() {
     const { params, reactions, accounts, status } = this.props;
-    const { username, statusId } = params;
+    const { username, statusId, reaction } = params;
 
     const back = `/@${username}/posts/${statusId}`;
 
@@ -95,13 +95,14 @@ class Reactions extends ImmutablePureComponent {
 
     const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;
 
+    console.log(params.reaction);
     return (
       <Column back={back}>
         {
           reactions.size > 0 && (
             <div className='reaction__filter-bar'>
-              <button onClick={this.handleFilterChange('')}>All</button>
-              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
+              <button className={!params.reaction ? 'active' : ''} onClick={this.handleFilterChange('')}>All</button>
+              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} className={params.reaction === reaction.name ? 'active' : ''} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
             </div>
           )
         }

app/styles/accounts.scss

@@ -524,6 +524,7 @@ a .account__avatar {
   border-radius: 4px;
   opacity: 0.7;
   white-space: nowrap;
+  transition: 0.2s;
 
   &:hover {
     opacity: 1;

app/styles/components/account-header.scss

@@ -34,6 +34,12 @@
       border-radius: 4px;
       opacity: 0.7;
 
+      &:active,
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+
       &:not(.button-active) i.fa {
         margin: 0;
       }

app/styles/ui.scss

@@ -638,9 +638,14 @@
     position: relative;
     background: transparent;
 
+    &:active,
+    &:focus,
+    &:hover,
     &.active {
       color: var(--primary-text-color);
+    }
 
+    &.active {
       &::before,
       &::after {
         display: block;
@@ -668,6 +673,7 @@
   overflow-x: auto;
   overflow-y: hidden;
 
+  button,
   a {
     flex: unset;
     padding: 15px 24px;