From 9369edc00bc18dd3f27c4369af1382b73c3c8b68 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Sat, 22 Feb 2020 20:03:40 +0200
Subject: [PATCH] Placeholder styles for event page

---
 src/pages/EventPage/EventPage.scss | 15 ++++++++++
 src/pages/EventPage/EventPage.tsx  | 48 ++++++++++++++++++------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/pages/EventPage/EventPage.scss b/src/pages/EventPage/EventPage.scss
index 667ecd4..81f4c0e 100644
--- a/src/pages/EventPage/EventPage.scss
+++ b/src/pages/EventPage/EventPage.scss
@@ -1,3 +1,18 @@
 .event-page {
   display: block;
 }
+
+.event-banner {
+  width: 300px;
+  height: auto;
+}
+
+.event-title {
+  text-align: center;
+}
+
+.event-signup-buttons {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/pages/EventPage/EventPage.tsx b/src/pages/EventPage/EventPage.tsx
index 4f97e32..16b6c8b 100644
--- a/src/pages/EventPage/EventPage.tsx
+++ b/src/pages/EventPage/EventPage.tsx
@@ -5,6 +5,10 @@ import { Event, getEvent } from "../../models/Event";
 import { RouteComponentProps } from "react-router-dom";
 import Button, { ButtonType } from "../../components/Button";
 import Anchor from "../../components/Anchor";
+import PageSection from "../../components/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
+import MainSection from "../../components/MainSection";
+import AsideSection from "../../components/AsideSection/AsideSection";
 
 interface MatchParams {
   id: string;
@@ -48,25 +52,31 @@ class EventPage extends React.Component<EventPageProps, EventPageState> {
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
         </Helmet>
-        <img src={event.tags[0].icon} alt={event.title_fi} ></img>
-        <h1>{event.title_fi}</h1>
-        <p>
-          {event.description_fi}
-        </p>
-        <p>
-          {event.content_fi}
-        </p>
-        {/* We may have multiple signup forms. Generate own Button for each one */}
-        <div>
-          {event.signupForm.map(sf => (
-            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
-              <Button type={ButtonType.Filled} onClick={() => {}}>
-                {sf.title}
-              </Button>
-            </Anchor>
-          )
-          )}
-        </div>
+        <PageSection backgroundColor={ColorEnum.White}>
+          <AsideSection textColor={ColorEnum.Black} />
+          <MainSection textColor={ColorEnum.Black}>
+            <img className="event-banner" src={event.tags[0].icon} alt={event.title_fi} ></img>
+            <h1 className="event-title">{event.title_fi}</h1>
+            <p>
+              {event.description_fi}
+            </p>
+            <p>
+              {event.content_fi}
+            </p>
+            {/* We may have multiple signup forms. Generate own Button for each one */}
+            <div className="event-signup-buttons">
+              {event.signupForm.map(sf => (
+                <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+                  <Button type={ButtonType.Filled} onClick={() => {}}>
+                    {sf.title}
+                  </Button>
+                </Anchor>
+              )
+              )}
+            </div>
+          </MainSection>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
+        </PageSection>
       </div>
     );
   }