Set properly language on html element

public/index.html

@@ -4,8 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&subset=latin,latin-ext" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap&amp;subset=latin,latin-ext" />
     <title>Zgłoszenie praktyki studenckiej</title>
     <base href="/">
   </head>

src/app.tsx

@@ -64,6 +64,7 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
 
     const handleLanguageChange = (language: string) => () => {
         i18n.changeLanguage(language);
+        document.documentElement.lang = language;
     }
 
     const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase();

src/i18n.ts

@@ -17,10 +17,11 @@ i18n
     .init({
         resources,
         fallbackLng: "en",
-        debug: true,
         interpolation: {
             escapeValue: false
         }
     })
 
+document.documentElement.lang = i18n.language;
+
 export default i18n;

src/styles/header.scss

@@ -36,7 +36,7 @@
   }
 
   .header__divider {
-    margin: 0 .5rem;
+    margin: 0 1rem;
     background: #274057;
     width: 1px;
     height: 60%;
@@ -59,6 +59,10 @@
   li {
     list-style: none;
 
+    &:not(:last-child) {
+      margin-right: .5rem;
+    }
+
     a {
       padding: 7px;
       display: block;
@@ -68,4 +72,6 @@
 
 .language-switcher__language--active {
   font-weight: bold;
+  cursor: default;
+  text-decoration: none;
 }