All sorts of BS

src/views/EventPage/EventPageView.tsx

@@ -17,27 +17,29 @@ const StyledSection = styled(MainSection)`
   max-width: 1000px;
   align-items: center;
 
-  h1 {
+  & > h1 {
     color: ${colors.darkBlue};
   }
 
-  img {
+  & > div > img {
+    height: auto;
     width: 100%;
-    min-height: 100px;
   }
 
-  .event-desc {
+  & > p {
     color: ${colors.orange1};
   }
-
-  .event-signup-buttons {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-  }
+`;
+
+const SignupButtons = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
 `;
 
 const Content = styled.div`
+  margin-top: 24px;
+
   p {
     color: ${colors.black};
   }
@@ -79,15 +81,17 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
         <h1>
           {event.title_fi}
         </h1>
-        <p className="event-desc">
+        <p>
           {event.description_fi}
         </p>
-        <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+        <div>
+          <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+        </div>
         <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">
+        <SignupButtons>
           {event.signupForm.map(sf => (
             <Anchor key={sf.id} to={`/signup/${sf.id}`}>
               <Button type="filled" onClick={() => {}}>
@@ -96,7 +100,7 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
             </Anchor>
           )
           )}
-        </div>
+        </SignupButtons>
       </StyledSection>
     </PageSection>
   );