Updated styles for header.

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;
+
+  h1 {
+    color: $green-text;
+    text-transform: uppercase;
+    font-size: 3rem;
+
+    span {
+      color: $brown-text;
+      font-size: 0.5em;
+    }
   }
 
-.App-header h1 {
-  color: white;
+  .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;
+    }
+  }
 }

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>
-    )
-}
+    );
+};

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" 
 }

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" 
 }