Add search icon and fix alignments for search for 4.3.0

ronilaukkarinen · Oct 30, 2023 · 490a746 · 490a746
1 parent 748fe78
commit 490a746
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss b/app/javascript/styles/mastodon-bird-ui/layout-multiple-columns.scss
@@ -2152,17 +2152,20 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
 
 /* Search */
 .layout-multiple-columns .search .search__icon .icon-search {
-  background-color: var(--color-mud);
   background-image: var(--icon-search);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 20px;
   display: inline-block;
   height: 24px;
-  top: 10px;
+  top: 9px;
   width: 24px;
 }
 
+.layout-multiple-columns .search .search__icon .icon-search path {
+  display: none;
+}
+
 .layout-multiple-columns input.setting-text,
 .layout-multiple-columns .search__input {
   background-color: var(--color-mud);
@@ -2639,7 +2642,7 @@ body.embed .button.logo-button:hover,
 }
 
 .layout-multiple-columns .search__icon .icon-times-circle {
-  top: 14px;
+  top: 9px;
 }
 
 .layout-multiple-columns .setting-text__toolbar {
@@ -3988,7 +3991,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 /* stylelint-disable-next-line */
 .layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .icon-star {
-  left: -29px;
+  left: -27px;
 }
 
 /* stylelint-disable-next-line */

diff --git a/app/javascript/styles/mastodon-bird-ui/layout-single-column.scss b/app/javascript/styles/mastodon-bird-ui/layout-single-column.scss
@@ -2183,17 +2183,20 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
 
 /* Search */
 .layout-single-column .search .search__icon .icon-search {
-  background-color: var(--color-mud);
   background-image: var(--icon-search);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 20px;
   display: inline-block;
   height: 24px;
-  top: 10px;
+  top: 9px;
   width: 24px;
 }
 
+.layout-multiple-columns .search .search__icon .icon-search path {
+  display: none;
+}
+
 .layout-single-column input.setting-text,
 .layout-single-column .search__input {
   background-color: var(--color-mud);
@@ -2690,7 +2693,7 @@ body.embed .button.logo-button:hover,
 }
 
 .layout-single-column .search__icon .icon-times-circle {
-  top: 14px;
+  top: 9px;
 }
 
 .layout-single-column .setting-text__toolbar {
@@ -4087,7 +4090,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 /* stylelint-disable-next-line */
 .layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .icon-star {
-  left: -29px;
+  left: -27px;
 }
 
 /* stylelint-disable-next-line */