From e9d0f6d348952dee243823377ac4834909514dcc Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Sat, 18 Jul 2020 16:42:19 +0200
Subject: [PATCH] Mark selected language as active

---
 src/app.tsx            | 9 +++++++--
 src/styles/header.scss | 6 +++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index f078d76..c74e0b1 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -48,7 +48,7 @@ const UserMenu = (props: HTMLProps<HTMLUListElement>) => {
     return <ul {...props}>
         {
             student ? <>
-                <Trans t={ t } i18nKey="logged-in-as">logged in as <strong>{{ name: student.name }}</strong></Trans>
+                <Trans t={ t } i18nKey="logged-in-as">logged in as <strong>{{ name: `${student.name} ${student.surname}` }}</strong></Trans>
                 {' '}
                 (<Link to={'#'} onClick={ handleUserLogout }>{ t('logout') }</Link>)
             </> : <>
@@ -65,9 +65,14 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
         i18n.changeLanguage(language);
     }
 
+    const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase();
+
     return <ul className={ classNames(className, "language-switcher") } { ...props }>
         { ['pl', 'en'].map(language => <li key={ language }>
-            <Link to="#" onClick={ handleLanguageChange(language) }>{ language }</Link>
+            <Link to="#" onClick={ handleLanguageChange(language) }
+                  className={ classNames("language-switcher__language", isActive(language) && "language-switcher__language--active") }>
+                { language }
+            </Link>
         </li>) }
     </ul>
 }
diff --git a/src/styles/header.scss b/src/styles/header.scss
index ea7b6c1..fa40ca4 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -37,7 +37,7 @@
 
   .header__divider {
     margin: 0 .5rem;
-    background: lighten($main-dark, 3%);
+    background: #274057;
     width: 1px;
     height: 60%;
   }
@@ -65,3 +65,7 @@
     }
   }
 }
+
+.language-switcher__language--active {
+  font-weight: bold;
+}