Fix blurred images

gitcoinco · Oct 17, 2023 · 67da2a9 · 67da2a9
1 parent a8e71c7
commit 67da2a9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 41 deletions.
diff --git a/packages/grant-explorer/src/features/common/styles.ts b/packages/grant-explorer/src/features/common/styles.ts
@@ -18,11 +18,11 @@ export const BasicCard = tw.div`
   rounded-3xl
   bg-white
   shadow-lg
+  overflow-hidden
   `;
 
 export const CardHeader = tw.div`
   w-full
-  rounded-t-3xl
 `;
 
 export const CardContent = tw.div`

diff --git a/packages/grant-explorer/src/features/discovery/RoundBanner.tsx b/packages/grant-explorer/src/features/discovery/RoundBanner.tsx
@@ -62,10 +62,12 @@ function RoundBanner(props: { roundId: string }) {
   const stockImage = stockImages[stockId];
 
   return (
-    <div
-      className="bg-black h-[137px] brightness-50 w-full object-cover rounded-t-3xl"
-      style={{ backgroundImage: `url(${stockImage})` }}
-    ></div>
+    <div className="overflow-hidden h-[137px]">
+      <div
+        className="bg-black blur w-[120%] h-[120%] -mt-4 -ml-4 brightness-[40%] object-cover"
+        style={{ backgroundImage: `url(${stockImage})` }}
+      />
+    </div>
   );
 }
 

diff --git a/packages/grant-explorer/src/features/discovery/RoundCard.tsx b/packages/grant-explorer/src/features/discovery/RoundCard.tsx
@@ -18,6 +18,7 @@ import RoundBanner from "./RoundBanner";
 import RoundCardStat from "./RoundCardStat";
 import { useToken } from "wagmi";
 import { getAddress } from "viem";
+import { RoundDaysLeft } from "./RoundDaysLeft";
 
 type RoundCardProps = {
   round: RoundOverview;
@@ -126,40 +127,4 @@ const RoundBadge = ({ strategyName = "" }) => {
     </Badge>
   );
 };
-
-const RoundDaysLeft = ({
-  daysLeft = 0,
-  daysLeftToApply = 0,
-  isValidRoundEndTime = true,
-}) => {
-  const days = pluralize(["day", "days"]);
-  return (
-    <div className="flex-1">
-      {daysLeftToApply > 0 && (
-        <span
-          className="text-xs w-full font-mono"
-          data-testid="apply-days-left"
-        >
-          {daysLeftToApply} {days(daysLeftToApply)} left to apply
-        </span>
-      )}
-      <p className="text-xs w-full font-mono" data-testid="days-left">
-        {isValidRoundEndTime ? (
-          <span>
-            {daysLeft} {days(daysLeft)} left in round
-          </span>
-        ) : (
-          <span>No end time</span>
-        )}
-      </p>
-    </div>
-  );
-};
-
-// If we need something more advanced or to use in another place in codebase, we can pull in a library
-const pluralize =
-  ([singular = "", plural = ""]) =>
-  (num = 0) =>
-    num ? (num === 1 ? singular : plural) : "";
-
 export default RoundCard;
diff --git a/packages/grant-explorer/src/features/discovery/RoundDaysLeft.tsx b/packages/grant-explorer/src/features/discovery/RoundDaysLeft.tsx
@@ -0,0 +1,40 @@
+import tw from "tailwind-styled-components";
+
+export const RoundDaysLeft = ({
+  daysLeft = 0,
+  daysLeftToApply = 0,
+  isValidRoundEndTime = true,
+}) => {
+  const days = pluralize(["day", "days"]);
+  return (
+    <div className="flex-1">
+      {daysLeftToApply > 0 && (
+        <DaysLeft data-testid="apply-days-left">
+          {daysLeftToApply} {days(daysLeftToApply)} left to apply
+        </DaysLeft>
+      )}
+      <DaysLeft data-testid="days-left">
+        {isValidRoundEndTime ? (
+          <span>
+            {daysLeft} {days(daysLeft)} left in round
+          </span>
+        ) : (
+          <span>No end time</span>
+        )}
+      </DaysLeft>
+    </div>
+  );
+};
+
+const DaysLeft = tw.div`
+text-xs
+w-full
+font-mono
+whitespace-nowrap
+`;
+
+// If we need something more advanced or to use in another place in codebase, we can pull in a library
+const pluralize =
+  ([singular = "", plural = ""]) =>
+  (num = 0) =>
+    num ? (num === 1 ? singular : plural) : "";