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

Use BigIcon and fix colors

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/setup/biometric/SetupBiometricView.kt

@@ -20,6 +20,7 @@ import io.element.android.features.lockscreen.impl.R
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+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.Button
@@ -51,7 +52,7 @@ fun SetupBiometricView(
 private fun SetupBiometricHeader() {
     val biometricAuth = stringResource(id = R.string.screen_app_lock_biometric_authentication)
     IconTitleSubtitleMolecule(
-        iconImageVector = Icons.Default.Fingerprint,
+        iconStyle = BigIcon.Style.Default(Icons.Default.Fingerprint),
         title = stringResource(id = R.string.screen_app_lock_settings_enable_biometric_unlock),
         subTitle = stringResource(id = R.string.screen_app_lock_setup_biometric_unlock_subtitle, biometricAuth),
     )

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/setup/pin/SetupPinView.kt

@@ -33,6 +33,7 @@ import io.element.android.features.lockscreen.impl.R
 import io.element.android.features.lockscreen.impl.components.PinEntryTextField
 import io.element.android.features.lockscreen.impl.setup.pin.validation.SetupPinFailure
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -88,7 +89,7 @@ private fun SetupPinHeader(
                 stringResource(id = R.string.screen_app_lock_setup_choose_pin)
             },
             subTitle = stringResource(id = R.string.screen_app_lock_setup_pin_context, appName),
-            iconImageVector = Icons.Filled.Lock,
+            iconStyle = BigIcon.Style.Default(Icons.Filled.Lock),
         )
     }
 }

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockView.kt

@@ -51,7 +51,7 @@ import io.element.android.features.lockscreen.impl.pin.model.PinEntry
 import io.element.android.features.lockscreen.impl.unlock.keypad.PinKeypad
 import io.element.android.libraries.architecture.AsyncAction
 import io.element.android.libraries.architecture.AsyncData
