From 25f87eaa01367e537976ae0ce86051e87bd75e54 Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Thu, 23 Dec 2021 00:51:02 +0200
Subject: [PATCH] Translations and styling improved on main page.

---
 src/components/Info.scss              | 14 ++++++++
 src/components/Info.tsx               | 15 +++++++++
 src/components/Menu.scss              | 29 +++++++----------
 src/components/Menu.tsx               | 43 +++++--------------------
 src/components/NavBar.scss            |  1 +
 src/components/NavBar.tsx             | 15 ++++++---
 src/components/Program.scss           | 29 +++++++----------
 src/components/Program.tsx            | 46 +++++++--------------------
 src/constants/localization/en.ts      |  4 ++-
 src/constants/localization/fi.ts      |  6 ++--
 src/constants/localization/main/en.ts |  8 +++++
 src/constants/localization/main/fi.ts |  8 +++++
 src/pages/Main.scss                   |  4 +--
 src/pages/Main.tsx                    | 17 +++++++---
 14 files changed, 118 insertions(+), 121 deletions(-)
 create mode 100644 src/components/Info.scss
 create mode 100644 src/components/Info.tsx
 create mode 100644 src/constants/localization/main/en.ts
 create mode 100644 src/constants/localization/main/fi.ts

diff --git a/src/components/Info.scss b/src/components/Info.scss
new file mode 100644
index 0000000..5cb5b16
--- /dev/null
+++ b/src/components/Info.scss
@@ -0,0 +1,14 @@
+@import '../colors.scss';
+
+.Info {
+  h1 {
+    font-size: 4rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+    color: $green-text;
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+}
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
new file mode 100644
index 0000000..18b617e
--- /dev/null
+++ b/src/components/Info.tsx
@@ -0,0 +1,15 @@
+import { FormattedMessage } from 'react-intl';
+import './Info.scss';
+
+export const Info = () => {
+  return (
+    <section className='Info'>
+      <h1>
+        <FormattedMessage id='main.info' />
+      </h1>
+      <h2>
+        <FormattedMessage id='main.toBeDecided' />
+      </h2>
+    </section>
+  );
+};
diff --git a/src/components/Menu.scss b/src/components/Menu.scss
index ebe2dfc..7883935 100644
--- a/src/components/Menu.scss
+++ b/src/components/Menu.scss
@@ -1,21 +1,14 @@
-table {
-  width: 100%;
-}
+@import '../colors.scss';
 
-table,
-td,
-th {
-  border-bottom: 1px solid black;
-}
+.Menu {
+  h1 {
+    font-size: 4rem;
+  }
 
-th {
-  height: 10vh;
-}
-
-tr {
-  line-break: auto;
-}
-th,
-td {
-  width: 33%;
+  h2 {
+    font-size: 2rem;
+    color: $green-text;
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
 }
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 6f480fd..912c2d6 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -1,42 +1,15 @@
+import { FormattedMessage } from 'react-intl';
 import './Menu.scss';
 
 export const Menu = () => {
   return (
-    <section>
-      <h1>Menu</h1>
-      <article>
-        <h2>Starters</h2>
-
-        <h3>Chrumky</h3>
-        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-        <p>Nuts</p>
-
-        <h3>Halusky</h3>
-        <p>Fatty fat stuff.</p>
-        <p>Meat, fat</p>
-      </article>
-      <article>
-        <h2>Main dish</h2>
-
-        <h3>Chrumky</h3>
-        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-        <p>Nuts</p>
-
-        <h3>Halusky</h3>
-        <p>Fatty fat stuff.</p>
-        <p>Meat, fat</p>
-      </article>
-      <article>
-        <h2>Dessert</h2>
-
-        <h3>Chrumky</h3>
-        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-        <p>Nuts</p>
-
-        <h3>Halusky</h3>
-        <p>Fatty fat stuff.</p>
-        <p>Meat, fat</p>
-      </article>
+    <section className='Menu'>
+      <h1>
+        <FormattedMessage id='main.menu' />
+      </h1>
+      <h2>
+        <FormattedMessage id='main.toBeDecided' />
+      </h2>
     </section>
   );
 };
diff --git a/src/components/NavBar.scss b/src/components/NavBar.scss
index 8c63476..ad31894 100644
--- a/src/components/NavBar.scss
+++ b/src/components/NavBar.scss
@@ -8,5 +8,6 @@
   .Diamond {
     margin-right: 1rem;
     margin-left: 1rem;
+    margin-bottom: 0;
   }
 }
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index d9c98b3..eb6ea3a 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,17 +1,22 @@
 import './NavBar.scss';
 import { Link } from 'react-router-dom';
-import { LanguagePicker } from './LanguagePicker';
-import { Button, Menu } from 'antd';
 import { Diamond } from './Diamond';
+import { FormattedMessage } from 'react-intl';
 
 export const NavBar = () => {
   return (
     <div className='NavBar'>
-      <Link to='/menu'>Menu</Link>
+      <Link to='/menu'>
+        <FormattedMessage id='main.menu' />
+      </Link>
       <Diamond />
-      <Link to='/program'>Program</Link>
+      <Link to='/program'>
+        <FormattedMessage id='main.program' />
+      </Link>
       <Diamond />
-      <Link to='/program'>Info</Link>
+      <Link to='/info'>
+        <FormattedMessage id='main.info' />
+      </Link>
     </div>
   );
 };
diff --git a/src/components/Program.scss b/src/components/Program.scss
index ebe2dfc..db37d2d 100644
--- a/src/components/Program.scss
+++ b/src/components/Program.scss
@@ -1,21 +1,14 @@
-table {
-  width: 100%;
-}
+@import '../colors.scss';
 
-table,
-td,
-th {
-  border-bottom: 1px solid black;
-}
+.Program {
+  h1 {
+    font-size: 4rem;
+  }
 
-th {
-  height: 10vh;
-}
-
-tr {
-  line-break: auto;
-}
-th,
-td {
-  width: 33%;
+  h2 {
+    font-size: 2rem;
+    color: $green-text;
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
 }
diff --git a/src/components/Program.tsx b/src/components/Program.tsx
index fe88672..b7bd09c 100644
--- a/src/components/Program.tsx
+++ b/src/components/Program.tsx
@@ -1,40 +1,16 @@
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import './Program.scss';
 
 export const Program = () => {
-    return (
-        <section>
-            <h1>Program</h1>
-            <article>
-                <h2>12:00</h2>
-                <h3>Speech</h3>
-                <p>Boring BS. Lorem ipsum dolor sit amet.</p>
-                <h3>Lunch</h3>
-                <p>
-                    Eating yummy yum.
-                    <i>
-                        <Link to='/menu'>To menu</Link>
-                    </i>
-                </p>
-            </article>
-            <article>
-                <h2>14:00</h2>
-                <h3>Games</h3>
-                <p>Activity lol.</p>
-                <p>Be active.</p>
-                <h3>More something</h3>
-                <p>Lorem ipsum dolor sit amet.</p>
-                <h3>More more more</h3>
-            </article>
-            <article>
-                <h2>23:00</h2>
-                <h3>More something</h3>
-                <p>Lorem ipsum dolor sit amet.</p>
-                <h3>More more more</h3>
-                <h3>More something</h3>
-                <p>Lorem ipsum dolor sit amet.</p>
-                <h3>More more more</h3>
-            </article>
-        </section>
-    );
+  return (
+    <section className='Program'>
+      <h1>
+        <FormattedMessage id='main.program' />
+      </h1>
+      <h2>
+        <FormattedMessage id='main.toBeDecided' />
+      </h2>
+    </section>
+  );
 };
diff --git a/src/constants/localization/en.ts b/src/constants/localization/en.ts
index 1e8fbaa..ecd0a52 100644
--- a/src/constants/localization/en.ts
+++ b/src/constants/localization/en.ts
@@ -1,9 +1,11 @@
 import { common } from "./common/en";
 import { registration } from './registration/en';
+import { main } from "./main/en";
 
 const en: Record<string, string> = {
     ...common,
-    ...registration
+    ...registration,
+    ...main
 }
 
 export default en;
\ No newline at end of file
diff --git a/src/constants/localization/fi.ts b/src/constants/localization/fi.ts
index 729aac9..fcf29d6 100644
--- a/src/constants/localization/fi.ts
+++ b/src/constants/localization/fi.ts
@@ -1,9 +1,11 @@
 import { common } from "./common/fi";
-import { registration } from './registration/fi';
+import { registration } from "./registration/fi";
+import { main } from "./main/fi";
 
 const fi: Record<string, string> = {
     ...common,
-    ...registration
+    ...registration,
+    ...main
 }
 
 export default fi;
\ No newline at end of file
diff --git a/src/constants/localization/main/en.ts b/src/constants/localization/main/en.ts
new file mode 100644
index 0000000..8a2644c
--- /dev/null
+++ b/src/constants/localization/main/en.ts
@@ -0,0 +1,8 @@
+export const main: Record<string, string> = {
+    "main.program": "Program",
+    "main.menu": "Menu",
+    "main.info": "Info",
+    "main.saveTheLink": "Save the link",
+    "main.welcome": "Welcome!",
+    "main.toBeDecided": "To be specified"
+}
\ No newline at end of file
diff --git a/src/constants/localization/main/fi.ts b/src/constants/localization/main/fi.ts
new file mode 100644
index 0000000..be9329d
--- /dev/null
+++ b/src/constants/localization/main/fi.ts
@@ -0,0 +1,8 @@
+export const main: Record<string, string> = {
+    "main.program": "Ohjelma",
+    "main.menu": "Menu",
+    "main.info": "Info",
+    "main.saveTheLink": "Laita linkki talteen",
+    "main.welcome": "Tervetuloa!",
+    "main.toBeDecided": "Selviää myöhemmin"
+}
\ No newline at end of file
diff --git a/src/pages/Main.scss b/src/pages/Main.scss
index c353787..21f1ba1 100644
--- a/src/pages/Main.scss
+++ b/src/pages/Main.scss
@@ -20,7 +20,7 @@
       margin-top: 3rem;
     }
 
-    h1 {
+    .Main-title {
       line-height: 4rem;
       font-family: 'Montserrat-Light';
       color: $green-text !important;
@@ -29,7 +29,7 @@
       margin-bottom: 0px;
     }
 
-    h2 {
+    .Main-and {
       color: $brown-text;
       font-size: 3rem;
       margin-top: 0em;
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 2bd3dfd..50f54f2 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -8,6 +8,7 @@ import { NotFound } from '../components/NotFound';
 import { LanguagePicker } from '../components/LanguagePicker';
 import { FormattedMessage } from 'react-intl';
 import { DateAndPlace } from '../components/DateAndPlace';
+import { Info } from '../components/Info';
 
 interface MainParams {
   page: string;
@@ -19,17 +20,19 @@ export const Main = () => {
   return (
     <div className='Main'>
       <LanguagePicker />
-      <p className='extraText'>Save the link</p>
+      <p className='extraText'>
+        <FormattedMessage id='main.saveTheLink' />
+      </p>
       <section className='Main-container'>
         <article className='logo-container'>
           <Link to='/'>
-            <h1>
+            <h1 className='Main-title'>
               <FormattedMessage id='common.lintu' />
             </h1>
-            <h2>
+            <h2 className='Main-and'>
               <span> &amp; </span>
             </h2>
-            <h1>
+            <h1 className='Main-title'>
               <FormattedMessage id='common.maslo' />
             </h1>
           </Link>
@@ -43,6 +46,8 @@ export const Main = () => {
               <Menu />
             ) : page === 'program' ? (
               <Program />
+            ) : page === 'info' ? (
+              <Info />
             ) : (
               <NotFound />
             )}
@@ -53,7 +58,9 @@ export const Main = () => {
           </article>
         )}
       </section>
-      <p className='extraText'>Attend the party</p>
+      <p className='extraText'>
+        <FormattedMessage id='main.welcome' />
+      </p>
     </div>
   );
 };