Add green/red indicator in the follow/unfollow button in notifications

CHANGELOG.md

@@ -1,7 +1,9 @@
-### 1.1.9rc2: 2023-03-13
+### 1.1.9rc3: 2023-03-13
 
 * Fix blur overlay on iPad
 * Fix compose form z-index on mobile
+* Add green/red indicator in the follow/unfollow button in notifications
+* Add missing stylelint-order package
 
 ### 1.1.8: 2023-03-12
 

package.json

@@ -14,6 +14,7 @@
     "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties": "^4.0.1",
     "postcss": "^8.4.21",
     "stylelint": "^15.2.0",
-    "stylelint-config-standard": "^30.0.1"
+    "stylelint-config-standard": "^30.0.1",
+    "stylelint-order": "^6.0.3"
   }
-}
+}

style.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.1.9rc2 */
+   1.1.9rc3 */
 
 /* CSS variables */
 :root {
@@ -1134,12 +1134,38 @@ a.status-card.compact .status-card__description {
   font-size: 24px;
 }
 
+/* Follow/unfollow button in notifications */
+.layout-single-column .notification .account__relationship .icon-button:focus,
+.layout-single-column .notification .account__relationship .icon-button:hover {
+  background-color: transparent;
+}
+
 .layout-single-column .notification .account__relationship .fa::before {
   /* stylelint-disable-next-line */
   color: var(--color-dim) !important;
   font-size: 20px;
 }
 
+.layout-single-column .notification .account__relationship .icon-button.active .fa::before {
+  /* stylelint-disable-next-line */
+  color: var(--color-green) !important;
+  opacity: .75;
+}
+
+.layout-single-column .notification .account__relationship .icon-button:focus .fa::before,
+.layout-single-column .notification .account__relationship .icon-button:hover .fa::before {
+  opacity: 1;
+  /* stylelint-disable-next-line */
+  color: var(--color-red) !important;
+}
+
+.layout-single-column .notification .account__relationship .icon-button:not(.active):focus .fa::before,
+.layout-single-column .notification .account__relationship .icon-button:not(.active):hover .fa::before {
+  opacity: 1;
+  /* stylelint-disable-next-line */
+  color: var(--color-green) !important;
+}
+
 .layout-single-column .account__relationship .button:hover {
   background-color: transparent;
 }