From 94ef00c7b064a8ca8f6b11e1b496ec28459ff635 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Wed, 22 Jul 2020 19:39:38 +0300
Subject: [PATCH] Event page styles

---
 src/components/MainSection/MainSection.tsx | 14 +++---
 src/views/EventPage/EventPage.scss         | 29 ++++++++----
 src/views/EventPage/EventPageView.tsx      | 55 +++++++++++-----------
 3 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx
index 9afe731..a96a12a 100644
--- a/src/components/MainSection/MainSection.tsx
+++ b/src/components/MainSection/MainSection.tsx
@@ -1,23 +1,21 @@
 import React from "react";
 import "./MainSection.scss";
 import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
+import classNames from "classnames";
 
 export interface MainSectionProps { }
 export interface MainSectionState { }
 
 class MainSection extends React.Component<MainSectionProps & ColorDivProps, MainSectionState> {
-  constructor(props: MainSectionProps) {
-    super(props);
-  }
-
   render() {
     const { children, className, ...props } = this.props;
-    const classNames = [
+    const classes = classNames(
       "main-section",
-    ];
-    if (className) classNames.push(className);
+      className
+    );
+
     return (
-      <ColorDiv className={classNames.join(" ")} {...props}>
+      <ColorDiv className={classes} {...props}>
         {children}
       </ColorDiv>
     );
diff --git a/src/views/EventPage/EventPage.scss b/src/views/EventPage/EventPage.scss
index 81f4c0e..c46c96b 100644
--- a/src/views/EventPage/EventPage.scss
+++ b/src/views/EventPage/EventPage.scss
@@ -1,14 +1,27 @@
-.event-page {
-  display: block;
+@import "../../assets/scss/globals";
+
+.event-view {
+  margin: auto;
+  max-width: 600px;
+  align-items: center;
+
+  h1 {
+    color: color(dark-blue);
+  }
+}
+
+.event-desc {
+  color: color(orange1);
+}
+
+.event-content {
+  color: color(black1);
 }
 
 .event-banner {
-  width: 300px;
-  height: auto;
-}
-
-.event-title {
-  text-align: center;
+  img {
+    width: 100%;
+  }
 }
 
 .event-signup-buttons {
diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx
index c209b7a..fe4cb4b 100644
--- a/src/views/EventPage/EventPageView.tsx
+++ b/src/views/EventPage/EventPageView.tsx
@@ -5,7 +5,6 @@ import Button from "@components/Button";
 import Anchor from "@components/Anchor";
 import PageSection from "@components/PageSection";
 import MainSection from "@components/MainSection";
-import AsideSection from "@components/AsideSection/AsideSection";
 
 interface EventPageViewProps {
   event?: Event;
@@ -18,33 +17,33 @@ class EventPageView extends React.Component<EventPageViewProps> {
     if (!event) return <div>Loading</div>
 
     return (
-      <div className="event-page">
-        <PageSection backgroundColor="white1">
-          <AsideSection textColor="black1" />
-          <MainSection textColor="black1">
-            <img className="event-banner" src={event.image || 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="filled" onClick={() => {}}>
-                    {sf.title}
-                  </Button>
-                </Anchor>
-              )
-              )}
-            </div>
-          </MainSection>
-          <AsideSection backgroundColor="white1" textColor="black1" />
-        </PageSection>
-      </div>
+      <PageSection backgroundColor="white1" textColor="black1" >
+        <MainSection className="event-view">
+          <div className="event-banner">
+            <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+          </div>
+          <h1>
+            {event.title_fi}
+          </h1>
+          <p className="event-desc">
+            {event.description_fi}
+          </p>
+          <p className="event-content">
+            {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="filled" onClick={() => {}}>
+                  {sf.title}
+                </Button>
+              </Anchor>
+            )
+            )}
+          </div>
+        </MainSection>
+      </PageSection>
     );
   }
 }