Use LocalDimensions in LandingActivity

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

@@ -24,6 +24,7 @@ import network.loki.messenger.R
 import org.session.libsession.utilities.TextSecurePreferences
 import org.thoughtcrime.securesms.ui.AppTheme
 import org.thoughtcrime.securesms.ui.ItemButton
+import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.classicDarkColors
 import org.thoughtcrime.securesms.ui.components.AppBar
 import org.thoughtcrime.securesms.ui.components.QrImage
@@ -57,20 +58,20 @@ class NewConversationHomeFragment : Fragment() {
         Column(modifier = Modifier.background(MaterialTheme.colors.primarySurface)) {
             AppBar(stringResource(R.string.dialog_new_conversation_title), onClose = { delegate.onDialogClosePressed() })
             ItemButton(textId = R.string.messageNew, icon = R.drawable.ic_message) { delegate.onNewMessageSelected() }
-            Divider(modifier = Modifier.padding(start = 80.dp))
+            Divider(startIndent = LocalDimensions.current.dividerIndent)
             ItemButton(textId = R.string.activity_create_group_title, icon = R.drawable.ic_group) { delegate.onCreateGroupSelected() }
-            Divider(modifier = Modifier.padding(start = 80.dp))
+            Divider(startIndent = LocalDimensions.current.dividerIndent)
             ItemButton(textId = R.string.dialog_join_community_title, icon = R.drawable.ic_globe) { delegate.onJoinCommunitySelected() }
-            Divider(modifier = Modifier.padding(start = 80.dp))
+            Divider(startIndent = LocalDimensions.current.dividerIndent)
             ItemButton(textId = R.string.activity_settings_invite_button_title, icon = R.drawable.ic_invite_friend, contentDescription = R.string.AccessibilityId_invite_friend_button) { delegate.onInviteFriend() }
             Column(
                 modifier = Modifier
-                    .padding(horizontal = 32.dp)
-                    .padding(top = 20.dp)) {
+                    .padding(horizontal = LocalDimensions.current.marginMedium)
+                    .padding(top = LocalDimensions.current.itemSpacingMedium)) {
                 Text(text = stringResource(R.string.accountIdYours), style = MaterialTheme.typography.medium)
-                Spacer(modifier = Modifier.height(4.dp))
+                Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingTiny))
                 Text(text = stringResource(R.string.qrYoursDescription), color = classicDarkColors[5], style = MaterialTheme.typography.small)
-                Spacer(modifier = Modifier.height(20.dp))
+                Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingSmall))
                 QrImage(string = TextSecurePreferences.getLocalNumber(requireContext())!!, Modifier.contentDescription(R.string.AccessibilityId_qr_code))
             }
         }

app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt

@@ -17,11 +17,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Card
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -49,6 +49,8 @@ import org.thoughtcrime.securesms.onboarding.pickname.startPickDisplayNameActivi
 import org.thoughtcrime.securesms.service.KeyCachingService
 import org.thoughtcrime.securesms.showOpenUrlDialog
 import org.thoughtcrime.securesms.ui.AppTheme
+import org.thoughtcrime.securesms.ui.Cell
+import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.PreviewTheme
 import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
 import org.thoughtcrime.securesms.ui.classicDarkColors
@@ -119,63 +121,68 @@ class LandingActivity : BaseActionBarActivity() {
             }
         }
 
