better support for rtl languages (#170)

* set text direction on language load and change to rtl if arabic is chosen

see https://www.w3schools.com/tags/att_global_dir.asp

* minor fixes to make rtl-mode look good:
- margins not only on the right, but on both sides
- fix bootstrap ToggleButtonGroup to always be ltr

* removed console.log statements

* fixed margin on the name in the user-avatar

* '$Icon CodiMD' on the intro page now always uses ftr text direction, since we don't translate the same of the software

* fixed import

* removed setHTMLDirection function

* added toplevel div with dir='auto'
some elements got dir='auto' if they contain potentially not translated or intended english text

* added text-align: start to the user-dropdown

* moved toplevel dir='auto'

* moved shortenLanguageCode to language-picker

* Changed mr-2 to mx-2 for profile buttons

Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/components/landing/layout/footer/language-picker.tsx

@@ -7,8 +7,9 @@ const LanguagePicker: React.FC = () => {
   const { i18n } = useTranslation()
 
   const onChangeLang = async (event: React.ChangeEvent<HTMLSelectElement>) => {
-    moment.locale(event.currentTarget.value)
-    await i18n.changeLanguage(event.currentTarget.value)
+    const language = event.currentTarget.value
+    moment.locale(language)
+    await i18n.changeLanguage(language)
   }
 
   const shortenLanguageCode = (language: string): string => {