From 65a810211a1022aafd78dc9d808d770e7b96a656 Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Thu, 23 Dec 2021 00:12:29 +0200
Subject: [PATCH] Small and large variations for the DataAndPlace.

---
 src/components/DateAndPlace.scss      | 19 ++++++++++++++++---
 src/components/DateAndPlace.tsx       |  6 +++---
 src/components/Diamond.tsx            |  2 ++
 src/components/RegistrationHeader.tsx |  2 +-
 src/pages/Main.tsx                    |  2 +-
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/DateAndPlace.scss b/src/components/DateAndPlace.scss
index fd61ae8..2385834 100644
--- a/src/components/DateAndPlace.scss
+++ b/src/components/DateAndPlace.scss
@@ -4,16 +4,29 @@
   text-align: center;
   text-transform: uppercase;
   font-size: calc(10px + 2vmin);
+  margin-bottom: 1rem;
 
   h2 {
     font-family: 'Montserrat-Medium';
-    font-size: 1.4rem;
     color: $brown-text !important;
-    margin-bottom: -0.7rem;
+    margin-bottom: -0.7rem !important;
+
+    &.large {
+      font-size: 2rem !important;
+    }
+    &.small {
+      font-size: 1.4rem !important;
+    }
   }
 
   h3 {
-    font-size: 1rem;
     color: $brown-text !important;
+
+    &.large {
+      font-size: 1.4rem !important;
+    }
+    &.small {
+      font-size: 0.8rem !important;
+    }
   }
 }
diff --git a/src/components/DateAndPlace.tsx b/src/components/DateAndPlace.tsx
index 0d9f041..bed6938 100644
--- a/src/components/DateAndPlace.tsx
+++ b/src/components/DateAndPlace.tsx
@@ -2,14 +2,14 @@ import './DateAndPlace.scss';
 
 import { FormattedMessage } from 'react-intl';
 
-export const DateAndPlace = () => {
+export const DateAndPlace = (props: { size: string }) => {
   return (
     <div className='dateAndPlace'>
-      <h2>
+      <h2 className={props.size}>
         <FormattedMessage id='common.datetime' />
       </h2>
 
-      <h3>
+      <h3 className={props.size}>
         <FormattedMessage id='common.place' />
       </h3>
     </div>
diff --git a/src/components/Diamond.tsx b/src/components/Diamond.tsx
index c96d2be..981e573 100644
--- a/src/components/Diamond.tsx
+++ b/src/components/Diamond.tsx
@@ -1,3 +1,5 @@
+import './Diamond.scss';
+
 export const Diamond = () => {
   return (
     <svg
diff --git a/src/components/RegistrationHeader.tsx b/src/components/RegistrationHeader.tsx
index 33b73fc..7044704 100644
--- a/src/components/RegistrationHeader.tsx
+++ b/src/components/RegistrationHeader.tsx
@@ -12,7 +12,7 @@ export const RegistrationHeader = () => {
         <FormattedMessage id='common.maslo' />
       </h1>
       <Diamond />
-      <DateAndPlace />
+      <DateAndPlace size='small' />
     </header>
   );
 };
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 4588ec3..2bd3dfd 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -49,7 +49,7 @@ export const Main = () => {
           </article>
         ) : (
           <article>
-            <DateAndPlace />
+            <DateAndPlace size='large' />
           </article>
         )}
       </section>