From 6fcb52b40ae48d159b23e43a13086fd4c15b53e3 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Fri, 16 Dec 2022 09:21:17 +0000
Subject: [PATCH] improve style

---
 .../FeaturedEventAnnouncement/index.jsx       | 22 +++--
 .../FeaturedEventAnnouncement/index.less      | 97 ++++++++++++-------
 2 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/packages/app/src/components/FeaturedEventAnnouncement/index.jsx b/packages/app/src/components/FeaturedEventAnnouncement/index.jsx
index 33d7628f..4ae1fc60 100644
--- a/packages/app/src/components/FeaturedEventAnnouncement/index.jsx
+++ b/packages/app/src/components/FeaturedEventAnnouncement/index.jsx
@@ -24,17 +24,21 @@ export default (props) => {
         }}
         onClick={onClickEvent}
     >
+        <div className="featuredEvent_wrapper">
+            <div className="logo">
+                <img
+                    src={logoImg}
+                />
+            </div>
+
+            <div className="content">
+                <h1>{title}</h1>
+                <h3>{description}</h3>
+            </div>
+        </div>
+
         <div className="indicator">
             <Icons.Target /> <span>Featured event</span>
         </div>
-        <div className="logo">
-            <img
-                src={logoImg}
-            />
-        </div>
-        <div className="content">
-            <h1>{title}</h1>
-            <h3>{description}</h3>
-        </div>
     </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/components/FeaturedEventAnnouncement/index.less b/packages/app/src/components/FeaturedEventAnnouncement/index.less
index d2be7faf..ebcc09b7 100644
--- a/packages/app/src/components/FeaturedEventAnnouncement/index.less
+++ b/packages/app/src/components/FeaturedEventAnnouncement/index.less
@@ -6,7 +6,7 @@
     flex-direction: row;
 
     align-items: center;
-    justify-content: flex-end;
+    //justify-content: flex-start;
 
     min-width: 300px;
     max-width: 350px;
@@ -21,6 +21,67 @@
 
     cursor: pointer;
 
+    .featuredEvent_wrapper {
+        display: flex;
+        flex-direction: row;
+
+        width: 100%;
+        height: 100%;
+
+        align-items: center;
+        justify-content: space-between;
+
+        .logo {
+            height: 100%;
+
+            width: fit-content;
+
+            max-width: 70px;
+
+            img {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        .content {
+            display: flex;
+
+            flex-direction: column;
+            align-self: flex-end;
+
+            width: 100%;
+            max-width: calc(90% - 70px);
+
+            overflow: hidden;
+
+            margin-left: 20px;
+            margin-bottom: 10px;
+
+            h1 {
+                font-size: 1.5rem;
+                font-weight: 700;
+                font-family: "Space Grotesk", sans-serif;
+
+                overflow: hidden;
+
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            h3 {
+                font-size: 0.8rem;
+                font-weight: 400;
+
+                overflow: hidden;
+
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-all;
+            }
+        }
+    }
+
     .indicator {
         position: absolute;
         z-index: 55;
@@ -32,38 +93,4 @@
 
         padding: 10px;
     }
-
-    .logo {
-        height: 100%;
-
-        width: fit-content;
-
-        max-width: 70px;
-
-        img {
-            height: 100%;
-            width: 100%;
-        }
-    }
-
-    .content {
-        display: flex;
-
-        flex-direction: column;
-        align-items: flex-start;
-
-        margin-left: 20px;
-        margin-bottom: 10px;
-
-        h1 {
-            font-size: 1.5rem;
-            font-weight: 700;
-            font-family: "Space Grotesk", sans-serif;
-        }
-
-        h3 {
-            font-size: 0.8rem;
-            font-weight: 400;
-        }
-    }
 }
\ No newline at end of file