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/navigation/header-bar/header-bar.tsx

@@ -27,13 +27,13 @@ const HeaderBar: React.FC = () => {
       <div className="d-inline-flex">
         {!user
           ? <Fragment>
-            <span className={'mr-1 d-flex'}>
+            <span className={'mx-1 d-flex'}>
               <NewGuestNoteButton/>
             </span>
             <SignInButton size="sm"/>
           </Fragment>
           : <Fragment>
-            <span className={'mr-1 d-flex'}>
+            <span className={'mx-1 d-flex'}>
               <NewUserNoteButton/>
             </span>
             <UserDropdown/>