From 1e1d97a78727570bb3343aa4008b93edae3dde1d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 14 Mar 2024 10:07:29 +0100 Subject: [PATCH] Fix wrong background color on search results in web UI (#29584) --- .../compose/components/search_results.jsx | 6 ----- .../styles/mastodon/components.scss | 23 +++++-------------- app/javascript/styles/mastodon/variables.scss | 1 + 3 files changed, 7 insertions(+), 23 deletions(-) diff --git a/app/javascript/mastodon/features/compose/components/search_results.jsx b/app/javascript/mastodon/features/compose/components/search_results.jsx index 694deea04e..667662781e 100644 --- a/app/javascript/mastodon/features/compose/components/search_results.jsx +++ b/app/javascript/mastodon/features/compose/components/search_results.jsx @@ -7,7 +7,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react'; import PeopleIcon from '@/material-icons/400-24px/group.svg?react'; -import SearchIcon from '@/material-icons/400-24px/search.svg?react'; import TagIcon from '@/material-icons/400-24px/tag.svg?react'; import { Icon } from 'mastodon/components/icon'; import { LoadMore } from 'mastodon/components/load_more'; @@ -76,11 +75,6 @@ class SearchResults extends ImmutablePureComponent { return (
-
- - -
- {accounts} {hashtags} {statuses} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b6dc1abc99..6aa3588501 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3485,7 +3485,7 @@ $ui-header-height: 55px; } .column-subheading { - background: darken($ui-base-color, 4%); + background: var(--surface-background-color); color: $darker-text-color; padding: 8px 20px; font-size: 12px; @@ -4637,7 +4637,7 @@ a.status-card { } .follow_requests-unlocked_explanation { - background: darken($ui-base-color, 4%); + background: var(--surface-background-color); border-bottom: 1px solid var(--background-border-color); contain: initial; flex-grow: 0; @@ -5269,18 +5269,6 @@ a.status-card { } } -.search-results__header { - color: $dark-text-color; - background: lighten($ui-base-color, 2%); - padding: 15px; - font-weight: 500; - font-size: 16px; - cursor: default; - display: flex; - align-items: center; - gap: 5px; -} - .search-results__section { border-bottom: 1px solid var(--background-border-color); @@ -5289,8 +5277,8 @@ a.status-card { } &__header { - background: darken($ui-base-color, 4%); border-bottom: 1px solid var(--background-border-color); + background: var(--surface-background-color); padding: 15px; font-weight: 500; font-size: 14px; @@ -7159,7 +7147,7 @@ noscript { .follow-request-banner, .account-memorial-banner { padding: 20px; - background: lighten($ui-base-color, 4%); + background: var(--surface-background-color); display: flex; align-items: center; flex-direction: column; @@ -8326,7 +8314,8 @@ noscript { flex: 1 1 auto; display: flex; flex-direction: column; - background: $ui-base-color; + border: 1px solid var(--background-border-color); + border-top: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 94078d960d..2b2a295791 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -104,4 +104,5 @@ $font-monospace: 'mastodon-font-monospace' !default; --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); --background-color: #{darken($ui-base-color, 8%)}; --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)}; + --surface-background-color: #{darken($ui-base-color, 4%)}; }