Use new section components and Hero

src/views/EventPage/EventPageView.tsx

@@ -5,14 +5,12 @@ import { colors } from "@theme/colors";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
 import Anchor from "@components/Anchor";
-import PageSection from "@components/PageSection";
-import MainSection from "@components/MainSection";
 
 interface EventPageViewProps {
   event?: Event;
 }
 
-const StyledSection = styled(MainSection)`
+const StyledSection = styled.section`
   margin: auto;
   max-width: 1000px;
   align-items: center;
@@ -76,33 +74,31 @@ const Content = styled.div`
 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>
-          {event.description_fi}
-        </p>
-        <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 */}
-        <SignupButtons>
-          {event.signupForm.map(sf => (
-            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
-              <Button type="filled" onClick={() => {}}>
-                {sf.title_fi}
-              </Button>
-            </Anchor>
-          )
-          )}
-        </SignupButtons>
-      </StyledSection>
-    </PageSection>
+    <StyledSection>
+      <h1>
+        {event.title_fi}
+      </h1>
+      <p>
+        {event.description_fi}
+      </p>
+      <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 */}
+      <SignupButtons>
+        {event.signupForm.map(sf => (
+          <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+            <Button type="filled" onClick={() => {}}>
+              {sf.title_fi}
+            </Button>
+          </Anchor>
+        )
+        )}
+      </SignupButtons>
+    </StyledSection>
   );
 }
 export default EventPageView;