Unifying dimensions and rectifying design inconsistencies

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

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

@@ -39,7 +39,7 @@ 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

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

@@ -73,9 +73,9 @@ internal fun StartConversationScreen(
                 )
                 Column(
                     modifier = Modifier
-                        .padding(horizontal = LocalDimensions.current.margin)
+                        .padding(horizontal = LocalDimensions.current.spacing)
                         .padding(top = LocalDimensions.current.spacing)
-                        .padding(bottom = LocalDimensions.current.margin)
+                        .padding(bottom = LocalDimensions.current.spacing)
                 ) {
                     Text(stringResource(R.string.accountIdYours), style = LocalType.current.xl)
                     Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsSpacing))

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

@@ -44,7 +44,7 @@ internal fun InviteFriend(
                     .contentDescription(R.string.AccessibilityId_account_id)
                     .fillMaxWidth()
                     .border()
-                    .padding(LocalDimensions.current.smallMargin),
+                    .padding(LocalDimensions.current.spacing),
                 textAlign = TextAlign.Center,
                 style = LocalType.current.base
             )

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

@@ -78,14 +78,14 @@ private fun EnterAccountId(
             .imePadding()
     ) {
         Column(
-            modifier = Modifier.padding(horizontal = LocalDimensions.current.xxsMargin, vertical = LocalDimensions.current.xsMargin),
+            modifier = Modifier.padding(horizontal = LocalDimensions.current.xsSpacing, vertical = LocalDimensions.current.smallSpacing),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin)
+            verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing)
         ) {
             SessionOutlinedTextField(
                 text = state.newMessageIdOrOns,
                 modifier = Modifier
-                    .padding(horizontal = LocalDimensions.current.smallMargin)
+                    .padding(horizontal = LocalDimensions.current.spacing)
                     .contentDescription("Session id input box"),
                 placeholder = stringResource(R.string.accountIdOrOnsEnter),
                 onChange = callbacks::onChange,
@@ -98,7 +98,7 @@ private fun EnterAccountId(
                 text = stringResource(R.string.messageNewDescription),
                 modifier = Modifier
                     .contentDescription(R.string.AccessibilityId_help_desk_link)
-                    .padding(horizontal = LocalDimensions.current.margin)
+                    .padding(horizontal = LocalDimensions.current.mediumSpacing)
                     .fillMaxWidth(),
                 style = LocalType.current.small,
                 color = LocalColors.current.textSecondary,
@@ -111,7 +111,7 @@ private fun EnterAccountId(
             PrimaryOutlineButton(
                 modifier = Modifier
                     .align(Alignment.CenterHorizontally)
-                    .padding(horizontal = LocalDimensions.current.largeMargin)
+                    .padding(horizontal = LocalDimensions.current.xlargeSpacing)
                     .fillMaxWidth()
                     .contentDescription(R.string.next),
                 onClick = callbacks::onContinue

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt

@@ -156,7 +156,7 @@ fun MessageDetails(
     ) {
         state.record?.let { message ->
             AndroidView(
-                modifier = Modifier.padding(horizontal = LocalDimensions.current.margin),
+                modifier = Modifier.padding(horizontal = LocalDimensions.current.spacing),
                 factory = {
                     ViewVisibleMessageContentBinding.inflate(LayoutInflater.from(it)).mainContainerConstraint.apply {
                         bind(

app/src/main/java/org/thoughtcrime/securesms/home/EmptyView.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import network.loki.messenger.R
 import org.thoughtcrime.securesms.ui.Divider
 import org.thoughtcrime.securesms.ui.theme.LocalDimensions
@@ -28,7 +29,7 @@ internal fun EmptyView(newAccount: Boolean) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
-            .padding(horizontal = LocalDimensions.current.homeEmptyViewMargin)
+            .padding(horizontal = 50.dp)
     ) {
         Spacer(modifier = Modifier.weight(1f))
         Icon(
@@ -50,7 +51,7 @@ internal fun EmptyView(newAccount: Boolean) {
             )
         }
 
-        Divider(modifier = Modifier.padding(vertical = LocalDimensions.current.xsMargin))
+        Divider(modifier = Modifier.padding(vertical = LocalDimensions.current.smallSpacing))
 
         Text(
             stringResource(R.string.conversationsNone),

app/src/main/java/org/thoughtcrime/securesms/home/SeedReminder.kt

@@ -42,8 +42,8 @@ internal fun SeedReminder(startRecoveryPasswordActivity: () -> Unit) {
             Modifier
                 .background(LocalColors.current.backgroundSecondary)
                 .padding(
-                    horizontal = LocalDimensions.current.smallMargin,
-                    vertical = LocalDimensions.current.xsMargin
+                    horizontal = LocalDimensions.current.spacing,
+                    vertical = LocalDimensions.current.smallSpacing
                 )
         ) {
             Column(Modifier.weight(1f)) {
@@ -60,7 +60,7 @@ internal fun SeedReminder(startRecoveryPasswordActivity: () -> Unit) {
                     style = LocalType.current.small
                 )
             }
-            Spacer(Modifier.width(LocalDimensions.current.xxsMargin))
+            Spacer(Modifier.width(LocalDimensions.current.xsSpacing))
             SlimPrimaryOutlineButton(
                 text = stringResource(R.string.continue_2),
                 modifier = Modifier

app/src/main/java/org/thoughtcrime/securesms/onboarding/landing/Landing.kt

@@ -106,7 +106,7 @@ internal fun LandingScreen(
     Column {
         Column(modifier = Modifier
             .weight(1f)
-            .padding(horizontal = LocalDimensions.current.onboardingMargin)
+            .padding(horizontal = LocalDimensions.current.mediumSpacing)
         ) {
             Spacer(modifier = Modifier.weight(1f))
             Text(
@@ -120,7 +120,7 @@ internal fun LandingScreen(
             LazyColumn(
                 state = listState,
                 modifier = Modifier
-                    .heightIn(min = LocalDimensions.current.minScrollableViewHeight)
+                    .heightIn(min = 200.dp)
                     .fillMaxWidth()
                     .weight(3f),
                 verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing)
@@ -139,7 +139,7 @@ internal fun LandingScreen(
             Spacer(modifier = Modifier.weight(1f))
         }
 
-        Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)) {
+        Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)) {
             PrimaryFillButton(
                 text = stringResource(R.string.onboardingAccountCreate),
                 modifier = Modifier

app/src/main/java/org/thoughtcrime/securesms/onboarding/loadaccount/LoadAccount.kt

@@ -77,7 +77,7 @@ private fun RecoveryPassword(state: State, onChange: (String) -> Unit = {}, onCo
         Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
 
         Column(
-            modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
+            modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)
         ) {
             Row {
                 Text(

app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt

@@ -56,9 +56,9 @@ internal fun MessageNotificationsScreen(
     Column {
         Spacer(Modifier.weight(1f))
 
-        Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.onboardingMargin)) {
+        Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.mediumSpacing)) {
             Text(stringResource(R.string.notificationsMessage), style = LocalType.current.h4)
-            Spacer(Modifier.height(LocalDimensions.current.xsMargin))
+            Spacer(Modifier.height(LocalDimensions.current.smallSpacing))
             Text(stringResource(R.string.onboardingMessageNotificationExplaination), style = LocalType.current.base)
             Spacer(Modifier.height(LocalDimensions.current.spacing))
         }
@@ -101,7 +101,7 @@ private fun NotificationRadioButton(
         onClick = onClick,
         modifier = modifier,
         checked = checked,
-        contentPadding = PaddingValues(horizontal = LocalDimensions.current.margin, vertical = 7.dp)
+        contentPadding = PaddingValues(horizontal = LocalDimensions.current.mediumSpacing, vertical = 7.dp)
     ) {
         Box(
             modifier = Modifier

app/src/main/java/org/thoughtcrime/securesms/onboarding/pickname/PickDisplayName.kt

@@ -54,7 +54,7 @@ internal fun PickDisplayName(
         Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
 
         Column(
-            modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
+            modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)
         ) {
             Text(stringResource(state.title), style = LocalType.current.h4)
             Spacer(Modifier.height(LocalDimensions.current.smallSpacing))

app/src/main/java/org/thoughtcrime/securesms/onboarding/ui/ContinueButton.kt

@@ -17,8 +17,8 @@ fun ContinuePrimaryOutlineButton(modifier: Modifier, onContinue: () -> Unit) {
         modifier = modifier
             .contentDescription(R.string.AccessibilityId_continue)
             .fillMaxWidth()
-            .padding(horizontal = LocalDimensions.current.largeMargin)
-            .padding(bottom = LocalDimensions.current.xxsMargin),
+            .padding(horizontal = LocalDimensions.current.xlargeSpacing)
+            .padding(bottom = LocalDimensions.current.xsSpacing),
         onClick = onContinue,
     )
 }

app/src/main/java/org/thoughtcrime/securesms/preferences/QRCodeActivity.kt

@@ -93,14 +93,14 @@ private fun Tabs(sessionId: String, errors: Flow<String>, onScan: (String) -> Un
 fun QrPage(string: String) {
     Column(
         modifier = Modifier
-            .background(LocalColors.current.backgroundSecondary)
-            .padding(horizontal = LocalDimensions.current.margin)
+            .background(LocalColors.current.background)
+            .padding(horizontal = LocalDimensions.current.mediumSpacing)
             .fillMaxSize()
     ) {
         QrImage(
             string = string,
             modifier = Modifier
-                .padding(top = LocalDimensions.current.margin, bottom = LocalDimensions.current.xxsMargin)
+                .padding(top = LocalDimensions.current.mediumSpacing, bottom = LocalDimensions.current.xsSpacing)
                 .contentDescription(R.string.AccessibilityId_qr_code),
             icon = R.drawable.session
         )

app/src/main/java/org/thoughtcrime/securesms/preferences/SettingsActivity.kt

@@ -429,8 +429,8 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
         Column {
             Row(
                 modifier = Modifier
-                    .padding(horizontal = LocalDimensions.current.smallMargin)
-                    .padding(top = LocalDimensions.current.xxxsMargin),
+                    .padding(horizontal = LocalDimensions.current.spacing)
+                    .padding(top = LocalDimensions.current.xxsSpacing),
                 horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing),
             ) {
                 PrimaryOutlineButton(

app/src/main/java/org/thoughtcrime/securesms/recoverypassword/RecoveryPassword.kt

@@ -48,11 +48,11 @@ internal fun RecoveryPasswordScreen(
     onHide:() -> Unit = {}
 ) {
     Column(
-        verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin),
+        verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing),
         modifier = Modifier
             .contentDescription(R.string.AccessibilityId_recovery_password)
             .verticalScroll(rememberScrollState())
-            .padding(bottom = LocalDimensions.current.xsMargin)
+            .padding(bottom = LocalDimensions.current.smallSpacing)
     ) {
         RecoveryPasswordCell(mnemonic, seed, copyMnemonic)
         HideRecoveryPasswordCell(onHide)
@@ -80,7 +80,7 @@ private fun RecoveryPasswordCell(
                 SessionShieldIcon()
             }
 
-            Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsMargin))
+            Spacer(modifier = Modifier.height(LocalDimensions.current.xxsSpacing))
 
             Text(
                 stringResource(R.string.recoveryPasswordDescription),
@@ -98,7 +98,7 @@ private fun RecoveryPasswordCell(
                 QrImage(
                     seed,
                     modifier = Modifier
-                        .padding(vertical = LocalDimensions.current.smallMargin)
+                        .padding(vertical = LocalDimensions.current.spacing)
                         .contentDescription(R.string.AccessibilityId_qr_code),
                     contentPadding = 10.dp,
                     icon = R.drawable.session_shield
@@ -137,9 +137,9 @@ private fun RecoveryPassword(mnemonic: String) {
         mnemonic,
         modifier = Modifier
             .contentDescription(R.string.AccessibilityId_recovery_password_container)
-            .padding(vertical = LocalDimensions.current.smallMargin)
+            .padding(vertical = LocalDimensions.current.spacing)
             .border()
-            .padding(LocalDimensions.current.smallMargin),
+            .padding(LocalDimensions.current.spacing),
         textAlign = TextAlign.Center,
         style = LocalType.current.extraSmall.monospace(),
         color = LocalColors.current.run { if (isLight) text else primary },
@@ -162,7 +162,7 @@ private fun HideRecoveryPasswordCell(onHide: () -> Unit = {}) {
                     style = LocalType.current.base
                 )
             }
-            Spacer(modifier = Modifier.width(LocalDimensions.current.xxsMargin))
+            Spacer(modifier = Modifier.width(LocalDimensions.current.xsSpacing))
             SlimOutlineButton(
                 text = stringResource(R.string.hide),
                 modifier = Modifier

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

@@ -14,12 +14,14 @@ import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
 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.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
@@ -52,6 +54,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
@@ -68,6 +71,7 @@ import org.thoughtcrime.securesms.ui.components.SmallCircularProgressIndicator
 import org.thoughtcrime.securesms.ui.theme.LocalColors
 import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 import org.thoughtcrime.securesms.ui.theme.LocalType
+import org.thoughtcrime.securesms.ui.theme.PreviewTheme
 import org.thoughtcrime.securesms.ui.theme.divider
 import org.thoughtcrime.securesms.ui.theme.radioButtonColors
 import org.thoughtcrime.securesms.ui.theme.transparentButtonColors
@@ -216,12 +220,15 @@ fun ItemButton(
     ) {
         Box(
             modifier = Modifier
-                .width(80.dp)
+                .width(50.dp)
                 .wrapContentHeight()
                 .align(Alignment.CenterVertically)
         ) {
             icon()
         }
+
+        Spacer(modifier = Modifier.width(LocalDimensions.current.smallSpacing))
+
         Text(
             text,
             Modifier
@@ -233,10 +240,22 @@ fun ItemButton(
     }
 }
 
+@Preview
+@Composable
+fun PrewviewItemButton() {
+    PreviewTheme {
+        ItemButton(
+            textId = R.string.activity_create_group_title,
+            icon = R.drawable.ic_group,
+            onClick = {}
+        )
+    }
+}
+
 @Composable
 fun Cell(
     padding: Dp = 0.dp,
-    margin: Dp = LocalDimensions.current.margin,
+    margin: Dp = LocalDimensions.current.spacing,
     content: @Composable () -> Unit
 ) {
     CellWithPaddingAndMargin(padding, margin) { content() }
@@ -248,8 +267,8 @@ fun CellNoMargin(content: @Composable () -> Unit) {
 
 @Composable
 fun CellWithPaddingAndMargin(
-    padding: Dp = LocalDimensions.current.smallMargin,
-    margin: Dp = LocalDimensions.current.margin,
+    padding: Dp = LocalDimensions.current.spacing,
+    margin: Dp = LocalDimensions.current.spacing,
     content: @Composable () -> Unit
 ) {
     Card(
@@ -273,7 +292,7 @@ fun <T> TitledRadioButton(option: RadioOption<T>, onClick: () -> Unit) {
         modifier = Modifier
             .runIf(option.enabled) { clickable { if (!option.selected) onClick() } }
             .heightIn(min = 60.dp)
-            .padding(horizontal = LocalDimensions.current.margin)
+            .padding(horizontal = LocalDimensions.current.spacing)
             .contentDescription(option.contentDescription)
     ) {
         Column(modifier = Modifier
@@ -366,7 +385,7 @@ fun Modifier.fadingEdges(
 @Composable
 fun Divider(modifier: Modifier = Modifier, startIndent: Dp = 0.dp) {
     androidx.compose.material.Divider(
-        modifier = modifier.padding(horizontal = LocalDimensions.current.xsMargin),
+        modifier = modifier.padding(horizontal = LocalDimensions.current.smallSpacing),
         color = LocalColors.current.divider,
         startIndent = startIndent
     )

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

@@ -108,7 +108,7 @@ fun MaybeScanQrCode(
                 modifier = Modifier
                     .background(color = LocalColors.current.backgroundSecondary)
                     .fillMaxSize()
-                    .padding(LocalDimensions.current.largeMargin),
+                    .padding(LocalDimensions.current.xlargeSpacing),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Spacer(modifier = Modifier.weight(1f))

app/src/main/java/org/thoughtcrime/securesms/ui/theme/Dimensions.kt

@@ -12,19 +12,11 @@ data class Dimensions(
     val xsSpacing: Dp = 12.dp,
     val smallSpacing: Dp = 16.dp,
     val spacing: Dp = 24.dp,
+    val mediumSpacing: Dp = 36.dp,
+    val xlargeSpacing: Dp = 64.dp,
 
-    val xxxsMargin: Dp = 8.dp,
-    val xxsMargin: Dp = 12.dp,
-    val xsMargin: Dp = 16.dp,
-    val smallMargin: Dp = 24.dp,
-    val margin: Dp = 32.dp,
-    val onboardingMargin: Dp = 36.dp,
-    val largeMargin: Dp = 64.dp,
-    val homeEmptyViewMargin: Dp = 50.dp,
-
-    val dividerIndent: Dp = 80.dp,
+    val dividerIndent: Dp = 60.dp,
     val appBarHeight: Dp = 64.dp,
-    val minScrollableViewHeight: Dp = 200.dp,
     val minLargeItemButtonHeight: Dp = 60.dp,
 
     val indicatorHeight: Dp = 4.dp,