From f422da89b5c1ef308bababfb6396823556fef5e0 Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Wed, 8 Dec 2021 22:58:29 +0200
Subject: [PATCH] Updated styles for header.

---
 src/components/Header.scss              | 41 +++++++++++++++++++++----
 src/components/Header.tsx               | 27 ++++++++++++----
 src/constants/localization/common/en.ts |  6 ++--
 src/constants/localization/common/fi.ts |  6 ++--
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/components/Header.scss b/src/components/Header.scss
index 741745c..0abfa0f 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -1,15 +1,44 @@
 @import '../colors.scss';
 
 .App-header {
-  background-color: $primary;
+  background-color: $background;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
-}
+  margin-top: 2rem;
 
-.App-header h1 {
-  color: white;
+  h1 {
+    color: $green-text;
+    text-transform: uppercase;
+    font-size: 3rem;
+
+    span {
+      color: $brown-text;
+      font-size: 0.5em;
+    }
+  }
+
+  .diamondIcon {
+    margin-bottom: 1rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .dateAndPlace {
+    text-align: center;
+    text-transform: uppercase;
+
+    h2 {
+      font-family: 'Montserrat-Medium';
+      font-size: 1.4rem;
+      color: $brown-text !important;
+      margin-bottom: -0.7rem;
+    }
+
+    h3 {
+      font-size: 1rem;
+      color: $brown-text !important;
+    }
+  }
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ce0035e..ac49477 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,11 +1,26 @@
 import { FormattedMessage } from 'react-intl';
-import "./Header.scss"
+import './Header.scss';
 
 export const Header = () => {
     return (
-        <header className="App-header">
-            <h1><FormattedMessage id="common.title" /></h1>
-            <p><i><FormattedMessage id="common.subtitle" /></i></p>
+        <header className='App-header'>
+            <h1>
+                <FormattedMessage id='common.lintu' />
+                <span> &amp; </span>
+                <FormattedMessage id='common.maslo' />
+            </h1>
+            <svg className="diamondIcon" width="9" height="9" fill="#c1a57c" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435z" />
+            </svg>
+            <div className='dateAndPlace'>
+                <h2>
+                    <FormattedMessage id='common.datetime' />
+                </h2>
+
+                <h3>
+                    <FormattedMessage id='common.place' />
+                </h3>
+            </div>
         </header>
-    )
-}
\ No newline at end of file
+    );
+};
diff --git a/src/constants/localization/common/en.ts b/src/constants/localization/common/en.ts
index 24bb9c6..98c444e 100644
--- a/src/constants/localization/common/en.ts
+++ b/src/constants/localization/common/en.ts
@@ -1,4 +1,6 @@
 export const common: Record<string, string> = {
-    "common.title": "Lintu and Maslo",
-    "common.subtitle": "August 2022"
+    "common.lintu": "Lintu",
+    "common.maslo": "Maslo",
+    "common.datetime": "August 27 | 11:00",
+    "common.place": "Seurantalo | Livonsaari" 
 }
\ No newline at end of file
diff --git a/src/constants/localization/common/fi.ts b/src/constants/localization/common/fi.ts
index 971c498..985957f 100644
--- a/src/constants/localization/common/fi.ts
+++ b/src/constants/localization/common/fi.ts
@@ -1,4 +1,6 @@
 export const common: Record<string, string> = {
-    "common.title": "Lintu ja Maslo",
-    "common.subtitle": "Elokuussa 2022"
+    "common.lintu": "Lintu",
+    "common.maslo": "Maslo",
+    "common.datetime": "Elokuussa 27 | 11:00",
+    "common.place": "Seurantalo | Livonsaari" 
 }
\ No newline at end of file