From a81c0cd451bb0bf540a8ba83aaa893d328a78335 Mon Sep 17 00:00:00 2001
From: chopan <francisco.manriquezn@usm.cl>
Date: Thu, 25 Jan 2024 19:29:15 +0100
Subject: [PATCH] Add placeholder to fill empty space  when no event is
 selected

---
 src/components/Frontpage/Frontpage.module.css |  2 +-
 src/components/Frontpage/eventCalendar.jsx    | 16 ++++++++++++----
 src/components/Frontpage/index.js             |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Frontpage/Frontpage.module.css b/src/components/Frontpage/Frontpage.module.css
index f0b41a5..ac8d45b 100644
--- a/src/components/Frontpage/Frontpage.module.css
+++ b/src/components/Frontpage/Frontpage.module.css
@@ -189,7 +189,7 @@
 }
 .content .calendar .yearHeader button {
   height: 90px;
-  width: 49.5px;
+  width: 49px;
   font-size: x-large;
 }
 .content .calendar .monthHeader th {
diff --git a/src/components/Frontpage/eventCalendar.jsx b/src/components/Frontpage/eventCalendar.jsx
index f6e1bc6..66734ce 100644
--- a/src/components/Frontpage/eventCalendar.jsx
+++ b/src/components/Frontpage/eventCalendar.jsx
@@ -284,8 +284,8 @@ export default function EventCalendar({ events, location, lang }) {
   }
 
   return (
-    <div style={{position: "relative"}} className={cx('calendar', 'flex')}>
-      <table>
+    <div style={{ position: "relative" }} className={cx('calendar', 'flex')}>
+      <table style={{ margin: "auto" }}>
         <thead>
           <tr className={cx("yearHeader")}>
             <td rowSpan='3'>
@@ -305,9 +305,17 @@ export default function EventCalendar({ events, location, lang }) {
           )}
         </tbody>
       </table>
-      <div style={{width: "336px", height: "570px", overflow: "scroll"}}>
+      <div style={{ width: "336px", height: "570px", overflow: "scroll", margin: "auto" }}>
       {
-        selectedEventIndex !== -1 && <NewsItem item={events[selectedEventIndex]} location={location} lang={lang}/>
+        selectedEventIndex !== -1
+        ? <NewsItem item={events[selectedEventIndex]} location={location} lang={lang}/>
+        : <div style={{ height: "100%", width: "100%", padding: "10%", display: "flex", alignItems: "center", backgroundColor: "#eeeeee" }}>
+            <p style={{ fontSize: "24px", textAlign: "center" }}>
+              <Translate>
+                <Swedish>Klicka på en händelse för att visa mer information</Swedish>
+                <English>Click on an event to display more information</English>
+              </Translate></p>
+          </div>
       }
       </div>
       {(widgetWeekGroups
diff --git a/src/components/Frontpage/index.js b/src/components/Frontpage/index.js
index 9d9be79..3be79a3 100644
--- a/src/components/Frontpage/index.js
+++ b/src/components/Frontpage/index.js
@@ -249,8 +249,8 @@ const Frontpage = ({ location, lang }) =>
           {/* Title */}
           <h2 id="sections_intro">
             <Translate>
-              <Swedish>Evenemangs<span>Kalender</span></Swedish>
-              <English>Event <span>Calendar</span></English>
+              <Swedish>Evenemangskalender</Swedish>
+              <English>Event Calendar</English>
             </Translate>
           </h2>