-        Column(modifier = Modifier.padding(horizontal = 36.dp)) {
-            Spacer(modifier = Modifier.weight(1f))
-            Text(
-                stringResource(R.string.onboardingBubblePrivacyInYourPocket),
-                modifier = Modifier.align(Alignment.CenterHorizontally),
-                style = MaterialTheme.typography.h4,
-                textAlign = TextAlign.Center
-            )
-            Spacer(modifier = Modifier.height(24.dp))
+        Column {
+            Column(modifier = Modifier
+                .weight(1f)
+                .padding(horizontal = LocalDimensions.current.marginMedium)) {
+                Spacer(modifier = Modifier.weight(1f))
+                Text(
+                    stringResource(R.string.onboardingBubblePrivacyInYourPocket),
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                    style = MaterialTheme.typography.h4,
+                    textAlign = TextAlign.Center
+                )
+                Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingMedium))
 
-            LazyColumn(
-                state = listState,
-                modifier = Modifier
-                    .heightIn(min = 200.dp)
-                    .fillMaxWidth()
-                    .weight(2f),
-                verticalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
-                items(
-                    MESSAGES.take(count),
-                    key = { it.stringId }
-                ) { item ->
-                    AnimateMessageText(
-                        stringResource(item.stringId),
-                        item.isOutgoing
-                    )
+                LazyColumn(
+                    state = listState,
+                    modifier = Modifier
+                        .heightIn(min = 200.dp)
+                        .fillMaxWidth()
+                        .weight(3f),
+                    verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingSmall)
+                ) {
+                    items(
+                        MESSAGES.take(count),
+                        key = { it.stringId }
+                    ) { item ->
+                        AnimateMessageText(
+                            stringResource(item.stringId),
+                            item.isOutgoing
+                        )
+                    }
                 }
+
+                Spacer(modifier = Modifier.weight(1f))
             }
 
-            Spacer(modifier = Modifier.weight(1f))
-
-            OutlineButton(
-                text = stringResource(R.string.onboardingAccountCreate),
-                modifier = Modifier
-                    .contentDescription(R.string.AccessibilityId_create_account_button)
-                    .width(262.dp)
-                    .align(Alignment.CenterHorizontally),
-                onClick = ::startPickDisplayNameActivity
-            )
-            Spacer(modifier = Modifier.height(14.dp))
-            FilledButton(
-                text = stringResource(R.string.onboardingAccountExists),
-                modifier = Modifier
-                    .width(262.dp)
-                    .align(Alignment.CenterHorizontally)
-                    .contentDescription(R.string.AccessibilityId_restore_account_button)
-            ) { start<LinkDeviceActivity>() }
-            Spacer(modifier = Modifier.height(8.dp))
-            BorderlessButton(
-                text = stringResource(R.string.onboardingTosPrivacy),
-                modifier = Modifier
-                    .width(262.dp)
-                    .align(Alignment.CenterHorizontally)
-                    .contentDescription(R.string.AccessibilityId_open_url),
-                onClick = ::openDialog
-            )
-            Spacer(modifier = Modifier.height(8.dp))
+            Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.marginLarge)) {
+                FilledButton(
+                    text = stringResource(R.string.onboardingAccountCreate),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.CenterHorizontally)
+                        .contentDescription(R.string.AccessibilityId_create_account_button),
+                    onClick = ::startPickDisplayNameActivity
+                )
+                Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingSmall))
+                OutlineButton(
+                    text = stringResource(R.string.onboardingAccountExists),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.CenterHorizontally)
+                        .contentDescription(R.string.AccessibilityId_restore_account_button)
+                ) { start<LinkDeviceActivity>() }
+                BorderlessButton(
+                    text = stringResource(R.string.onboardingTosPrivacy),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.CenterHorizontally)
+                        .contentDescription(R.string.AccessibilityId_open_url),
+                    onClick = ::openDialog
+                )
+                Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingExtraSmall))
+            }
         }
     }
 
