feat: set header rtl styles

Author: andrey-canon

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@edunext/frontend-component-header",
-  "version": "6.6.1-nelp.2",
+  "version": "6.6.1-nelp.3",
   "description": "The standard header for Open edX",
   "main": "dist/index.js",
   "publishConfig": {

package.json

@@ -92,7 +92,7 @@ class DesktopHeader extends React.Component {
             </nav>
             <nav
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-              className="nav secondary-menu-container align-items-center ml-auto"
+              className="nav secondary-menu-container align-items-center"
             >
               {getConfig().ENABLE_HEADER_LANG_SELECTOR && (<LanguageSelector />)}
               {loggedIn

src/desktop-header/DesktopHeader.jsx

@@ -45,9 +45,13 @@ $rounded-pill: 50rem  !default;
     }
   }
 
-  .user-dropdown .btn {
-    height: 3rem;
+  .user-dropdown{
+    margin-left: var(--pgn-spacing-spacer-base);
+    .btn {
+      height: 3rem;
+    }
   }
+
 }
 
 .site-header-mobile,
@@ -93,6 +97,8 @@ $rounded-pill: 50rem  !default;
     }
   }
   .secondary-menu-container {
+    margin-left: auto;
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,

src/index.scss

@@ -1,5 +1,5 @@
 .language-selector {
-  padding: .75rem;
+  padding: 0 var(--pgn-spacing-spacer-base);
 
   .dropdown-toggle {
     .lang-label-medium,

src/language-selector/LanguageSelector.scss

@@ -36,7 +36,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   ];
 
   return (
-    <Dropdown className="user-dropdown ml-3">
+    <Dropdown className="user-dropdown">
       <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
         <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
       </Dropdown.Toggle>