Add filled button for events

src/components/Button/Button.scss

@@ -17,6 +17,15 @@
     border: 1px solid $white;
   }
 
+  &.filled {
+    justify-content: center;
+    background-color: $blue;
+    color: $white;
+    font-weight: 800;
+    letter-spacing: 1.5px;
+    border: none;
+  }
+
   &:hover {
     cursor: pointer;
   }

src/components/Card/Card.scss

@@ -5,14 +5,13 @@
   color: $dark-blue;
   width: 20rem;
   white-space: wrap;
-  text-align: left;
   margin: 1rem 1rem;
 
   &__title {
-    text-align: center;
-    font-size: 1.4rem;
-    padding: 1rem;
+    padding: 0.5rem;
     display: flex;
+    justify-content: center;
+    font-size: 1.5rem;
   }
 
   &__image {
@@ -20,16 +19,26 @@
     margin-bottom: 1rem;
   }
 
+  &__button {
+    display: flex;
+    justify-content: center;
+  }
+
   &__text {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    text-overflow: ellipsis;
     font-size: 0.8rem;
-    font-weight: lighter;
-    padding: 1rem;
+    font-weight: 200;
   }
 
   &__datetime {
     color: $orange1;
+    display: flex;
+    justify-content: center;
     text-align: center;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     font-weight: bold;
   }
 }

src/components/Card/Card.tsx

@@ -1,19 +1,21 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
+import Button, { ButtonType } from "../Button/Button";
 import "./Card.scss";
 
 export interface CardProps {
-  event_id: number;
   title: string;
   start_time: string;
   text: string;
-  image: string;
+  link?: string;
+  image?: string;
+  button?: JSX.Element;
 }
 export interface CardState {}
 
 class Card extends React.Component<CardProps, CardState> {
   render() {
-    const { title, text, image, event_id } = this.props;
+    const { title, text, link, image, button } = this.props;
     let options = {
       day: "numeric",
       month: "numeric",
@@ -22,14 +24,28 @@ class Card extends React.Component<CardProps, CardState> {
       minute: "2-digit"
     };
     const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
-    return (
-      <Link to={"/events/" + event_id} className="card">
-        <div className="card__datetime">{datetime}</div>
-        <div className="card__title">{title}</div>
-        <img src={image} className="card__image" />
-        <div className="card__text">{text}</div>
-      </Link>
-    );
+    if (link) {
+      return (
+        <Link to={link} className="card">
+          <img src={image} className="card__image" />
+          <div className="card__datetime">{datetime}</div>
+          <div className="card__title">{title}</div>
+          <div className="card__text">{text}</div>
+          <div className="card__button">{button}</div>
+        </Link>
+      );
+    } else {
+      return (
+        <div className="card">
+          <img src={image} className="card__image" />
+          <div className="card__datetime">{datetime}</div>
+          <div className="card__title">{title}</div>
+          <div className="card__text">{text}</div>
+          {button}
+        </div>
+      );
+    }
+
   }
 }
 

src/pages/FrontPage/FrontPage.tsx

@@ -84,11 +84,12 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
           {events.map(event => (
             <Card
               key={event.id}
-              event_id={event.id}
               title={event.title}
               start_time={event.start_time}
               text={event.description}
+              link={"/events/" + event.id}
               image={BeerImage}
+              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää ›</Button>}
             />
 
           ))}