Merge pull request #126 from systemphil/fix/masks

fix masks
systemphil · Jan 6, 2025 · 7850159 · 7850159
2 parents f446943 + d029c4f
commit 7850159
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 7 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -19,3 +19,79 @@
 .btn-primary {
     @apply dark:bg-dark-green-hsl dark:hover:bg-emerald-700 duration-300 dark:border-acid-green/20 dark:hover:border-acid-green/70;
 }
+
+/* The regular daisyUI mask classes are not working in production, likely due to being overwritten by something. So here is a workaround */
+.custom-mask {
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.custom-mask-squircle {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
+}
+
+.custom-mask-decagon {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-diamond {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-heart {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+}
+
+.custom-mask-hexagon {
+    mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+}
+
+.custom-mask-hexagon-2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+}
+
+.custom-mask-circle {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-parallelogram {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-parallelogram-2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-parallelogram-3 {
+    mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-parallelogram-4 {
+    mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+
+.custom-mask-pentagon {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-square {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-star {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-star-2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-triangle {
+    mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-triangle-2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-triangle-3 {
+    mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
+.custom-mask-triangle-4 {
+    mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
+}
diff --git a/features/billing/components/Billing.tsx b/features/billing/components/Billing.tsx
@@ -32,7 +32,7 @@ export function Billing({
                                             <div className="flex">
                                                 {course.imageUrl && (
                                                     <Image
-                                                        className="mask mask-parallelogram"
+                                                        className="custom-mask custom-mask-parallelogram"
                                                         src={course.imageUrl}
                                                         height={200}
                                                         width={200}

diff --git a/features/courses/components/CourseFrontPage.tsx b/features/courses/components/CourseFrontPage.tsx
@@ -49,7 +49,7 @@ export async function CourseFrontPage({ slug }: { slug: string }) {
                     </div>
 
                     {course.imageUrl && (
-                        <div className="mask mask-hexagon">
+                        <div className="custom-mask custom-mask-hexagon">
                             <Image
                                 src={course.imageUrl}
                                 alt={`Course preview ${course.name}`}

diff --git a/features/marketing/components/InfoCard.tsx b/features/marketing/components/InfoCard.tsx
@@ -1,5 +1,6 @@
 import { CardShell } from "lib/components/ui/CardShell";
 import { Heading } from "lib/components/ui/Heading";
+import { cn } from "lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -25,11 +26,12 @@ export async function InfoCard({
             {imgUrl && (
                 <figure className="mt-4">
                     <Image
-                        className={`mask ${
-                            (maskType === "diamond" && "mask-diamond") ||
-                            (maskType === "triangle" && "mask-triangle") ||
-                            (maskType === "squircle" && "mask-squircle")
-                        }`}
+                        className={cn(
+                            "custom-mask",
+                            maskType === "diamond" && "custom-mask-diamond",
+                            maskType === "triangle" && "custom-mask-triangle",
+                            maskType === "squircle" && "custom-mask-squircle"
+                        )}
                         src={imgUrl}
                         alt="Movie"
                         width={200}