Merge pull request #2966 from metabrainz/LB-1555

LB-1555: Fresh Releases 'For you' toggle redirects to login page, when not logged in
metabrainz · Sep 3, 2024 · 54a7fdd · 54a7fdd
2 parents bf27897 + 941af6b
commit 54a7fdd
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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() {
       </Helmet>
       <div className="releases-page-container" role="main">
         <div className="releases-page">
-          <div className="fresh-releases-pill-row" style={pillRowStyle}>
-            {isLoggedIn ? (
-              <div className="fresh-releases-row">
-                <Pill
-                  id="sitewide-releases"
-                  data-testid="sitewide-releases-pill"
-                  onClick={() => {
-                    setPageType(PAGE_TYPE_SITEWIDE);
-                    setSort("release_date");
-                  }}
-                  active={pageType === PAGE_TYPE_SITEWIDE}
-                  type="secondary"
-                >
-                  All
-                </Pill>
-                <Pill
-                  id="user-releases"
-                  onClick={() => setPageType(PAGE_TYPE_USER)}
-                  active={pageType === PAGE_TYPE_USER}
-                  type="secondary"
-                >
-                  For You
-                </Pill>
-              </div>
-            ) : null}
+          <div className="fresh-releases-pill-row">
+            <div className="fresh-releases-row">
+              <Pill
+                id="sitewide-releases"
+                data-testid="sitewide-releases-pill"
+                onClick={() => {
+                  setPageType(PAGE_TYPE_SITEWIDE);
+                  setSort("release_date");
+                }}
+                active={pageType === PAGE_TYPE_SITEWIDE}
+                type="secondary"
+              >
+                All
+              </Pill>
+              <Pill
+                id="user-releases"
+                onClick={() => setPageType(PAGE_TYPE_USER)}
+                active={pageType === PAGE_TYPE_USER}
+                type="secondary"
+                disabled={!isLoggedIn}
+              >
+                For You
+              </Pill>
+            </div>
             <div className="fresh-releases-row">
               <span>Sort By:</span>{" "}
               <div className="input-group">