From 916e0aa0ca49671841bc86dbd2533c21a326e647 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 16 Jun 2022 16:16:46 +0800
Subject: [PATCH] chore: add gradient bg to blog images

---
 .../blog/[year]/[month]/[day]/[slug].tsx      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx b/apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx
index faabecce0d7..6ba7f9a0099 100644
--- a/apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx
+++ b/apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx
@@ -30,9 +30,26 @@ const components = {
   },
   ImageGrid,
   img: (props: any) => {
+    const classes = [
+      'next-image--dynamic-fill',
+      'from-brand-500 to-brand-500',
+      'rounded border bg-gradient-to-r via-blue-500',
+    ]
+
     return (
-      <div className="next-image--dynamic-fill">
-        <Image {...props} layout="fill" className="custom-img" />
+      <div
+        className="
+          next-image--dynamic-fill 
+            to-scale-400  
+            from-scale-500 rounded-md
+            border bg-gradient-to-r
+      "
+      >
+        <Image
+          {...props}
+          className="next-image--dynamic-fill to-brand-1000 from-brand-900 rounded-md border bg-gradient-to-r"
+          layout="fill"
+        />
       </div>
     )
   },