CardSections

src/components/PageLink/PageLink.tsx

@@ -29,10 +29,14 @@ const StyledPageLink = styled.div`
 
   a {
     display: block;
-    color: ${colors.darkBlue};
     margin-left: 1rem;
     text-decoration: none;
     font-weight: normal;
+
+    color: ${colors.blue1};
+    &:hover {
+      color: ${colors.darkBlue};
+    }
   }
 `;
 

src/components/Sections/CardSection.tsx

@@ -1,23 +1,22 @@
 import styled from "styled-components";
-import PageSection from "./PageSection";
 import { colors } from "@theme/colors";
 
-const CardSection = styled(PageSection)`
+const CardSection = styled.section`
+
+  h6 {
+    color: ${colors.orange1};
+  }
+
+  display: flex;
+  flex-flow: row wrap;
+  padding: 2rem 1rem;
+
   @media screen and (max-width: 800px) {
     flex-flow: column nowrap;
   }
 
-  color: ${colors.black};
-  background-color: ${colors.white};
-  a {
-    color: ${colors.blue1};
-    &:hover {
-      color: ${colors.darkBlue};
-    }
-  }
-
-  h6 {
-    color: ${colors.orange1};
+  & > aside {
+    margin-left: auto;
   }
 
   & > * {

src/components/Sections/FullWidthSection.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { PageSection } from "@components/index";
 
-const StyledSection = styled(PageSection)`
+const StyledSection = styled.section`
   display: grid;
   padding: 24px;
 

src/components/Sections/PageSection.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const Section = styled.section`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  position: relative;
-  padding: ${(p) => p.fullSize ? "0" : "2rem 1rem 2rem"};
-`;
-
-const PageSection: React.FC = (props) => (
-  <Section {...props} />
-);
-
-export default PageSection;

src/components/index.tsx

@@ -2,10 +2,10 @@ export { default as Card } from "./Card";
 export { default as PageLink } from "./PageLink";
 export { default as Button } from "./Button";
 export { default as TextAnchor } from "./TextAnchor";
-export { default as PageSection } from "./Sections/PageSection";
 export { default as Divider } from "./Divider";
 export { default as CardSection } from "./Sections/CardSection";
 export { default as CTASection } from "./Sections/CTASection";
 export { default as TextSection } from "./Sections/TextSection";
+export { default as FullWidthSection } from "./Sections/FullWidthSection";
 export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion";

src/views/ActualPage/EventCalendar.tsx

@@ -3,7 +3,7 @@ import { Event } from "@models/Event";
 import Button from "@components/Button";
 
 import FilterContainer from "./FilterContainer";
-import { CardSection, Card } from "@components/index";
+import { CardSection, Card, FullWidthSection } from "@components/index";
 
 interface EventCalendarProps {
   events: Event[];
@@ -14,19 +14,22 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
   const [numberShown, setNumberShown] = useState(8);
   const filteredEvents = events.slice(0, numberShown);
   return (
-    <>
-      {/* <FilterContainer>
-        <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+    <FullWidthSection>
+      <h1>
+        Tapahtumat
+        <FilterContainer>
+          <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
           Näytä kaikki
-        </Button>
-        <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          </Button>
+          <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
           Järjestä aihettain&nbsp;›
-        </Button>
-        <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          </Button>
+          <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
           Valitse aika&nbsp;›
-        </Button>
-      </FilterContainer> */}
-      <h3>Tapahtumat</h3>
+          </Button>
+        </FilterContainer>
+      </h1>
+
       <CardSection>
         {filteredEvents.map(e => (
           <Card
@@ -47,7 +50,7 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
           </Button>
         </FilterContainer>
       )}
-    </>
+    </FullWidthSection>
   )
 }
 

src/views/ActualPage/News.tsx

@@ -3,7 +3,7 @@ import { Post } from "@models/Feed";
 import Button from "@components/Button";
 
 import FilterContainer from "./FilterContainer";
-import { CardSection, Card } from "@components/index";
+import { CardSection, Card, FullWidthSection } from "@components/index";
 
 interface NewsProps {
   feed: Post[];
@@ -14,19 +14,21 @@ const News: React.FC<NewsProps> = ({feed}) => {
   const [numberShown, setNumberShown] = useState(8);
   const filteredFeed = feed.slice(0, numberShown);
   return (
-    <>
-      {/* <FilterContainer>
-        <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+    <FullWidthSection>
+      <h1>
+        Uutiset
+        <FilterContainer>
+          <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
           Näytä kaikki
-        </Button>
-        <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          </Button>
+          <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
           Järjestä aihettain&nbsp;›
-        </Button>
-        <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          </Button>
+          <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
           Valitse aika&nbsp;›
-        </Button>
-      </FilterContainer> */}
-      <h3>Uutiset</h3>
+          </Button>
+        </FilterContainer>
+      </h1>
       <CardSection>
         {filteredFeed.map(post => (
           <Card
@@ -47,7 +49,7 @@ const News: React.FC<NewsProps> = ({feed}) => {
           </Button>
         </FilterContainer>
       )}
-    </>
+    </FullWidthSection>
   )
 }
 

src/views/FrontPage/FrontPageView.tsx

@@ -54,11 +54,11 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             buttonOnClick={() => {}}
           />
         ))}
-        <div>
+        <aside>
           <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
             Kaikki tapahtumat
           </PageLink>
-        </div>
+        </aside>
 
       </CardSection>
 
@@ -81,14 +81,14 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             buttonOnClick={() => {}}
           />
         ))}
-        <div>
+        <aside>
           <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
             Lue tuoreimmat uutiset
           </PageLink>
           <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
             Kuvia tapahtumista
           </PageLink>
-        </div>
+        </aside>
       </CardSection>
 
       <Divider />