Fix EventPage

src/views/EventPage/EventPageView.tsx

@@ -1,31 +1,30 @@
 import React from "react";
 import styled from "styled-components";
-import ReactMarkdown from "react-markdown";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
 import Anchor from "@components/Anchor";
 import noop from "@utils/noop";
+import { TextSection } from "@components/index";
+import MarkdownStyles from "@views/common/MarkdownStyles";
 
 interface EventPageViewProps {
   event?: Event;
 }
 
-const StyledSection = styled.section`
+const StyledTextSection = styled(TextSection)`
   margin: auto;
   align-items: center;
 
   & > h1 {
     color: ${colors.darkBlue};
-  }
+    p {
+      color: ${colors.orange1};
+    }
 
-  & > div > img {
-    height: auto;
-    width: 100%;
-  }
-
-  & > p {
-    color: ${colors.orange1};
+    img {
+      width: 100%;
+    }
   }
 `;
 
@@ -35,70 +34,38 @@ const SignupButtons = styled.div`
   justify-content: center;
 `;
 
-const Content = styled.div`
+const Content = styled(MarkdownStyles)`
   margin-top: 1.5rem;
-
-  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 (
-    <StyledSection>
+    <StyledTextSection>
       <h1>
         {event.title_fi}
+        <p>
+          {event.description_fi}
+        </p>
+        <div>
+          <img src={event.image || event.tags[0].icon} alt={event.title_fi} />
+        </div>
       </h1>
-      <p>
-        {event.description_fi}
-      </p>
       <div>
-        <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+        <Content source={event.content_fi} escapeHtml={false} />
+        {/* We may have multiple signup forms. Generate own Button for each one */}
+        <SignupButtons>
+          {event.signupForm.map(sf => (
+            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+              <Button type="filled" onClick={noop}>
+                {sf.title_fi}
+              </Button>
+            </Anchor>
+          )
+          )}
+        </SignupButtons>
       </div>
-      <Content>
-        <ReactMarkdown source={event.content_fi} escapeHtml={false} />
-      </Content>
-      {/* We may have multiple signup forms. Generate own Button for each one */}
-      <SignupButtons>
-        {event.signupForm.map(sf => (
-          <Anchor key={sf.id} to={`/signup/${sf.id}`}>
-            <Button type="filled" onClick={noop}>
-              {sf.title_fi}
-            </Button>
-          </Anchor>
-        )
-        )}
-      </SignupButtons>
-    </StyledSection>
+    </StyledTextSection>
   );
 }
 export default EventPageView;