Improve Setting screen

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/avatar/AvatarSize.kt

@@ -21,7 +21,8 @@ import androidx.compose.ui.unit.dp
 enum class AvatarSize(val value: Int) {
     SMALL(32),
     MEDIUM(40),
-    BIG(48);
+    BIG(48),
+    HUGE(96);
 
     val dp = value.dp
 }

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/preferences/Config.kt

@@ -19,3 +19,4 @@ package io.element.android.x.designsystem.components.preferences
 import androidx.compose.ui.unit.dp
 
 internal val preferenceMinHeight = 80.dp
+internal val preferencePaddingEnd = 16.dp

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

@@ -20,8 +20,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -47,7 +52,10 @@ fun PreferenceScreen(
     content: @Composable ColumnScope.() -> Unit,
 ) {
     Scaffold(
-        modifier = modifier,
+        modifier = modifier
+            .fillMaxSize()
+            .systemBarsPadding()
+            .imePadding(),
         contentWindowInsets = WindowInsets.statusBars,
         topBar = {
             PreferenceTopAppBar(
@@ -56,8 +64,13 @@ fun PreferenceScreen(
             )
         },
         content = {
+            val scrollState = rememberScrollState()
             Column(
-                modifier = Modifier.padding(it)
+                modifier = Modifier
+                    .padding(it)
+                    .verticalScroll(
+                        state = scrollState,
+                    )
             ) {
                 content()
             }

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/preferences/PreferenceSlide.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
@@ -54,7 +55,9 @@ fun PreferenceSlide(
         Row(modifier = Modifier.fillMaxWidth()) {
             PreferenceIcon(icon = icon)
             Column(
-                modifier = Modifier.weight(1f),
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(end = preferencePaddingEnd),
             ) {
                 Text(
                     modifier = Modifier.fillMaxWidth(),

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/preferences/PreferenceSwitch.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Announcement
 import androidx.compose.material3.Checkbox
@@ -65,6 +66,7 @@ fun PreferenceSwitch(
                 text = title
             )
             Checkbox(
+                modifier = Modifier.padding(end = preferencePaddingEnd),
                 checked = isChecked,
                 enabled = enabled,
                 onCheckedChange = onCheckedChange

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

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.BugReport
 import androidx.compose.material3.MaterialTheme
@@ -53,7 +54,8 @@ fun PreferenceText(
             PreferenceIcon(icon = icon)
             Text(
                 modifier = Modifier
-                    .weight(1f),
+                    .weight(1f)
+                    .padding(end = preferencePaddingEnd),
                 style = MaterialTheme.typography.bodyLarge,
                 text = title
             )

libraries/matrixui/src/main/java/io/element/android/x/matrix/ui/components/MatrixUserHeader.kt

@@ -56,12 +56,12 @@ fun MatrixUserHeader(
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Avatar(
-            matrixUser.avatarData.copy(size = AvatarSize.BIG),
+            matrixUser.avatarData.copy(size = AvatarSize.HUGE),
         )
         Spacer(modifier = Modifier.height(16.dp))
         // Name
         Text(
-            fontSize = 16.sp,
+            fontSize = 18.sp,
             fontWeight = FontWeight.SemiBold,
             text = matrixUser.getBestName(),
             maxLines = 1,
@@ -69,7 +69,7 @@ fun MatrixUserHeader(
         )
         // Id
         if (matrixUser.username.isNullOrEmpty().not()) {
-            Spacer(modifier = Modifier.height(8.dp))
+            Spacer(modifier = Modifier.height(4.dp))
             Text(
                 text = matrixUser.id.value,
                 color = MaterialTheme.colorScheme.secondary,