Use ReactMarkdown on Event content

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;