MediaDetailsBottomSheet: iterate on design.

Closes #6645

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

@@ -65,7 +65,7 @@ enum class AvatarSize(val dp: Dp) {
     KnockRequestItem(52.dp),
     KnockRequestBanner(32.dp),
 
-    MediaSender(32.dp),
+    MediaSender(52.dp),
 
     DmCreationConfirmation(64.dp),
 

libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDetailsBottomSheet.kt

@@ -10,6 +10,7 @@ package io.element.android.libraries.mediaviewer.impl.details
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -24,6 +25,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -72,9 +74,8 @@ fun MediaDetailsBottomSheet(
             modifier = Modifier
                 .fillMaxWidth()
                 .verticalScroll(rememberScrollState()),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(24.dp),
         ) {
+            Title()
             Section(
                 title = stringResource(R.string.screen_media_details_uploaded_by),
             ) {
@@ -94,8 +95,8 @@ fun MediaDetailsBottomSheet(
                 title = stringResource(R.string.screen_media_details_file_format),
                 text = state.mediaInfo.mimeType + " - " + state.mediaInfo.formattedFileSize,
             )
+            Spacer(modifier = Modifier.height(16.dp))
             if (state.eventId != null) {
-                Column {
                 HorizontalDivider()
                 ListItem(
                     leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.VisibilityOn())),
@@ -164,7 +165,6 @@ fun MediaDetailsBottomSheet(
         }
     }
 }
-}
 
 @Composable
 private fun SenderRow(
@@ -216,6 +216,19 @@ private fun SenderRow(
     }
 }
 
+@Composable
+private fun ColumnScope.Title() {
+    Text(
+        modifier = Modifier
+            .align(Alignment.CenterHorizontally)
+            .padding(top = 16.dp, bottom = 8.dp, start = 16.dp, end = 16.dp),
+        text = stringResource(R.string.screen_media_details_title),
+        textAlign = TextAlign.Center,
+        style = ElementTheme.typography.fontBodyLgMedium,
+        color = ElementTheme.colors.textPrimary,
+    )
+}
+
 @Composable
 private fun Section(
     title: String,
@@ -224,12 +237,12 @@ private fun Section(
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp),
+            .padding(vertical = 8.dp, horizontal = 16.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp),
     ) {
         Text(
-            text = title.uppercase(),
+            text = title,
-            style = ElementTheme.typography.fontBodySmRegular,
+            style = ElementTheme.typography.fontBodyMdMedium,
             color = ElementTheme.colors.textSecondary,
         )
         content()

libraries/mediaviewer/impl/src/main/res/values/localazy.xml

@@ -16,6 +16,7 @@
   <string name="screen_media_details_filename">"File name"</string>
   <string name="screen_media_details_no_more_files_to_show">"No more files to show"</string>
   <string name="screen_media_details_no_more_media_to_show">"No more media to show"</string>
+  <string name="screen_media_details_title">"File info"</string>
   <string name="screen_media_details_uploaded_by">"Uploaded by"</string>
   <string name="screen_media_details_uploaded_on">"Uploaded on"</string>
 </resources>