Feature/compose cleanup (#1543)

* Moving color files

* Moving theme classes into their own package

* Only obtain new theme when required

* UI Tweaks

Using the proper color for danger as opposed to one hardcoded color
Reusing BlackAlpha40
Using the right delete icon in settings

* matching figma

* Matching signature across buttons

* Dialogs do not have a 'x' button by default

* Updated typography

Updated the typography in an composition local so it can be accessed from anyehere in compose and matching the figma declarations.

* Centered text in control messages

* Fixing new color access for action items

* renaming spacing to be more general

* Unifying dimensions and rectifying design inconsistencies

Unifying spacing values and reusing common ones
Identified spacing issues and inconsistencies in design and figma

* Rounded corners for the new conversation sheet

* Rounding sheets corners

* Spacing fixes and UI consolidating

Discussed with QA to make sure the 'new message' screen should  indeed behave as the other screens and use disabled state instead of disappearing

* Disappearing messages tweaks

Re-using our new radio buttons in disappearing messages
Tweaking UI to match designs

* Cleaning up spaces

* Migrating to Material3

* Fixing UI issues found

* PR feedbacks

---------

Co-authored-by: bemusementpark <bemusementpark>

Author: ThomasSession

app/build.gradle

@@ -381,7 +381,7 @@ dependencies {
     implementation "androidx.compose.ui:ui-tooling:$composeVersion"
     implementation "androidx.compose.runtime:runtime-livedata:$composeVersion"
     implementation "androidx.compose.foundation:foundation-layout:$composeVersion"
-    implementation "androidx.compose.material:material:$composeVersion"
+    implementation "androidx.compose.material3:material3:1.2.1"
     androidTestImplementation "androidx.compose.ui:ui-test-junit4-android:$composeVersion"
     debugImplementation "androidx.compose.ui:ui-test-manifest:$composeVersion"
 

app/src/main/java/org/thoughtcrime/securesms/SessionDialogBuilder.kt

@@ -114,14 +114,14 @@ class SessionDialogBuilder(val context: Context) {
         options,
     ) { dialog, it -> onSelect(it); dialog.dismiss() }
 
-    fun destructiveButton(
+    fun dangerButton(
         @StringRes text: Int,
         @StringRes contentDescription: Int = text,
         listener: () -> Unit = {}
     ) = button(
         text,
         contentDescription,
-        R.style.Widget_Session_Button_Dialog_DestructiveText,
+        R.style.Widget_Session_Button_Dialog_DangerText,
     ) { listener() }
 
     fun okButton(listener: (() -> Unit) = {}) = button(android.R.string.ok) { listener() }

app/src/main/java/org/thoughtcrime/securesms/components/menu/ActionItem.kt

@@ -2,7 +2,7 @@ package org.thoughtcrime.securesms.components.menu
 
 import android.content.Context
 import androidx.annotation.AttrRes
-import androidx.annotation.ColorRes
+import androidx.annotation.ColorInt
 
 /**
  * Represents an action to be rendered
@@ -13,5 +13,5 @@ data class ActionItem(
   val action: Runnable,
   val contentDescription: Int? = null,
   val subtitle: ((Context) -> CharSequence?)? = null,
-  @ColorRes val color: Int? = null,
+  @ColorInt val color: Int? = null,
 )

app/src/main/java/org/thoughtcrime/securesms/components/menu/ContextMenuList.kt

@@ -78,7 +78,7 @@ class ContextMenuList(recyclerView: RecyclerView, onItemClick: () -> Unit) {
 
     override fun bind(model: DisplayItem) {
       val item = model.item
-      val color = item.color?.let { ContextCompat.getColor(context, it) }
+      val color = item.color
 
       if (item.iconRes > 0) {
         val typedValue = TypedValue()

app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/DisappearingMessages.kt

@@ -14,7 +14,6 @@ import org.session.libsession.utilities.ExpirationUtil
 import org.session.libsession.utilities.SSKEnvironment.MessageExpirationManagerProtocol
 import org.session.libsession.utilities.TextSecurePreferences
 import org.session.libsession.utilities.getExpirationTypeDisplayValue
-import org.thoughtcrime.securesms.database.ThreadDatabase
 import org.thoughtcrime.securesms.database.model.MessageRecord
 import org.thoughtcrime.securesms.showSessionDialog
 import org.thoughtcrime.securesms.util.ConfigurationMessageUtilities
@@ -57,7 +56,7 @@ class DisappearingMessages @Inject constructor(
                     context.getExpirationTypeDisplayValue(message.isNotDisappearAfterRead)
                 )
         })
-        destructiveButton(
+        dangerButton(
                 text = if (message.expiresIn == 0L) R.string.dialog_disappearing_messages_follow_setting_confirm else R.string.dialog_disappearing_messages_follow_setting_set,
                 contentDescription = if (message.expiresIn == 0L) R.string.AccessibilityId_confirm else R.string.AccessibilityId_set_button
         ) {

app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/Adapter.kt

@@ -13,8 +13,8 @@ import kotlin.time.Duration.Companion.seconds
 
 fun State.toUiState() = UiState(
     cards = listOfNotNull(
-        typeOptions()?.let { ExpiryOptionsCard(GetString(R.string.activity_disappearing_messages_delete_type), it) },
-        timeOptions()?.let { ExpiryOptionsCard(GetString(R.string.activity_disappearing_messages_timer), it) }
+        typeOptions()?.let { ExpiryOptionsCardData(GetString(R.string.activity_disappearing_messages_delete_type), it) },
+        timeOptions()?.let { ExpiryOptionsCardData(GetString(R.string.activity_disappearing_messages_timer), it) }
     ),
     showGroupFooter = isGroup && isNewConfigEnabled,
     showSetButton = isSelfAdmin

app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/DisappearingMessages.kt

@@ -3,11 +3,13 @@ package org.thoughtcrime.securesms.conversation.disappearingmessages.ui
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -18,15 +20,15 @@ import androidx.compose.ui.unit.dp
 import network.loki.messenger.R
 import network.loki.messenger.libsession_util.util.ExpiryMode
 import org.thoughtcrime.securesms.ui.Callbacks
-import org.thoughtcrime.securesms.ui.LocalDimensions
+import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 import org.thoughtcrime.securesms.ui.NoOpCallbacks
 import org.thoughtcrime.securesms.ui.OptionsCard
 import org.thoughtcrime.securesms.ui.RadioOption
-import org.thoughtcrime.securesms.ui.color.LocalColors
+import org.thoughtcrime.securesms.ui.theme.LocalColors
 import org.thoughtcrime.securesms.ui.components.SlimOutlineButton
 import org.thoughtcrime.securesms.ui.contentDescription
-import org.thoughtcrime.securesms.ui.extraSmall
 import org.thoughtcrime.securesms.ui.fadingEdges
+import org.thoughtcrime.securesms.ui.theme.LocalType
 
 typealias ExpiryCallbacks = Callbacks<ExpiryMode>
 typealias ExpiryRadioOption = RadioOption<ExpiryMode>
@@ -39,26 +41,32 @@ fun DisappearingMessages(
 ) {
     val scrollState = rememberScrollState()
 
-    Column(modifier = modifier.padding(horizontal = LocalDimensions.current.margin)) {
+    Column(modifier = modifier.padding(horizontal = LocalDimensions.current.spacing)) {
         Box(modifier = Modifier.weight(1f)) {
             Column(
                 modifier = Modifier
-                    .padding(bottom = 20.dp)
+                    .padding(vertical = LocalDimensions.current.spacing)
                     .verticalScroll(scrollState)
                     .fadingEdges(scrollState),
-                verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallItemSpacing)
             ) {
-                state.cards.forEach {
-                    OptionsCard(it, callbacks)
+                state.cards.forEachIndexed { index, option ->
+                    OptionsCard(option, callbacks)
+
+                    // add spacing if not the last item
+                    if(index != state.cards.lastIndex){
+                        Spacer(modifier = Modifier.height(LocalDimensions.current.spacing))
+                    }
                 }
 
                 if (state.showGroupFooter) Text(
                     text = stringResource(R.string.activity_disappearing_messages_group_footer),
-                    style = extraSmall,
+                    style = LocalType.current.extraSmall,
                     fontWeight = FontWeight(400),
                     color = LocalColors.current.textSecondary,
                     textAlign = TextAlign.Center,
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = LocalDimensions.current.xsSpacing)
                 )
             }
         }
@@ -68,7 +76,7 @@ fun DisappearingMessages(
             modifier = Modifier
                 .contentDescription(R.string.AccessibilityId_set_button)
                 .align(Alignment.CenterHorizontally)
-                .padding(bottom = 20.dp),
+                .padding(bottom = LocalDimensions.current.spacing),
             onClick = callbacks::onSetClick
         )
     }

app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/DisappearingMessagesPreview.kt

@@ -10,9 +10,9 @@ import androidx.compose.ui.unit.dp
 import network.loki.messenger.libsession_util.util.ExpiryMode
 import org.thoughtcrime.securesms.conversation.disappearingmessages.ExpiryType
 import org.thoughtcrime.securesms.conversation.disappearingmessages.State
-import org.thoughtcrime.securesms.ui.PreviewTheme
-import org.thoughtcrime.securesms.ui.color.Colors
-import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
+import org.thoughtcrime.securesms.ui.theme.PreviewTheme
+import org.thoughtcrime.securesms.ui.theme.ThemeColors
+import org.thoughtcrime.securesms.ui.theme.SessionColorsParameterProvider
 
 @Preview(widthDp = 450, heightDp = 700)
 @Composable
@@ -51,7 +51,7 @@ class StatePreviewParameterProvider : PreviewParameterProvider<State> {
 @Preview
 @Composable
 fun PreviewThemes(
-    @PreviewParameter(SessionColorsParameterProvider::class) colors: Colors
+    @PreviewParameter(SessionColorsParameterProvider::class) colors: ThemeColors
 ) {
     PreviewTheme(colors) {
         DisappearingMessages(

app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/UiState.kt

@@ -5,15 +5,15 @@ import network.loki.messenger.libsession_util.util.ExpiryMode
 import org.thoughtcrime.securesms.ui.GetString
 import org.thoughtcrime.securesms.ui.RadioOption
 
-typealias ExpiryOptionsCard = OptionsCard<ExpiryMode>
+typealias ExpiryOptionsCardData = OptionsCardData<ExpiryMode>
 
 data class UiState(
-    val cards: List<ExpiryOptionsCard> = emptyList(),
+    val cards: List<ExpiryOptionsCardData> = emptyList(),
     val showGroupFooter: Boolean = false,
     val showSetButton: Boolean = true
 ) {
     constructor(
-        vararg cards: ExpiryOptionsCard,
+        vararg cards: ExpiryOptionsCardData,
         showGroupFooter: Boolean = false,
         showSetButton: Boolean = true,
     ): this(
@@ -23,7 +23,7 @@ data class UiState(
     )
 }
 
-data class OptionsCard<T>(
+data class OptionsCardData<T>(
     val title: GetString,
     val options: List<RadioOption<T>>
 ) {

app/src/main/java/org/thoughtcrime/securesms/conversation/start/home/StartConversation.kt

@@ -7,8 +7,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -21,23 +22,25 @@ import org.thoughtcrime.securesms.conversation.start.NullStartConversationDelega
 import org.thoughtcrime.securesms.conversation.start.StartConversationDelegate
 import org.thoughtcrime.securesms.ui.Divider
 import org.thoughtcrime.securesms.ui.ItemButton
-import org.thoughtcrime.securesms.ui.LocalDimensions
-import org.thoughtcrime.securesms.ui.PreviewTheme
-import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
-import org.thoughtcrime.securesms.ui.color.Colors
-import org.thoughtcrime.securesms.ui.color.LocalColors
+import org.thoughtcrime.securesms.ui.theme.LocalDimensions
+import org.thoughtcrime.securesms.ui.theme.PreviewTheme
+import org.thoughtcrime.securesms.ui.theme.SessionColorsParameterProvider
+import org.thoughtcrime.securesms.ui.theme.ThemeColors
+import org.thoughtcrime.securesms.ui.theme.LocalColors
 import org.thoughtcrime.securesms.ui.components.AppBar
 import org.thoughtcrime.securesms.ui.components.QrImage
 import org.thoughtcrime.securesms.ui.contentDescription
-import org.thoughtcrime.securesms.ui.small
-import org.thoughtcrime.securesms.ui.xl
+import org.thoughtcrime.securesms.ui.theme.LocalType
 
 @Composable
 internal fun StartConversationScreen(
     accountId: String,
     delegate: StartConversationDelegate
 ) {
-    Column(modifier = Modifier.background(LocalColors.current.backgroundSecondary)) {
+    Column(modifier = Modifier.background(
+        LocalColors.current.backgroundSecondary,
+        shape = MaterialTheme.shapes.small
+    )) {
         AppBar(stringResource(R.string.dialog_start_conversation_title), onClose = delegate::onDialogClosePressed)
         Surface(
             modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection()),
@@ -74,18 +77,18 @@ internal fun StartConversationScreen(
                 )
                 Column(
                     modifier = Modifier
-                        .padding(horizontal = LocalDimensions.current.margin)
-                        .padding(top = LocalDimensions.current.itemSpacing)
-                        .padding(bottom = LocalDimensions.current.margin)
+                        .padding(horizontal = LocalDimensions.current.spacing)
+                        .padding(top = LocalDimensions.current.spacing)
+                        .padding(bottom = LocalDimensions.current.spacing)
                 ) {
-                    Text(stringResource(R.string.accountIdYours), style = xl)
-                    Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsItemSpacing))
+                    Text(stringResource(R.string.accountIdYours), style = LocalType.current.xl)
+                    Spacer(modifier = Modifier.height(LocalDimensions.current.xxsSpacing))
                     Text(
                         text = stringResource(R.string.qrYoursDescription),
                         color = LocalColors.current.textSecondary,
-                        style = small
+                        style = LocalType.current.small
                     )
-                    Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
+                    Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
                     QrImage(
                         string = accountId,
                         Modifier.contentDescription(R.string.AccessibilityId_qr_code),
@@ -100,7 +103,7 @@ internal fun StartConversationScreen(
 @Preview
 @Composable
 private fun PreviewStartConversationScreen(
-    @PreviewParameter(SessionColorsParameterProvider::class) colors: Colors
+    @PreviewParameter(SessionColorsParameterProvider::class) colors: ThemeColors
 ) {
     PreviewTheme(colors) {
         StartConversationScreen(