IconButton: use opacity instead of hsla to avoid svg transparency issues (improves status icons)

app/soapbox/components/icon_button.js

@@ -164,7 +164,7 @@ export default class IconButton extends React.PureComponent {
             tabIndex={tabIndex}
             disabled={disabled}
           >
-            <div style={style}>
+            <div style={src ? {} : style}>
               {emoji
                 ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
                 : <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}

app/styles/components/emoji-reacts.scss

@@ -128,20 +128,28 @@
   @media (max-width: 455px) {
     position: static;
   }
-
-  .svg-icon {
-    height: 24px !important;
-  }
 }
 
+.status__action-bar,
 .detailed-status__action-bar {
   .svg-icon {
-    width: 24px;
+    width: 20px;
     height: 20px;
   }
 
-  &--favourite .svg-icon {
-    height: 24px !important;
+  svg.icon-tabler {
+    // Tabler icons are a little thicker than Feather icons
+    stroke-width: 1.6px !important;
+  }
+}
+
+// This icon is a little different than the others...
+.status__action-bar__counter--favourite,
+.detailed-status__button--favourite {
+  .svg-icon {
+    width: 26px !important;
+    height: 26px !important;
+    transform: translateY(-1px);
   }
 }
 

app/styles/ui.scss

@@ -1,11 +1,12 @@
 .icon-button {
   display: inline-block;
   padding: 0;
-  color: hsla(var(--primary-text-color_hsl), 0.4);
+  color: var(--primary-text-color);
   border: 0;
   background: transparent;
   cursor: pointer;
   transition: color 100ms ease-in;
+  opacity: 0.4;
 
   i.fa {
     margin: 0;
@@ -14,17 +15,18 @@
   &:hover,
   &:active,
   &:focus {
-    color: hsla(var(--primary-text-color_hsl), 0.6);
+    opacity: 0.6;
     transition: color 200ms ease-out;
   }
 
   &.disabled {
-    color: hsla(var(--primary-text-color_hsl), 0.2);
+    opacity: 0.2;
     cursor: default;
   }
 
   &.active {
     color: var(--highlight-text-color);
+    opacity: 1;
   }
 
   &::-moz-focus-inner {
@@ -39,6 +41,7 @@
 
   &.inverted {
     color: var(--primary-text-color--faint);
+    opacity: 1;
 
     &:hover,
     &:active,
@@ -65,6 +68,7 @@
     color: var(--primary-text-color--faint);
     border-radius: 6px;
     padding: 2px;
+    opacity: 1;
 
     > div {
       display: flex;