Fix regression with wrong alignment of the bell icon when activated

CHANGELOG.md

@@ -1,9 +1,10 @@
-### 1.8.0rc3: 2023-10-09
+### 1.8.0: 2023-10-29
 
 * Improve button border colors in ultra accessible theme
 * Do not animate when prefers-reduced-motion is set to reduce, Fixes #95
 * Fix profile button icon not horizontally centered
 * Fix regression with icon button aligning when not focused
+* Fix regression with wrong alignment of the bell icon when activated
 
 ### 1.7.9: 2023-10-04
 

layout-multiple-columns.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.8.0rc4 */
+   1.8.0 */
 
 /* CSS variables */
 :root {
@@ -2558,6 +2558,7 @@ body.embed .button.logo-button,
 
 /* stylelint-disable-next-line */
 .layout-multiple-columns .account__header__tabs__buttons .icon-button {
+  align-items: center;
   border-bottom-left-radius: 9999px;
   border-bottom-right-radius: 9999px;
   border-top-left-radius: 9999px;
@@ -2566,8 +2567,9 @@ body.embed .button.logo-button,
   justify-content: center;
 }
 
-.layout-multiple-columns .account__header__tabs__buttons .icon-button:not(.active) {
-  align-items: center;
+/* Exception for close icon that seem to align wrongly when active */
+.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa.fa-close {
+  align-self: start;
 }
 
 body.embed .button.logo-button:hover,

layout-single-column.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.8.0rc4 */
+   1.8.0 */
 
 /* CSS variables */
 :root {
@@ -2574,6 +2574,7 @@ body.embed .button.logo-button,
 
 /* stylelint-disable-next-line */
 .layout-single-column .account__header__tabs__buttons .icon-button {
+  align-items: center;
   border-bottom-left-radius: 9999px;
   border-bottom-right-radius: 9999px;
   border-top-left-radius: 9999px;
@@ -2582,8 +2583,9 @@ body.embed .button.logo-button,
   justify-content: center;
 }
 
-.layout-single-column .account__header__tabs__buttons .icon-button:not(.active) {
-  align-items: center;
+/* Exception for close icon that seem to align wrongly when active */
+.layout-single-column .account__header__tabs__buttons .icon-button .fa.fa-close {
+  align-self: start;
 }
 
 body.embed .button.logo-button:hover,
@@ -3088,10 +3090,19 @@ body.embed .button.logo-button:hover,
   content: var(--icon-home-notification-active);
 }
 
-.layout-single-column .column-link .fa-home::before {
-  content: var(--icon-home);
+/* Replace the original icon (after 4.3.0) */
+.layout-single-column .column-link .icon-home path {
+  display: none;
+}
+
+.layout-single-column .column-link .icon-home {
+  background-image: var(--icon-home);
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+  display: block;
+  height: 26px;
   position: relative;
-  top: 1px;
+  width: 26px;
 }
 
 /* Federated icon */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "1.8.0rc4",
+  "version": "1.8.0",
   "description": "",
   "main": "index.js",
   "scripts": {