Merge pull request #3719 from element-hq/feature/bma/iconSizeAndColor

Use BigIcon and fix colors

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt

@@ -42,7 +42,7 @@ import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 @Composable
 fun RoundedIconAtom(
     modifier: Modifier = Modifier,
-    size: RoundedIconAtomSize = RoundedIconAtomSize.Large,
+    size: RoundedIconAtomSize = RoundedIconAtomSize.Big,
     resourceId: Int? = null,
     imageVector: ImageVector? = null,
     tint: Color = MaterialTheme.colorScheme.secondary,
@@ -71,21 +71,21 @@ fun RoundedIconAtom(
 private fun RoundedIconAtomSize.toContainerSize(): Dp {
     return when (this) {
         RoundedIconAtomSize.Medium -> 30.dp
-        RoundedIconAtomSize.Large -> 70.dp
+        RoundedIconAtomSize.Big -> 36.dp
     }
 }
 
 private fun RoundedIconAtomSize.toCornerSize(): Dp {
     return when (this) {
         RoundedIconAtomSize.Medium -> 8.dp
-        RoundedIconAtomSize.Large -> 14.dp
+        RoundedIconAtomSize.Big -> 8.dp
     }
 }
 
 private fun RoundedIconAtomSize.toIconSize(): Dp {
     return when (this) {
         RoundedIconAtomSize.Medium -> 16.dp
-        RoundedIconAtomSize.Large -> 48.dp
+        RoundedIconAtomSize.Big -> 24.dp
     }
 }
 
@@ -98,7 +98,7 @@ internal fun RoundedIconAtomPreview() = ElementPreview {
             imageVector = Icons.Filled.Home,
         )
         RoundedIconAtom(
-            size = RoundedIconAtomSize.Large,
+            size = RoundedIconAtomSize.Big,
             imageVector = Icons.Filled.Home,
         )
     }
@@ -106,5 +106,5 @@ internal fun RoundedIconAtomPreview() = ElementPreview {
 
 enum class RoundedIconAtomSize {
     Medium,
-    Large
+    Big,
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt

@@ -15,50 +15,34 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
-import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
-import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 
 /**
  * IconTitleSubtitleMolecule is a molecule which displays an icon, a title and a subtitle.
  *
  * @param title the title to display
  * @param subTitle the subtitle to display
+ * @param iconStyle the style of the [BigIcon] to display
  * @param modifier the modifier to apply to this layout
- * @param iconResourceId the resource id of the icon to display, exclusive with [iconImageVector]
- * @param iconImageVector the image vector of the icon to display, exclusive with [iconResourceId]
- * @param iconTint the tint to apply to the icon
- * @param iconBackgroundTint the tint to apply to the icon background
  */
 @Composable
 fun IconTitleSubtitleMolecule(
     title: String,
     subTitle: String?,
+    iconStyle: BigIcon.Style,
     modifier: Modifier = Modifier,
-    iconResourceId: Int? = null,
-    iconImageVector: ImageVector? = null,
-    iconTint: Color = MaterialTheme.colorScheme.primary,
-    iconBackgroundTint: Color = ElementTheme.colors.temporaryColorBgSpecial,
 ) {
     Column(modifier) {
-        RoundedIconAtom(
-            modifier = Modifier
-                .align(Alignment.CenterHorizontally),
-            size = RoundedIconAtomSize.Large,
-            resourceId = iconResourceId,
-            imageVector = iconImageVector,
-            tint = iconTint,
-            backgroundTint = iconBackgroundTint,
+        BigIcon(
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            style = iconStyle,
         )
         Spacer(modifier = Modifier.height(16.dp))
         Text(
@@ -86,18 +70,7 @@ fun IconTitleSubtitleMolecule(
 @Composable
 internal fun IconTitleSubtitleMoleculePreview() = ElementPreview {
     IconTitleSubtitleMolecule(
-        iconImageVector = CompoundIcons.Chat(),
-        title = "Title",
-        subTitle = "Subtitle",
-    )
-}
-
-@PreviewsDayNight
-@Composable
-internal fun IconTitleSubtitleMoleculeWithResIconPreview() = ElementPreview {
-    IconTitleSubtitleMolecule(
-        iconResourceId = CompoundDrawables.ic_compound_admin,
-        iconTint = Color.Black,
+        iconStyle = BigIcon.Style.Default(CompoundIcons.Chat()),
         title = "Title",
         subTitle = "Subtitle",
     )

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

@@ -30,12 +30,12 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.bigIconDefaultBackgroundColor
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.ui.strings.CommonStrings
 
 /**
  * Compound component that display a big icon centered in a rounded square.
+ * Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1960-553&node-type=frame&m=dev
  */
 object BigIcon {
     /**
@@ -84,7 +84,7 @@ object BigIcon {
         modifier: Modifier = Modifier,
     ) {
         val backgroundColor = when (style) {
-            is Style.Default -> ElementTheme.colors.bigIconDefaultBackgroundColor
+            is Style.Default -> ElementTheme.colors.bgSubtleSecondary
             Style.Alert, Style.Success -> Color.Transparent
             Style.AlertSolid -> ElementTheme.colors.bgCriticalSubtle
             Style.SuccessSolid -> ElementTheme.colors.bgSuccessSubtle
@@ -100,7 +100,7 @@ object BigIcon {
             Style.Success, Style.SuccessSolid -> stringResource(CommonStrings.common_success)
         }
         val iconTint = when (style) {
-            is Style.Default -> ElementTheme.colors.iconSecondaryAlpha
+            is Style.Default -> ElementTheme.colors.iconSecondary
             Style.Alert, Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
             Style.Success, Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
         }

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

@@ -132,10 +132,6 @@ val SemanticColors.mentionPillBackground
         Color(0x26f4f7fa)
     }
 
-@OptIn(CoreColorToken::class)
-val SemanticColors.bigIconDefaultBackgroundColor
-    get() = if (isLight) LightColorTokens.colorAlphaGray300 else DarkColorTokens.colorAlphaGray300
-
 @OptIn(CoreColorToken::class)
 val SemanticColors.bigCheckmarkBorderColor
     get() = if (isLight) LightColorTokens.colorGray400 else DarkColorTokens.colorGray400
@@ -195,7 +191,6 @@ internal fun ColorAliasesPreview() = ElementPreview {
             "progressIndicatorTrackColor" to ElementTheme.colors.progressIndicatorTrackColor,
             "temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
             "iconSuccessPrimaryBackground" to ElementTheme.colors.iconSuccessPrimaryBackground,
-            "bigIconBackgroundColor" to ElementTheme.colors.bigIconDefaultBackgroundColor,
             "bigCheckmarkBorderColor" to ElementTheme.colors.bigCheckmarkBorderColor,
             "highlightedMessageBackgroundColor" to ElementTheme.colors.highlightedMessageBackgroundColor,
         )