Header -> RegistrationHeader.

src/components/Header.scss

@@ -1,44 +0,0 @@
-@import '../colors.scss';
-
-.App-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  margin-top: 2rem;
-
-  h1 {
-    color: $green-text !important;
-    text-transform: uppercase;
-    font-size: 3rem;
-    font-family: 'Montserrat-Light';
-
-    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;
-    }
-  }
-}

src/components/Header.tsx

@@ -1,26 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-import './Header.scss';
-
-export const Header = () => {
-    return (
-        <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/components/RegistrationHeader.scss

@@ -0,0 +1,22 @@
+@import '../colors.scss';
+
+.App-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  margin-top: 2rem;
+  gap: 1rem;
+
+  h1 {
+    color: $green-text !important;
+    text-transform: uppercase;
+    font-size: 3rem;
+    font-family: 'Montserrat-Light';
+
+    span {
+      color: $brown-text;
+      font-size: 0.5em;
+    }
+  }
+}

src/components/RegistrationHeader.tsx

@@ -0,0 +1,18 @@
+import { FormattedMessage } from 'react-intl';
+import { DateAndPlace } from './DateAndPlace';
+import { Diamond } from './Diamond';
+import './RegistrationHeader.scss';
+
+export const RegistrationHeader = () => {
+  return (
+    <header className='App-header'>
+      <h1>
+        <FormattedMessage id='common.lintu' />
+        <span> &amp; </span>
+        <FormattedMessage id='common.maslo' />
+      </h1>
+      <Diamond />
+      <DateAndPlace />
+    </header>
+  );
+};