@@ -218,47 +225,34 @@ private fun AnimateMessageText(text: String, isOutgoing: Boolean, modifier: Modi
 
 @Composable
 private fun MessageText(text: String, isOutgoing: Boolean, modifier: Modifier) {
-    if (isOutgoing) OutgoingText(text, modifier) else IncomingText(text, modifier)
-}
-
-@Composable
-private fun IncomingText(text: String, modifier: Modifier = Modifier) {
-    ChatText(
-        text,
-        color = classicDarkColors[2],
-        modifier = modifier
-    )
-}
-
-@Composable
-private fun OutgoingText(text: String, modifier: Modifier = Modifier) {
     Box(modifier = modifier then Modifier.fillMaxWidth()) {
-        ChatText(
+        MessageText(
             text,
-            color = session_accent,
-            textColor = MaterialTheme.colors.primary,
-            modifier = Modifier.align(Alignment.TopEnd)
+            color = if (isOutgoing) session_accent else classicDarkColors[2],
+            textColor = if (isOutgoing) MaterialTheme.colors.primary else Color.Unspecified,
+            modifier = Modifier.align(if (isOutgoing) Alignment.TopEnd else Alignment.TopStart)
         )
     }
 }
 
 @Composable
-private fun ChatText(
+private fun MessageText(
     text: String,
     color: Color,
     modifier: Modifier = Modifier,
     textColor: Color = Color.Unspecified
 ) {
-    Text(
-        text,
-        style = MaterialTheme.typography.large,
-        color = textColor,
-        modifier = modifier
-            .fillMaxWidth(0.666f)
-            .background(
-                color = color,
-                shape = RoundedCornerShape(size = 13.dp)
-            )
-            .padding(horizontal = 16.dp, vertical = 12.dp)
-    )
+    Card(
+        modifier = modifier.fillMaxWidth(0.666f),
+        shape = RoundedCornerShape(size = 13.dp),
+        backgroundColor = color,
+        elevation = 0.dp
+    ) {
+        Text(
+            text,
+            style = MaterialTheme.typography.large,
+            color = textColor,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
+        )
+    }
 }

app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt

@@ -5,6 +5,7 @@ import androidx.annotation.AttrRes
 import androidx.appcompat.view.ContextThemeWrapper
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.selection.LocalTextSelectionColors
 import androidx.compose.foundation.text.selection.TextSelectionColors
 import androidx.compose.material.LocalContentColor
@@ -21,7 +22,9 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.google.accompanist.themeadapter.appcompat.createAppCompatTheme
 import com.google.android.material.color.MaterialColors
@@ -32,6 +35,20 @@ val LocalButtonColor = staticCompositionLocalOf { Color.Black }
 val LocalLightCell = staticCompositionLocalOf { Color.Black }
 val LocalOnLightCell = staticCompositionLocalOf { Color.Black }
 
+val LocalDimensions = staticCompositionLocalOf { Dimensions() }
+
+data class Dimensions(
+    val itemSpacingTiny: Dp = 4.dp,
+    val itemSpacingExtraSmall: Dp = 8.dp,
+    val itemSpacingSmall: Dp = 16.dp,
+    val itemSpacingMedium: Dp = 24.dp,
+    val marginTiny: Dp = 8.dp,
+    val marginSmall: Dp = 16.dp,
+    val marginMedium: Dp = 32.dp,
+    val marginLarge: Dp = 64.dp,
+    val dividerIndent: Dp = 80.dp,
+)
+
 /**
  * Converts current Theme to Compose Theme.
  */
@@ -85,7 +102,9 @@ fun AppCompatTheme(
             surface = surface ?: colors.surface
         ),
         typography = typography,
-        shapes = shapes,
+        shapes = shapes.copy(
+            small = RoundedCornerShape(50)
+        ),
     ) {
         // We update the LocalContentColor to match our onBackground. This allows the default
         // content color to be more appropriate to the theme background

app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt

@@ -23,6 +23,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
@@ -41,7 +42,6 @@ import org.thoughtcrime.securesms.ui.extraSmall
 import kotlin.time.Duration.Companion.seconds
 
 val LocalButtonSize = staticCompositionLocalOf { mediumButton }
-val LocalButtonShape = staticCompositionLocalOf<Shape> { RoundedCornerShape(percent = 50) }
 
 @Composable
 fun Modifier.applyButtonSize() = then(LocalButtonSize.current)
@@ -56,7 +56,10 @@ fun OutlineButton(@StringRes textId: Int, modifier: Modifier = Modifier, onClick
 
 @Composable
 fun OutlineButton(text: String, modifier: Modifier = Modifier, onClick: () -> Unit) {
-    OutlineButton(modifier.contentDescription(text), onClick = onClick) { Text(text) }
+    OutlineButton(
+        modifier.contentDescription(text),
+        onClick = onClick
+    ) { Text(text) }
 }
 
 @Composable
@@ -71,7 +74,6 @@ fun OutlineButton(
         interactionSource = interactionSource,
         onClick = onClick,
         border = BorderStroke(1.dp, LocalButtonColor.current),
-        shape = LocalButtonShape.current,
         colors = ButtonDefaults.outlinedButtonColors(
             contentColor = LocalButtonColor.current,
             backgroundColor = Color.Unspecified
@@ -125,7 +127,7 @@ fun FilledButton(
     onClick: () -> Unit
 ) {
     OutlinedButton(
-        modifier = modifier.size(108.dp, 34.dp),
+        modifier = modifier,
         onClick = onClick,
         shape = RoundedCornerShape(50),
         colors = ButtonDefaults.outlinedButtonColors(