-import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
@@ -299,7 +299,7 @@ private fun PinUnlockHeader(
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         if (isInAppUnlock) {
-            RoundedIconAtom(imageVector = Icons.Filled.Lock)
+            BigIcon(style = BigIcon.Style.Default(Icons.Filled.Lock))
         } else {
             Icon(
                 modifier = Modifier

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/changeaccountprovider/ChangeAccountProviderView.kt

@@ -22,7 +22,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -34,6 +33,7 @@ import io.element.android.features.login.impl.accountprovider.AccountProviderVie
 import io.element.android.features.login.impl.changeserver.ChangeServerEvents
 import io.element.android.features.login.impl.changeserver.ChangeServerView
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -74,8 +74,7 @@ fun ChangeAccountProviderView(
             ) {
                 IconTitleSubtitleMolecule(
                     modifier = Modifier.padding(top = 16.dp, bottom = 32.dp, start = 16.dp, end = 16.dp),
-                    iconImageVector = Icons.Filled.Home,
-                    iconTint = MaterialTheme.colorScheme.primary,
+                    iconStyle = BigIcon.Style.Default(Icons.Filled.Home),
                     title = stringResource(id = R.string.screen_change_account_provider_title),
                     subTitle = stringResource(id = R.string.screen_change_account_provider_subtitle),
                 )

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt

@@ -27,6 +27,7 @@ import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -59,7 +60,7 @@ fun ConfirmAccountProviderView(
         header = {
             IconTitleSubtitleMolecule(
                 modifier = Modifier.padding(top = 60.dp),
-                iconImageVector = Icons.Filled.AccountCircle,
+                iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
                 title = stringResource(
                     id = if (state.isAccountCreation) {
                         R.string.screen_account_provider_signup_title

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt

@@ -48,6 +48,7 @@ import io.element.android.features.login.impl.error.loginError
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
@@ -110,7 +111,7 @@ fun LoginPasswordView(
             // Title
             IconTitleSubtitleMolecule(
                 modifier = Modifier.padding(top = 20.dp, start = 16.dp, end = 16.dp),
-                iconImageVector = Icons.Filled.AccountCircle,
+                iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
                 title = stringResource(
                     id = R.string.screen_account_provider_signin_title,
                     state.accountProvider.title

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/searchaccountprovider/SearchAccountProviderView.kt

@@ -48,6 +48,7 @@ import io.element.android.features.login.impl.changeserver.ChangeServerView
 import io.element.android.features.login.impl.resolver.HomeserverData
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.form.textFieldState
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -94,7 +95,7 @@ fun SearchAccountProviderView(
                 item {
                     IconTitleSubtitleMolecule(
                         modifier = Modifier.padding(top = 16.dp, bottom = 40.dp, start = 16.dp, end = 16.dp),
-                        iconImageVector = CompoundIcons.Search(),
+                        iconStyle = BigIcon.Style.Default(CompoundIcons.Search()),
                         title = stringResource(id = R.string.screen_account_provider_form_title),
                         subTitle = stringResource(id = R.string.screen_account_provider_form_subtitle),
                     )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/sendfailure/resolve/ResolveVerifiedUserSendFailureView.kt

@@ -24,11 +24,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 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.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailure
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+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.Button
@@ -80,9 +79,7 @@ fun ResolveVerifiedUserSendFailureView(
                     modifier = Modifier.padding(24.dp),
                     title = state.verifiedUserSendFailure.title(),
                     subTitle = state.verifiedUserSendFailure.subtitle(),
-                    iconImageVector = CompoundIcons.Error(),
-                    iconTint = ElementTheme.colors.iconCriticalPrimary,
-                    iconBackgroundTint = ElementTheme.colors.bgCriticalSubtle,
+                    iconStyle = BigIcon.Style.AlertSolid,
                 )
                 ButtonColumnMolecule(
                     modifier = Modifier.padding(horizontal = 16.dp, vertical = 16.dp),

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListView.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import im.vector.app.features.analytics.plan.Interaction
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.actionlist.ActionListEvents
 import io.element.android.features.messages.impl.actionlist.ActionListView
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
@@ -36,9 +37,9 @@ import io.element.android.features.messages.impl.timeline.protection.TimelinePro
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
 import io.element.android.features.poll.api.pollcontent.PollTitleView
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
@@ -154,7 +155,7 @@ private fun PinnedMessagesListEmpty(
         IconTitleSubtitleMolecule(
             title = stringResource(id = CommonStrings.screen_pinned_timeline_empty_state_headline),
             subTitle = stringResource(id = CommonStrings.screen_pinned_timeline_empty_state_description, pinActionText),
-            iconResourceId = CompoundDrawables.ic_compound_pin,
+            iconStyle = BigIcon.Style.Default(CompoundIcons.Pin()),
         )
     }
 }

features/signedout/impl/src/main/kotlin/io/element/android/features/signedout/impl/SignedOutView.kt

@@ -29,6 +29,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubti
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListItem
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+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.Button
@@ -63,8 +64,7 @@ private fun SignedOutHeader(state: SignedOutState) {
         modifier = Modifier.padding(top = 60.dp, bottom = 12.dp),
         title = stringResource(id = R.string.screen_signed_out_title),
         subTitle = stringResource(id = R.string.screen_signed_out_subtitle, state.appName),
-        iconImageVector = Icons.Filled.AccountCircle,
-        iconTint = ElementTheme.colors.iconSecondary,
+        iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
     )
 }
 

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,
         )

tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt

@@ -67,7 +67,6 @@ class KonsistPreviewTest {
                 "ColorAliasesPreview",
                 "DefaultRoomListTopBarWithIndicatorPreview",
                 "GradientFloatingActionButtonCircleShapePreview",
-                "IconTitleSubtitleMoleculeWithResIconPreview",
                 "IconsCompoundPreview",
                 "IconsOtherPreview",
                 "MarkdownTextComposerEditPreview",