Make registration page responsive.

src/components/DateAndPlace.scss

@@ -1,9 +1,8 @@
 @import '../colors.scss';
 
-.dateAndPlace {
+.DateAndPlace {
   text-align: center;
   text-transform: uppercase;
-  font-size: calc(10px + 2vmin);
   margin-bottom: 1rem;
 
   h2 {
@@ -30,3 +29,6 @@
     }
   }
 }
+
+@media screen and (max-width: 600px) {
+}

src/components/DateAndPlace.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 export const DateAndPlace = (props: { size: string }) => {
   return (
-    <div className='dateAndPlace'>
+    <div className='DateAndPlace'>
       <h2 className={props.size}>
         <FormattedMessage id='common.datetime' />
       </h2>

src/components/LanguagePicker.scss

@@ -1,6 +1,6 @@
 @import '../colors.scss';
 
-h1 {
+.LanguagePicker {
   text-align: center;
   color: $brown-text !important;
   font-family: 'Montserrat-Medium';
@@ -16,3 +16,9 @@ h1 {
     background-color: #e4e4de;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .LanguagePicker {
+    font-size: 1.6rem;
+  }
+}

src/components/LanguagePicker.tsx

@@ -1,13 +1,15 @@
 import { useRecoilState } from 'recoil';
 import { currentLanguage } from '../atoms/language';
-import "./LanguagePicker.scss"
+import './LanguagePicker.scss';
 
 export const LanguagePicker = () => {
-    const [lang, setLang] = useRecoilState(currentLanguage)
+  const [lang, setLang] = useRecoilState(currentLanguage);
 
   return (
-        <h1>
+    <h1 className='LanguagePicker'>
-            <button onClick={e => setLang("fi")}>fi</button> | <button onClick={e => setLang("sk")}>sk</button> | <button onClick={e => setLang("en")}>en</button>
+      <button onClick={(e) => setLang('fi')}>fi</button> |{' '}
+      <button onClick={(e) => setLang('sk')}>sk</button> |{' '}
+      <button onClick={(e) => setLang('en')}>en</button>
     </h1>
-    )
+  );
-}
+};

src/components/RegForm.scss

@@ -71,3 +71,10 @@ form#registration {
     background-color: $background !important;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .submitButton {
+    max-width: 100%;
+    white-space: break-spaces;
+  }
+}

src/components/RegistrationHeader.scss

@@ -20,3 +20,20 @@
     }
   }
 }
+
+@media screen and (max-width: 600px) {
+  .Diamond {
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .App-header {
+    flex-direction: column;
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: -3rem;
+    }
+  }
+}

src/constants/localization/common/fi.ts

@@ -1,6 +1,6 @@
 export const common: Record<string, string> = {
     "common.lintu": "Lintu",
     "common.maslo": "Maslo",
-    "common.datetime": "Elokuussa 27 | 11:00",
+    "common.datetime": "Elokuun 27 | 11:00",
     "common.place": "Seurantalo | Livonsaari" 
 }

src/constants/localization/registration/en.ts

@@ -1,5 +1,7 @@
 export const registration: Record<string, string> = {
     "registration.welcome": "Welcome to our wedding table",
+    "registration.datetime": "27th of August from 11:00 on",
+    "registration.place": "In Seurantalo of Livonsaari",
     "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals",
     "registration.about": "We will be updating the program and menu in lintujamaslo.net",
     "registration.saveTheLink": "Save the link",

src/constants/localization/registration/fi.ts

@@ -1,5 +1,7 @@
 export const registration: Record<string, string> = {
     "registration.welcome": "Tervetuloa häihimme",
+    "registration.datetime": "Elokuun 27. päivänä kello 11:00 alkaen",
+    "registration.place": "Livonsaaren Seurantalolla",
     "registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista",
     "registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net",
     "registration.saveTheLink": "Laita linkki talteen",

src/pages/Registration.scss

@@ -5,6 +5,7 @@
   align-items: center;
   flex-direction: column;
   white-space: pre-line;
+  text-align: center;
 
   .Registration-main {
     display: flex;
@@ -13,14 +14,27 @@
     max-width: 50%;
     text-transform: uppercase;
 
+    .Registration-welcome {
+      margin-bottom: 0;
+      text-align: center;
+    }
+
     img {
       max-width: 60%;
     }
 
+    h1 {
+      font-family: 'Montserrat-Medium';
+      text-align: center;
+      color: $brown-text;
+      font-size: 2.3rem;
+    }
+
     h2 {
       color: $brown-text !important;
       font-family: 'Montserrat-Light';
       margin-top: -1rem;
+      font-size: 2rem;
     }
   }
 
@@ -28,8 +42,10 @@
     max-width: 23rem;
     margin-top: 3rem;
     text-transform: uppercase;
-    h2 {
+    max-width: 30%;
-      text-align: center;
+
+    p {
+      font-size: 1.5rem;
       color: $brown-text !important;
     }
   }
@@ -39,3 +55,33 @@
     justify-content: center;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .Registration {
+    .Registration-main {
+      max-width: 80%;
+
+      .Registration-welcome {
+        color: $green-text !important;
+        margin-bottom: 28px;
+        margin-top: 0px;
+      }
+    }
+
+    .Registration-desc {
+      max-width: 90%;
+      p {
+        font-family: 'Montserrat-Medium';
+      }
+    }
+
+    h2 {
+      font-size: 1.5rem !important;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2rem !important;
+    }
+  }
+}

src/pages/Registration.tsx

@@ -12,28 +12,29 @@ export const Registration = () => {
       <LanguagePicker />
       <main className='Registration'>
         <div className='Registration-main'>
-          <h1>
+          <h1 className='Registration-welcome'>
             <FormattedMessage id='registration.welcome' />
-            <br />
+          </h1>
-            <FormattedMessage id='common.datetime' />
+          <h1>
+            <FormattedMessage id='registration.datetime' />
           </h1>
           <h2>
-            <FormattedMessage id='common.place' />
+            <FormattedMessage id='registration.place' />
           </h2>
         </div>
         <div className='Registration-desc'>
-          <h2>
+          <p>
             <FormattedMessage id='registration.questions' />
-          </h2>
+          </p>
-          <h2>
+          <p>
             <FormattedMessage id='registration.about' />
-          </h2>
+          </p>
-          <h2>
+          <p>
             <FormattedMessage id='registration.saveTheLink' />
-          </h2>
+          </p>
-          <h2>
+          <p>
             <FormattedMessage id='registration.fillInBefore' />
-          </h2>
+          </p>
         </div>
         <div className='Registration-form'>
           <RegForm />