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/user-dropdown/user-dropdown.tsx

@@ -22,24 +22,24 @@ export const UserDropdown: React.FC = () => {
         <UserAvatar name={user.name} photo={user.photo}/>
       </Dropdown.Toggle>
 
-      <Dropdown.Menu>
+      <Dropdown.Menu className='text-start'>
         <LinkContainer to={'/features'}>
-          <Dropdown.Item>
-            <ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
+          <Dropdown.Item dir='auto'>
+            <ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mx-2"/>
             <Trans i18nKey="editor.help.documents.features"/>
           </Dropdown.Item>
         </LinkContainer>
         <LinkContainer to={'/profile'}>
-          <Dropdown.Item>
-            <ForkAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
+          <Dropdown.Item dir='auto'>
+            <ForkAwesomeIcon icon="user" fixedWidth={true} className="mx-2"/>
             <Trans i18nKey="profile.userProfile"/>
           </Dropdown.Item>
         </LinkContainer>
-        <Dropdown.Item
+        <Dropdown.Item dir='auto'
           onClick={() => {
             clearUser()
           }}>
-          <ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mr-2"/>
+          <ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mx-2"/>
           <Trans i18nKey="login.signOut"/>
         </Dropdown.Item>
       </Dropdown.Menu>