Merge pull request #529 from vector-im/misc/cjs/create-join-design-feedback-ii

More create and join room design tweaks

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt

@@ -94,7 +94,7 @@ internal fun DefaultInviteSummaryRow(
     Row(
         modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 16.dp, vertical = 12.dp)
+                .padding(16.dp)
                 .height(IntrinsicSize.Min),
         verticalAlignment = Alignment.Top
     ) {

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -261,7 +261,7 @@ internal fun TopicSection(
             Text(
                 roomTopic.topic,
                 modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 12.dp),
-                style = MaterialTheme.typography.bodySmall,
+                style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.tertiary
             )
         }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/edit/RoomDetailsEditView.kt

@@ -266,6 +266,7 @@ private fun LabelledReadOnlyField(
         Text(
             modifier = Modifier.padding(horizontal = 16.dp),
             style = MaterialTheme.typography.titleSmall,
+            fontWeight = FontWeight.Normal,
             color = MaterialTheme.colorScheme.primary,
             text = title,
         )

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -18,7 +18,6 @@ package io.element.android.features.roomlist.impl
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
@@ -236,32 +235,34 @@ fun RoomListContent(
 
                     if (state.invitesState != InvitesState.NoInvites) {
                         item {
-                            Row(
-                                horizontalArrangement = Arrangement.End,
-                                verticalAlignment = Alignment.CenterVertically,
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .clickable(role = Role.Button, onClick = onInvitesClicked)
-                                    .heightIn(min = 48.dp),
+                            Box(
+                                modifier = Modifier.fillMaxWidth(),
                             ) {
-                                Text(
-                                    text = stringResource(StringR.string.action_invites_list),
-                                    fontSize = 14.sp,
-                                    style = noFontPadding,
-                                )
-
-                                if (state.invitesState == InvitesState.NewInvites) {
-                                    Spacer(Modifier.width(8.dp))
-
-                                    Box(
-                                        modifier = Modifier
-                                            .size(12.dp)
-                                            .clip(CircleShape)
-                                            .background(MaterialTheme.roomListUnreadIndicator())
+                                Row(
+                                    modifier = Modifier
+                                        .clickable(role = Role.Button, onClick = onInvitesClicked)
+                                        .padding(horizontal = 16.dp)
+                                        .align(Alignment.CenterEnd)
+                                        .heightIn(min = 48.dp),
+                                    verticalAlignment = Alignment.CenterVertically,
+                                ) {
+                                    Text(
+                                        text = stringResource(StringR.string.action_invites_list),
+                                        fontSize = 14.sp,
+                                        style = noFontPadding,
                                     )
-                                }
 
-                                Spacer(Modifier.width(16.dp))
+                                    if (state.invitesState == InvitesState.NewInvites) {
+                                        Spacer(Modifier.width(8.dp))
+
+                                        Box(
+                                            modifier = Modifier
+                                                .size(12.dp)
+                                                .clip(CircleShape)
+                                                .background(MaterialTheme.roomListUnreadIndicator())
+                                        )
+                                    }
+                                }
                             }
                         }
                     }

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

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -47,6 +48,7 @@ fun LabelledTextField(
         Text(
             modifier = Modifier.padding(horizontal = 16.dp),
             style = MaterialTheme.typography.titleSmall,
+            fontWeight = FontWeight.Normal,
             color = MaterialTheme.colorScheme.primary,
             text = label
         )

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

@@ -72,13 +72,13 @@ private fun ProgressDialogContent(
             modifier = Modifier.padding(top = 38.dp, bottom = 32.dp, start = 40.dp, end = 40.dp)
         ) {
             CircularProgressIndicator(
-                color = MaterialTheme.colorScheme.onSurfaceVariant
+                color = MaterialTheme.colorScheme.primary
             )
             if (!text.isNullOrBlank()) {
                 Spacer(modifier = Modifier.height(22.dp))
                 Text(
                     text = text,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    color = MaterialTheme.colorScheme.primary,
                 )
             }
         }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.Text
 
 @Composable
@@ -48,7 +49,7 @@ fun PreferenceCategory(
         }
         content()
         if (showDivider) {
-            PreferenceDivider()
+            Divider()
         }
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceDivider.kt

@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2023 New Vector Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package io.element.android.libraries.designsystem.components.preferences
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.theme.components.Divider
-
-@Composable
-fun PreferenceDivider(modifier: Modifier = Modifier) {
-    Divider(modifier, thickness = 0.5.dp)
-}
-
-@Preview(group = PreviewGroup.Dividers)
-@Composable
-internal fun PreferenceDividerPreview() {
-    ElementThemedPreview {
-        Box(Modifier.padding(vertical = 10.dp), contentAlignment = Alignment.Center) {
-            PreferenceDivider()
-        }
-    }
-}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceScreen.kt

@@ -43,6 +43,7 @@ import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -131,13 +132,13 @@ private fun ContentToPreview() {
                 subtitle = "Some other text",
                 icon = Icons.Default.BugReport,
             )
-            PreferenceDivider()
+            Divider()
             PreferenceSwitch(
                 title = "Switch",
                 icon = Icons.Default.Announcement,
                 isChecked = true,
             )
-            PreferenceDivider()
+            Divider()
             PreferenceSlide(
                 title = "Slide",
                 summary = "Summary",

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt

@@ -85,7 +85,7 @@ fun PreferenceText(
                 }
                 if (subtitle != null) {
                     Text(
-                        style = MaterialTheme.typography.bodySmall,
+                        style = MaterialTheme.typography.bodyMedium,
                         text = subtitle,
                         color = tintColor ?: MaterialTheme.colorScheme.tertiary,
                     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Divider.kt

@@ -32,7 +32,7 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
 @Composable
 fun Divider(
     modifier: Modifier = Modifier,
-    thickness: Dp = DividerDefaults.Thickness,
+    thickness: Dp = ElementDividerDefaults.thickness,
     color: Color = DividerDefaults.color,
 ) {
     androidx.compose.material3.Divider(
@@ -42,6 +42,10 @@ fun Divider(
     )
 }
 
+object ElementDividerDefaults {
+    val thickness = 0.5.dp
+}
+
 @Preview(group = PreviewGroup.Dividers)
 @Composable
 internal fun DividerPreview() = ElementThemedPreview {