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,73 +95,72 @@ 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())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_view_in_timeline)) },
+                    style = ListItemStyle.Primary,
+                    onClick = {
+                        onViewInTimeline(state.eventId)
+                    }
+                )
+                ListItem(
+                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_share)) },
+                    style = ListItemStyle.Primary,
+                    onClick = {
+                        onShare(state.eventId)
+                    }
+                )
+                ListItem(
+                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Forward())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_forward)) },
+                    style = ListItemStyle.Primary,
+                    onClick = {
+                        onForward(state.eventId)
+                    }
+                )
+                ListItem(
+                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_download)) },
+                    style = ListItemStyle.Primary,
+                    onClick = {
+                        onDownload(state.eventId)
+                    }
+                )
+                val mimeType = state.mediaInfo.mimeType
+                val icon = when (mimeType) {
+                    MimeTypes.Apk ->
+                        ListItemContent.Icon(IconSource.Resource(R.drawable.ic_apk_install))
+                    else ->
+                        ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut()))
+                }
+                val wording = when (mimeType) {
+                    MimeTypes.Apk -> stringResource(id = CommonStrings.common_install_apk_android)
+                    else -> stringResource(id = CommonStrings.action_open_with)
+                }
+                ListItem(
+                    leadingContent = icon,
+                    headlineContent = { Text(wording) },
+                    style = ListItemStyle.Primary,
+                    onClick = {
+                        onOpenWith(state.eventId)
+                    }
+                )
+                if (state.canDelete) {
                     HorizontalDivider()
                     ListItem(
-                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.VisibilityOn())),
+                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Delete())),
-                        headlineContent = { Text(stringResource(CommonStrings.action_view_in_timeline)) },
+                        headlineContent = { Text(stringResource(CommonStrings.action_delete)) },
-                        style = ListItemStyle.Primary,
+                        style = ListItemStyle.Destructive,
                         onClick = {
-                            onViewInTimeline(state.eventId)
+                            onDelete(state.eventId)
                         }
                     )
-                    ListItem(
-                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())),
-                        headlineContent = { Text(stringResource(CommonStrings.action_share)) },
-                        style = ListItemStyle.Primary,
-                        onClick = {
-                            onShare(state.eventId)
-                        }
-                    )
-                    ListItem(
-                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Forward())),
-                        headlineContent = { Text(stringResource(CommonStrings.action_forward)) },
-                        style = ListItemStyle.Primary,
-                        onClick = {
-                            onForward(state.eventId)
-                        }
-                    )
-                    ListItem(
-                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())),
-                        headlineContent = { Text(stringResource(CommonStrings.action_download)) },
-                        style = ListItemStyle.Primary,
-                        onClick = {
-                            onDownload(state.eventId)
-                        }
-                    )
-                    val mimeType = state.mediaInfo.mimeType
-                    val icon = when (mimeType) {
-                        MimeTypes.Apk ->
-                            ListItemContent.Icon(IconSource.Resource(R.drawable.ic_apk_install))
-                        else ->
-                            ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut()))
-                    }
-                    val wording = when (mimeType) {
-                        MimeTypes.Apk -> stringResource(id = CommonStrings.common_install_apk_android)
-                        else -> stringResource(id = CommonStrings.action_open_with)
-                    }
-                    ListItem(
-                        leadingContent = icon,
-                        headlineContent = { Text(wording) },
-                        style = ListItemStyle.Primary,
-                        onClick = {
-                            onOpenWith(state.eventId)
-                        }
-                    )
-                    if (state.canDelete) {
-                        HorizontalDivider()
-                        ListItem(
-                            leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Delete())),
-                            headlineContent = { Text(stringResource(CommonStrings.action_delete)) },
-                            style = ListItemStyle.Destructive,
-                            onClick = {
-                                onDelete(state.eventId)
-                            }
-                        )
-                    }
-                    Spacer(modifier = Modifier.height(16.dp))
                 }
+                Spacer(modifier = Modifier.height(16.dp))
             }
         }
     }
@@ -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>