From 73892cf024df0900204551254662bd96bbd1cd1d Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Fri, 23 Aug 2024 17:42:55 +0000
Subject: [PATCH 1/2] feat: Show For You button even if user not logged in

---
 frontend/css/fresh-releases.less              |  9 +++
 .../explore/fresh-releases/FreshReleases.tsx  | 58 ++++++++-----------
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/frontend/css/fresh-releases.less b/frontend/css/fresh-releases.less
index 7f6f45ce99..b4eef3ad5d 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 {
@@ -26,6 +30,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  #user-releases:disabled {
+    color: rgba(141, 141, 141, 0.5);
+    border-color: rgba(141, 141, 141, 0.5);
+  }
 }
 
 .releases-page {
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() {
       </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">

From 941af6b1d6c5e5ee44ea77402f65b1efe6b3fcc0 Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Tue, 3 Sep 2024 14:16:27 +0000
Subject: [PATCH 2/2] feat: Add disabled state to pill css

---
 frontend/css/fresh-releases.less | 5 -----
 frontend/css/pill.less           | 7 +++++++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/css/fresh-releases.less b/frontend/css/fresh-releases.less
index b4eef3ad5d..d4d148fc37 100644
--- a/frontend/css/fresh-releases.less
+++ b/frontend/css/fresh-releases.less
@@ -30,11 +30,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
-  #user-releases:disabled {
-    color: rgba(141, 141, 141, 0.5);
-    border-color: rgba(141, 141, 141, 0.5);
-  }
 }
 
 .releases-page {
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);
+  }
 }