From b679352ae94dd4c01004b73e7d60e37aa9d6da4a Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Wed, 8 Dec 2021 23:18:21 +0200
Subject: [PATCH] Language picker with updated design.

---
 src/App.tsx                        |  2 ++
 src/components/LanguagePicker.scss | 23 +++++++++++++++++------
 src/components/LanguagePicker.tsx  | 18 +++---------------
 src/pages/Registration.tsx         |  1 -
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c989b2c..5de5137 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { IntlProvider } from 'react-intl';
 import { localization } from './constants/localization';
 import { Header } from './components/Header';
 import { ConfigProvider } from 'antd';
+import { LanguagePicker } from './components/LanguagePicker';
 
 export default function App() {
   const language = useRecoilValue(currentLanguage)
@@ -21,6 +22,7 @@ export default function App() {
   return (
     <IntlProvider locale={language} messages={localization[language]}>
       <Header />
+      <LanguagePicker />
       <Router>
         <Switch>
           <Route exact path="/:page">
diff --git a/src/components/LanguagePicker.scss b/src/components/LanguagePicker.scss
index a014158..f0d7a4e 100644
--- a/src/components/LanguagePicker.scss
+++ b/src/components/LanguagePicker.scss
@@ -1,7 +1,18 @@
-.ant-dropdown-trigger.dropdown {
-  padding-right: 7px;
-  padding-left: 7px;
-  padding-top: 1px;
-  border-radius: 5%;
-  margin-bottom: 10px;
+@import '../colors.scss';
+
+h1 {
+  text-align: center;
+  color: $brown-text !important;
+  font-family: 'Montserrat-Medium';
+
+  button {
+    text-transform: uppercase;
+    border: none;
+    background-color: $background;
+    width: 3rem;
+  }
+
+  button:hover {
+    background-color: #e4e4de;
+  }
 }
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
index 94f4b06..a55c5c4 100644
--- a/src/components/LanguagePicker.tsx
+++ b/src/components/LanguagePicker.tsx
@@ -1,25 +1,13 @@
-import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
-import GlobalOutlined from '@ant-design/icons/lib/icons/GlobalOutlined';
-import { Dropdown, Menu } from 'antd';
 import { useRecoilState } from 'recoil';
 import { currentLanguage } from '../atoms/language';
-import { languageItems } from '../constants/languageItems';
 import "./LanguagePicker.scss"
 
 export const LanguagePicker = () => {
     const [lang, setLang] = useRecoilState(currentLanguage)
 
-    const menu = (
-        <Menu>
-            {languageItems.map(lang => {
-                return (<Menu.Item key={lang.value} onClick={e => setLang(e.key)}>{lang.label}</Menu.Item>);
-            })}
-        </Menu>
-    );
-
     return (
-        <Dropdown overlay={menu} trigger={["click"]}>
-            <span className="dropdown"><GlobalOutlined /> <DownOutlined /></span>
-        </Dropdown>
+        <h1>
+            <button onClick={e => setLang("fi")}>fi</button> | <button onClick={e => setLang("sk")}>sk</button> | <button onClick={e => setLang("en")}>en</button>
+        </h1>
     )
 }
\ No newline at end of file
diff --git a/src/pages/Registration.tsx b/src/pages/Registration.tsx
index 51687d3..f23f1d1 100644
--- a/src/pages/Registration.tsx
+++ b/src/pages/Registration.tsx
@@ -11,7 +11,6 @@ export const Registration = () => {
                 <img src={mainPicture} />
                 <p><FormattedMessage id="registration.welcome" /></p>
                 <p><FormattedMessage id="registration.questions" /></p>
-
             </div>
             <div className="Registration-form">
                 <RegForm />