From 0fd17b911146007446c6e65277a2ddfd5bb4b09b Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Fri, 6 Jan 2023 18:15:54 +0000
Subject: [PATCH] improve style

---
 .../app/src/pages/featured-event/[id].jsx     | 29 ++++++++++++-------
 .../app/src/pages/featured-event/index.less   | 21 ++++++++++----
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/pages/featured-event/[id].jsx b/packages/app/src/pages/featured-event/[id].jsx
index db307d6a..59ec1d76 100755
--- a/packages/app/src/pages/featured-event/[id].jsx
+++ b/packages/app/src/pages/featured-event/[id].jsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Skeleton } from "antd"
+import { Skeleton, Button } from "antd"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
@@ -92,7 +92,6 @@ export default (props) => {
                     console.log(`YIQ returns [${contrastColor}] as contrast color`)
                     document.getElementById("eventHeader").style.color = `var(--text-color-${contrastColor})`
                 })
-
             }
         }
     }, [eventData])
@@ -135,20 +134,30 @@ export default (props) => {
 
         <div className="content">
             <div className="panel">
-                <div className="dates">
-                    <Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
+                <div className="card">
+                    <div className="dates">
+                        <Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
+                    </div>
+
+                    <div className="location">
+                        <Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
+                    </div>
                 </div>
 
-                <div className="location">
-                    <Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
+                <div className="card">
+                    <Button>
+                        <Icons.Calendar /> Add to Calendar
+                    </Button>
                 </div>
             </div>
 
             <div className="panel">
-                <div className="description">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                        {eventData.description}
-                    </ReactMarkdown>
+                <div className="card">
+                    <div className="description">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {eventData.description}
+                        </ReactMarkdown>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/packages/app/src/pages/featured-event/index.less b/packages/app/src/pages/featured-event/index.less
index b1988773..aa95175c 100755
--- a/packages/app/src/pages/featured-event/index.less
+++ b/packages/app/src/pages/featured-event/index.less
@@ -70,13 +70,22 @@
             display: flex;
             flex-direction: column;
 
-            padding: 20px;
-
-            background-color: var(--background-color-accent);
-
-            border-radius: 12px;
-
             height: fit-content;
+
+            .card {
+                display: flex;
+                flex-direction: column;
+    
+                height: fit-content;
+
+                padding: 20px;
+
+                background-color: var(--background-color-accent);
+    
+                border-radius: 12px;
+                
+                margin-bottom: 20px;
+            }
         }
     }