Improve ButtonWithProgress component, replace login and change server buttons (#235)

* Improve `ButtonWithProgress` component.

* Replace `CircularProgresIndicator` with `ButtonWithProgress` in login and server selection screens.

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/ButtonWithProgress.kt

@@ -19,7 +19,6 @@ package io.element.android.libraries.designsystem.components.button
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -33,6 +32,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -40,10 +40,20 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
 import io.element.android.libraries.designsystem.theme.components.ElementButtonDefaults
 import io.element.android.libraries.designsystem.theme.components.Text
 
+/**
+ * A component that will display a button with an indeterminate circular progressbar.
+ * When [showProgress] is true:
+ *  - A circular progressbar is displayed.
+ *  - [text] is replaced by [progressText], if defined.
+ *  - [onClick] gets disabled.
+ */
 @Composable
 fun ButtonWithProgress(
+    text: String?,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    showProgress: Boolean = false,
+    progressText: String? = text,
     enabled: Boolean = true,
     shape: Shape = ElementButtonDefaults.shape,
     colors: ButtonColors = ElementButtonDefaults.buttonColors(),
@@ -51,10 +61,11 @@ fun ButtonWithProgress(
     border: BorderStroke? = null,
     contentPadding: PaddingValues = ElementButtonDefaults.ContentPadding,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    content: @Composable RowScope.() -> Unit
 ) {
     Button(
-        onClick = onClick,
+        onClick = {
+            if (!showProgress) { onClick() }
+        },
         modifier = modifier,
         enabled = enabled,
         shape = shape,
@@ -64,15 +75,21 @@ fun ButtonWithProgress(
         contentPadding = contentPadding,
         interactionSource = interactionSource,
     ) {
-        CircularProgressIndicator(
-            modifier = Modifier
-                .progressSemantics()
-                .size(18.dp),
-            color = MaterialTheme.colorScheme.onPrimary,
-            strokeWidth = 2.dp,
-        )
-        Spacer(Modifier.width(10.dp))
-        content()
+        if (showProgress) {
+            CircularProgressIndicator(
+                modifier = Modifier
+                    .progressSemantics()
+                    .size(18.dp),
+                color = MaterialTheme.colorScheme.onPrimary,
+                strokeWidth = 2.dp,
+            )
+            if (progressText != null) {
+                Spacer(Modifier.width(10.dp))
+                Text(progressText, style = ElementTextStyles.Button)
+            }
+        } else if (text != null) {
+            Text(text, style = ElementTextStyles.Button)
+        }
     }
 }
 
@@ -86,7 +103,9 @@ internal fun ButtonWithProgressDarkPreview() = ElementPreviewDark { ContentToPre
 
 @Composable
 private fun ContentToPreview() {
-    ButtonWithProgress(onClick = {}) {
-        Text(text = "Button with progress")
-    }
+    ButtonWithProgress(
+        text = "Button with progress",
+        onClick = {},
+        showProgress = true,
+    )
 }

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -122,10 +122,16 @@
   <string name="rageshake_dialog_content">"You seem to be shaking the phone in frustration. Would you like to open the bug report screen?"</string>
   <string name="report_content_explanation">"Reporting this message will send it’s unique ‘event ID’ to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images."</string>
   <string name="report_content_hint">"Reason for reporting this content"</string>
-  <string name="room_details_encryption_enabled_description">"Messages in this room are end-to-end encrypted. Learn more &amp; verify users in their profile."</string>
   <string name="room_timeline_beginning_of_room">"This is the beginning of %1$s."</string>
   <string name="room_timeline_beginning_of_room_no_name">"This is the beginning of this conversation."</string>
   <string name="room_timeline_read_marker_title">"New"</string>
+  <string name="screen_room_details_encryption_enabled_subtitle">"Messages are secured with locks. Only you and the recipients have the unique keys to unlock them."</string>
+  <string name="screen_room_details_encryption_enabled_title">"Message encryption enabled"</string>
+  <string name="screen_room_details_invite_people_title">"Invite people"</string>
+  <string name="screen_room_details_leave_room_title">"Leave room"</string>
+  <string name="screen_room_details_people_title">"People"</string>
+  <string name="screen_room_details_security_title">"Security"</string>
+  <string name="screen_room_details_topic_title">"Topic"</string>
   <string name="settings_rageshake">"Rageshake"</string>
   <string name="settings_rageshake_detection_threshold">"Detection threshold"</string>
   <string name="settings_title_general">"General"</string>