Placeholder styles for event page

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;
+}

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>
     );
   }