diff --git a/frontend/css/fresh-releases.less b/frontend/css/fresh-releases.less index 7f6f45ce99..d4d148fc37 100644 --- a/frontend/css/fresh-releases.less +++ b/frontend/css/fresh-releases.less @@ -19,6 +19,10 @@ justify-content: space-between; padding-bottom: 0.5rem; margin-bottom: 1rem; + + @media screen and (max-width: @screen-md) { + justify-content: center; + } } .fresh-releases-row { diff --git a/frontend/css/pill.less b/frontend/css/pill.less index 6c86edb553..76ad980457 100644 --- a/frontend/css/pill.less +++ b/frontend/css/pill.less @@ -30,4 +30,11 @@ background: transparent; border: none; } + + &.disabled, + &[disabled], + fieldset[disabled] & { + color: rgba(141, 141, 141, 0.5); + border-color: rgba(141, 141, 141, 0.5); + } } diff --git a/frontend/js/src/explore/fresh-releases/FreshReleases.tsx b/frontend/js/src/explore/fresh-releases/FreshReleases.tsx index 572dab9e8f..89f9dc8fd0 100644 --- a/frontend/js/src/explore/fresh-releases/FreshReleases.tsx +++ b/frontend/js/src/explore/fresh-releases/FreshReleases.tsx @@ -11,7 +11,6 @@ import ReleaseTimeline from "./components/ReleaseTimeline"; import Pill from "../../components/Pill"; import ReleaseCardsGrid from "./components/ReleaseCardsGrid"; import { COLOR_LB_ORANGE } from "../../utils/constants"; -import { useMediaQuery } from "./utils"; export enum DisplaySettingsPropertiesEnum { releaseTitle = "Release Title", @@ -145,14 +144,6 @@ export default function FreshReleases() { }); }; - const screenMd = useMediaQuery("(max-width: 992px)"); // @screen-md - let pillRowStyle = {}; - if (screenMd) { - pillRowStyle = { justifyContent: "center" }; - } else if (!isLoggedIn) { - pillRowStyle = { justifyContent: "flex-end" }; - } - const queryKey = pageType === PAGE_TYPE_SITEWIDE ? [ @@ -294,31 +285,30 @@ export default function FreshReleases() {