feat: Updates to Collaboration and RTL UX (#2994)

src/components/CollabButton.scss

@@ -4,7 +4,8 @@
   .CollabButton.is-collaborating {
     background-color: var(--button-special-active-background-color);
 
-    .ToolIcon__icon svg {
+    .ToolIcon__icon svg,
+    .ToolIcon__label {
       color: var(--icon-green-fill-color);
     }
   }

src/components/CollabButton.tsx

@@ -25,8 +25,8 @@ const CollabButton = ({
         onClick={onClick}
         icon={users}
         type="button"
-        title={t("buttons.roomDialog")}
-        aria-label={t("buttons.roomDialog")}
+        title={t("labels.liveCollaboration")}
+        aria-label={t("labels.liveCollaboration")}
         showAriaLabel={useIsMobile()}
       >
         {collaboratorCount > 0 && (

src/components/InitializeApp.tsx

@@ -1,12 +1,7 @@
 import React from "react";
 
 import { LoadingMessage } from "./LoadingMessage";
-import {
-  defaultLang,
-  Language,
-  languages,
-  setLanguageFirstTime,
-} from "../i18n";
+import { defaultLang, Language, languages, setLanguage } from "../i18n";
 
 interface Props {
   langCode: Language["code"];
@@ -23,7 +18,7 @@ export class InitializeApp extends React.Component<Props, State> {
     const currentLang =
       languages.find((lang) => lang.code === this.props.langCode) ||
       defaultLang;
-    await setLanguageFirstTime(currentLang);
+    await setLanguage(currentLang);
     this.setState({
       isLoading: false,
     });

src/components/LayerUI.scss

@@ -19,9 +19,9 @@
       }
 
       a {
-        margin-left: auto;
+        margin-inline-start: auto;
         // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-right: 18px;
+        padding-inline-end: 18px;
         white-space: nowrap;
       }
     }