Mark selected language as active

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>
 }

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;
+}