From 3a722309973eb0e6722229366bec824c1b1dde9c Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 5 Jun 2023 09:42:15 +0200
Subject: [PATCH] Better RTL support on "create room" screen

---
 src/components/CreateRoom.vue      | 14 +++++++++-----
 src/components/InteractiveAuth.vue |  8 ++++----
 src/components/Login.vue           |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index a87b0bd..e08fc39 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -34,13 +34,17 @@
       </v-row>
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
+          <div class="text-start font-weight-light">{{ $t("new_room.name_room") }}</div>
           <v-text-field v-model="roomName" color="black" :rules="roomNamerules" counter="50" maxlength="50"
             background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
             solo @update:error="updateErrorState"></v-text-field>
-          <div class="text-left font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
-          <v-text-field v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
-            v-on:keyup.enter="$refs.create.$el.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
+          <div class="text-start font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
+          <v-textarea v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
+            v-on:keydown.enter.prevent="
+                () => {
+                  $refs.create.$el.focus()
+                }
+              " :disabled="step > steps.INITIAL" solo full-width auto-grow rows="1" no-resize hide-details></v-textarea>
 
           <!-- Our only option right now is voice mode, so if not enabled, hide the 'options' drop down as well -->
           <template v-if="$config.experimental_voice_mode || $config.experimental_read_only_room || $config.experimental_public_room">
@@ -102,7 +106,7 @@
         <v-container v-if="canEditProfile" class="pa-10">
           <v-row class="align-center">
             <v-col class="py-0">
-              <div class="text-left font-weight-bold">{{ $t("join.choose_name") }}</div>
+              <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
               <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
                 :value="availableAvatars[0]" single-line autofocus>
                 <template v-slot:selection>
diff --git a/src/components/InteractiveAuth.vue b/src/components/InteractiveAuth.vue
index 813c7bf..a8c509b 100644
--- a/src/components/InteractiveAuth.vue
+++ b/src/components/InteractiveAuth.vue
@@ -8,7 +8,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.ENTER_EMAIL">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.email") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.email") }}</div>
           <v-text-field v-model="email" color="black" :rules="emailRules" type="email" maxlength="200"
             background-color="white" v-on:keyup.enter="onEmailEntered(email)" autofocus solo></v-text-field>
           <v-btn :disabled="!emailIsValid" color="black" depressed class="filled-button"
@@ -22,7 +22,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.TERMS">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.terms") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.terms") }}</div>
         </v-col>
       </v-row>
       <v-row cols="12" align="center" justify="center">
@@ -51,7 +51,7 @@
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
           <div>
-            <div class="text-left font-weight-light">{{ $t("login.sent_verification", { email: this.email }) }}</div>
+            <div class="text-start font-weight-light">{{ $t("login.sent_verification", { email: this.email }) }}</div>
             <v-progress-circular style="display: inline-flex" indeterminate color="primary"
               size="20"></v-progress-circular>
           </div>
@@ -65,7 +65,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.ENTER_TOKEN">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.registration_token") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.registration_token") }}</div>
           <v-text-field v-model="token" color="black" :rules="tokenRules" type="text" maxlength="64"
             background-color="white" v-on:keyup.enter="onTokenEntered(token)" autofocus solo></v-text-field>
           <v-btn :disabled="!tokenIsValid" color="black" depressed class="filled-button"
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 16bceb7..c6bbd8f 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -15,7 +15,7 @@
           <v-col>
             <div class="room-name no-upper">{{ $t("login.title") }}</div>
           </v-col>
-          <v-col class="text-right">
+          <v-col class="text-end">
             <v-btn id="btn-close" text v-if="showCloseButton" @click.stop="$navigation.pop">
               <v-icon>close</v-icon>
             </v-btn>