From 937c7c91668c442ebceb865437cc3baf5d3d5102 Mon Sep 17 00:00:00 2001
From: Elmo Kankkunen <elmo.kankkunen@aalto.fi>
Date: Tue, 13 Sep 2022 16:53:00 +0300
Subject: [PATCH 1/3] Changed language button to an svg image

---
 src/components/ChangeLanguageButton.tsx |  2 +-
 src/components/Icon.tsx                 | 32 +++++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/ChangeLanguageButton.tsx b/src/components/ChangeLanguageButton.tsx
index 4a49483..e9ef880 100644
--- a/src/components/ChangeLanguageButton.tsx
+++ b/src/components/ChangeLanguageButton.tsx
@@ -23,5 +23,5 @@ export default styled(ChangeLanguageButton)`
   font-size: 4rem;
   background: none;
   border: none;
-  width: fit-content;
+  width: 2cm;
 `;
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index cae974b..4e83446 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -70,16 +70,34 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
   }
   if (name === IconType.FinlandFlag) {
     return (
-      <span role="img">
-        🇫🇮
-      </span>
-    );
+      <svg
+        role="img"
+        viewBox="0 0 640 480"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Menu</title>
+        {/* eslint-disable-next-line max-len */}
+        <path fill="#fff" d="M0 0h640v480H0z"/>
+        <path fill="#002f6c" d="M0 174.5h640v131H0z"/>
+        <path fill="#002f6c" d="M175.5 0h130.9v480h-131z"/>
+     </svg>
+   );
   }
   if (name === IconType.GBFlag) {
     return (
-      <span role="img">
-        🇬🇧
-      </span>
+      <svg
+        role="img"
+        viewBox="0 0 640 480"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Menu</title>
+        {/* eslint-disable-next-line max-len */}
+        <path fill="#012169" d="M0 0h640v480H0z"/>
+        <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
+        <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
+        <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
+        <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
+     </svg>
     );
   }
   return null;

From 11bd5a90a246f0e82c3e9c2aa4a8a9ddb5baf616 Mon Sep 17 00:00:00 2001
From: Elmo Kankkunen <elmo.kankkunen@aalto.fi>
Date: Tue, 13 Sep 2022 17:21:42 +0300
Subject: [PATCH 2/3] Fixed indentation

---
 src/components/Icon.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 4e83446..c0fa5df 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -77,11 +77,11 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
       >
         <title>Menu</title>
         {/* eslint-disable-next-line max-len */}
-        <path fill="#fff" d="M0 0h640v480H0z"/>
-        <path fill="#002f6c" d="M0 174.5h640v131H0z"/>
-        <path fill="#002f6c" d="M175.5 0h130.9v480h-131z"/>
-     </svg>
-   );
+        <path fill="#fff" d="M0 0h640v480H0z" />
+        <path fill="#002f6c" d="M0 174.5h640v131H0z" />
+        <path fill="#002f6c" d="M175.5 0h130.9v480h-131z" />
+      </svg>
+    );
   }
   if (name === IconType.GBFlag) {
     return (
@@ -92,12 +92,12 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
       >
         <title>Menu</title>
         {/* eslint-disable-next-line max-len */}
-        <path fill="#012169" d="M0 0h640v480H0z"/>
-        <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
-        <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
-        <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
-        <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
-     </svg>
+        <path fill="#012169" d="M0 0h640v480H0z" />
+        <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z" />
+        <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z" />
+        <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z" />
+        <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z" />
+      </svg>
     );
   }
   return null;

From 0380ee7d6d93f8920643f8147f2456f53a72cedf Mon Sep 17 00:00:00 2001
From: Elmo Kankkunen <elmo.kankkunen@aalto.fi>
Date: Tue, 13 Sep 2022 17:29:52 +0300
Subject: [PATCH 3/3] Changed language icons to svg images

---
 src/components/Icon.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index c0fa5df..4392833 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -75,8 +75,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
         viewBox="0 0 640 480"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Menu</title>
-        {/* eslint-disable-next-line max-len */}
+        <title>Finland flag</title>
         <path fill="#fff" d="M0 0h640v480H0z" />
         <path fill="#002f6c" d="M0 174.5h640v131H0z" />
         <path fill="#002f6c" d="M175.5 0h130.9v480h-131z" />
@@ -90,8 +89,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
         viewBox="0 0 640 480"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Menu</title>
-        {/* eslint-disable-next-line max-len */}
+        <title>GB flag</title>
         <path fill="#012169" d="M0 0h640v480H0z" />
         <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z" />
         <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z" />