From 1b6bee549386aefa07488f7a6a301e8f0f8265a7 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Thu, 8 Oct 2020 20:19:43 +0300
Subject: [PATCH] Use ReactMarkdown on Event content

---
 src/theme/colors.ts                   |  15 ++++
 src/views/EventPage/EventPage.scss    |  31 -------
 src/views/EventPage/EventPageView.tsx | 125 ++++++++++++++++++--------
 3 files changed, 104 insertions(+), 67 deletions(-)
 delete mode 100644 src/views/EventPage/EventPage.scss

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index a949fe9..5ccd7c8 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -19,3 +19,18 @@ export const colorToClass = (color: Colors): string => color ? `color-div__${col
 export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined;
 export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined;
 export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined;
+
+export const colors = {
+  darkBlue: "#002d3a",
+  lightBlue: "#bfdbd9",
+  white: "#fff",
+  black: "#000",
+  grey1: "#d4d0c7",
+  grey2: "#efece4",
+  orange1: "#d57a2d",
+  orange2: "#dd934e",
+  blue1: "#57b2df",
+  lightTurquoise: "#beddeb",
+  green1: "#c0dcd9",
+  sand: "#fdf9d7"
+}
\ No newline at end of file
diff --git a/src/views/EventPage/EventPage.scss b/src/views/EventPage/EventPage.scss
deleted file mode 100644
index c46c96b..0000000
--- a/src/views/EventPage/EventPage.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@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 {
-  img {
-    width: 100%;
-  }
-}
-
-.event-signup-buttons {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
\ No newline at end of file
diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx
index c0187e1..0c7b439 100644
--- a/src/views/EventPage/EventPageView.tsx
+++ b/src/views/EventPage/EventPageView.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import "./EventPage.scss";
+import styled from "styled-components";
+import ReactMarkdown from "react-markdown";
+import { colors } from "@theme/colors";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
 import Anchor from "@components/Anchor";
@@ -10,42 +12,93 @@ interface EventPageViewProps {
   event?: Event;
 }
 
+const StyledSection = styled(MainSection)`
+  margin: auto;
+  max-width: 1000px;
+  align-items: center;
 
-class EventPageView extends React.Component<EventPageViewProps> {
-  render() {
-    const { event } = this.props;
-    if (!event) return <div>Loading</div>
-
-    return (
-      <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_fi}
-                </Button>
-              </Anchor>
-            )
-            )}
-          </div>
-        </MainSection>
-      </PageSection>
-    );
+  h1 {
+    color: ${colors.darkBlue};
   }
-}
 
+  img {
+    width: 100%;
+    min-height: 100px;
+  }
+
+  .event-desc {
+    color: ${colors.orange1};
+  }
+
+  .event-signup-buttons {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+`;
+
+const Content = styled.div`
+  p {
+    color: ${colors.black};
+  }
+
+  h1, h3 {
+    color: ${colors.orange2};
+  }
+
+  a {
+    color: ${colors.blue1};
+
+    &:hover {
+      color: ${colors.lightBlue};
+    }
+  }
+
+  table {
+    tr {
+      vertical-align: top;
+
+      td {
+        word-break: break-word;
+        padding: 8px;
+      }
+
+      td:first-of-type {
+        word-break: unset;
+        padding-left: 0;
+      }
+    }
+  }
+`;
+
+const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
+  if (!event) return <div>Loading</div>
+  return (
+    <PageSection backgroundColor="white1" textColor="black1" >
+      <StyledSection>
+        <h1>
+          {event.title_fi}
+        </h1>
+        <p className="event-desc">
+          {event.description_fi}
+        </p>
+        <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+        <Content>
+          <ReactMarkdown source={event.content_fi} escapeHtml={false} />
+        </Content>
+        {/* 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_fi}
+              </Button>
+            </Anchor>
+          )
+          )}
+        </div>
+      </StyledSection>
+    </PageSection>
+  );
+}
 export default EventPageView;