Settings design hotfixes and code cleanup (#1704)

Electric-Coin-Company · Dec 2, 2024 · c1853de · c1853de
1 parent f60ba75
commit c1853de
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 84 deletions.
diff --git a/...sign-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiSettingsListItem.kt b/...sign-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiSettingsListItem.kt
@@ -42,12 +42,14 @@ import kotlinx.collections.immutable.persistentListOf
 fun ZashiSettingsListItem(
     text: String,
     @DrawableRes icon: Int,
+    modifier: Modifier = Modifier,
     titleIcons: ImmutableList<Int> = persistentListOf(),
     subtitle: String? = null,
     isEnabled: Boolean = true,
     onClick: () -> Unit
 ) {
     ZashiSettingsListItem(
+        modifier = modifier,
         state =
             ZashiSettingsListItemState(
                 text = stringRes(text),
@@ -61,26 +63,30 @@ fun ZashiSettingsListItem(
 }
 
 @Composable
-fun ZashiSettingsListItem(state: ZashiSettingsListItemState) {
+fun ZashiSettingsListItem(
+    state: ZashiSettingsListItemState,
+    modifier: Modifier = Modifier,
+) {
     ZashiSettingsListItem(
-        leading = { modifier ->
+        modifier = modifier,
+        leading = {
             ZashiSettingsListLeadingItem(
-                modifier = modifier,
+                modifier = it,
                 icon = state.icon,
                 contentDescription = state.text.getValue()
             )
         },
-        content = { modifier ->
+        content = {
             ZashiSettingsListContentItem(
-                modifier = modifier,
+                modifier = it,
                 text = state.text.getValue(),
                 subtitle = state.subtitle?.getValue(),
                 titleIcons = state.titleIcons
             )
         },
-        trailing = { modifier ->
+        trailing = {
             ZashiSettingsListTrailingItem(
-                modifier = modifier,
+                modifier = it,
                 isEnabled = state.isEnabled,
                 contentDescription = state.text.getValue()
             )
@@ -146,7 +152,10 @@ fun ZashiSettingsListContentItem(
             titleIcons.forEach {
                 Spacer(Modifier.width(6.dp))
                 Image(
-                    modifier = Modifier.size(20.dp).clip(CircleShape),
+                    modifier =
+                        Modifier
+                            .size(20.dp)
+                            .clip(CircleShape),
                     painter = painterResource(it),
                     contentDescription = null,
                 )
@@ -168,12 +177,13 @@ fun ZashiSettingsListItem(
     leading: @Composable (Modifier) -> Unit,
     content: @Composable (Modifier) -> Unit,
     trailing: @Composable (Modifier) -> Unit,
+    modifier: Modifier = Modifier,
     contentPadding: PaddingValues = PaddingValues(vertical = 12.dp),
     onClick: (() -> Unit)?
 ) {
     Row(
         modifier =
-            Modifier
+            modifier
                 .clip(RoundedCornerShape(12.dp)) then
                 if (onClick != null) {
                     Modifier.clickable(

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/util/ScaffoldPadding.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/util/ScaffoldPadding.kt
@@ -4,22 +4,62 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Stable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
 
 @Stable
-fun Modifier.scaffoldPadding(paddingValues: PaddingValues) =
-    this.padding(
-        top = paddingValues.calculateTopPadding() + ZashiDimensions.Spacing.spacingLg,
-        bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-        start = ZashiDimensions.Spacing.spacing3xl,
-        end = ZashiDimensions.Spacing.spacing3xl
+fun Modifier.scaffoldPadding(
+    paddingValues: PaddingValues,
+    top: Dp = paddingValues.calculateTopPadding() + ZashiDimensions.Spacing.spacingLg,
+    bottom: Dp = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
+    start: Dp = ZashiDimensions.Spacing.spacing3xl,
+    end: Dp = ZashiDimensions.Spacing.spacing3xl
+) = this then
+    Modifier.padding(
+        top = top,
+        bottom = bottom,
+        start = start,
+        end = end,
     )
 
-fun Modifier.scaffoldScrollPadding(paddingValues: PaddingValues) =
-    this.padding(
-        top = paddingValues.calculateTopPadding(),
-        bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-        start = 4.dp,
-        end = 4.dp
+@Stable
+fun Modifier.scaffoldScrollPadding(
+    paddingValues: PaddingValues,
+    top: Dp = paddingValues.calculateTopPadding(),
+    bottom: Dp = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
+    start: Dp = 0.dp,
+    end: Dp = 0.dp
+) = this then
+    Modifier.padding(
+        top = top,
+        bottom = bottom,
+        start = start,
+        end = end,
     )
+
+@Stable
+fun PaddingValues.asScaffoldPaddingValues(
+    top: Dp = calculateTopPadding() + ZashiDimensions.Spacing.spacingLg,
+    bottom: Dp = calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
+    start: Dp = ZashiDimensions.Spacing.spacing3xl,
+    end: Dp = ZashiDimensions.Spacing.spacing3xl
+) = PaddingValues(
+    top = top,
+    bottom = bottom,
+    start = start,
+    end = end,
+)
+
+@Stable
+fun PaddingValues.asScaffoldScrollPaddingValues(
+    top: Dp = calculateTopPadding(),
+    bottom: Dp = calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
+    start: Dp = 0.dp,
+    end: Dp = 0.dp
+) = PaddingValues(
+    top = top,
+    bottom = bottom,
+    start = start,
+    end = end,
+)
diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/about/view/AboutView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/about/view/AboutView.kt
@@ -41,6 +41,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
 import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
 import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
+import co.electriccoin.zcash.ui.design.util.scaffoldScrollPadding
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.fixture.ConfigInfoFixture
 import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
@@ -76,12 +77,7 @@ fun About(
                     .verticalScroll(
                         rememberScrollState()
                     )
-                    .padding(
-                        top = paddingValues.calculateTopPadding() + ZashiDimensions.Spacing.spacingLg,
-                        bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-                        start = 4.dp,
-                        end = 4.dp
-                    )
+                    .scaffoldScrollPadding(paddingValues)
         )
     }
 }
@@ -157,7 +153,7 @@ fun AboutMainContent(
 ) {
     Column(modifier) {
         Text(
-            modifier = Modifier.padding(horizontal = ZashiDimensions.Spacing.spacingXl),
+            modifier = Modifier.padding(horizontal = ZashiDimensions.Spacing.spacing3xl),
             text = stringResource(id = R.string.about_subtitle),
             color = ZashiColors.Text.textPrimary,
             style = ZashiTypography.header6,
@@ -167,7 +163,7 @@ fun AboutMainContent(
         Spacer(Modifier.height(12.dp))
 
         Text(
-            modifier = Modifier.padding(horizontal = ZashiDimensions.Spacing.spacingXl),
+            modifier = Modifier.padding(horizontal = ZashiDimensions.Spacing.spacing3xl),
             text = stringResource(id = R.string.about_description),
             color = ZashiColors.Text.textPrimary,
             style = ZashiTypography.textSm
@@ -176,11 +172,13 @@ fun AboutMainContent(
         Spacer(Modifier.height(32.dp))
 
         ZashiSettingsListItem(
-            ZashiSettingsListItemState(
-                icon = R.drawable.ic_settings_info,
-                text = stringRes(R.string.about_button_privacy_policy),
-                onClick = onPrivacyPolicy
-            )
+            modifier = Modifier.padding(horizontal = 4.dp),
+            state =
+                ZashiSettingsListItemState(
+                    icon = R.drawable.ic_settings_info,
+                    text = stringRes(R.string.about_button_privacy_policy),
+                    onClick = onPrivacyPolicy
+                )
         )
 
         Spacer(Modifier.weight(1f))

diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/addressbook/view/AddressBookView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/addressbook/view/AddressBookView.kt
@@ -48,6 +48,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
 import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
 import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
+import co.electriccoin.zcash.ui.design.util.asScaffoldScrollPaddingValues
 import co.electriccoin.zcash.ui.design.util.getValue
 import co.electriccoin.zcash.ui.design.util.scaffoldPadding
 import co.electriccoin.zcash.ui.design.util.stringRes
@@ -89,18 +90,14 @@ fun AddressBookView(
                             Modifier
                                 .fillMaxWidth()
                                 .weight(1f),
-                        contentPadding =
-                            PaddingValues(
-                                top = paddingValues.calculateTopPadding(),
-                                bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-                                start = 4.dp,
-                                end = 4.dp
-                            )
+                        contentPadding = paddingValues.asScaffoldScrollPaddingValues()
                     ) {
                         itemsIndexed(state.contacts) { index, item ->
                             ContactItem(state = item)
                             if (index != state.contacts.lastIndex) {
-                                ZashiHorizontalDivider()
+                                ZashiHorizontalDivider(
+                                    modifier = Modifier.padding(horizontal = 4.dp),
+                                )
                             }
                         }
                     }
@@ -123,6 +120,7 @@ fun AddressBookView(
 @Composable
 private fun ContactItem(state: AddressBookContactState) {
     ZashiSettingsListItem(
+        modifier = Modifier.padding(horizontal = 4.dp),
         leading = { modifier ->
             ContactItemLeading(modifier = modifier, state = state)
         },

diff --git a/...c/main/java/co/electriccoin/zcash/ui/screen/advancedsettings/view/AdvancedSettingsView.kt b/...c/main/java/co/electriccoin/zcash/ui/screen/advancedsettings/view/AdvancedSettingsView.kt
@@ -38,6 +38,7 @@ import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
 import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
+import co.electriccoin.zcash.ui.design.util.scaffoldScrollPadding
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.advancedsettings.AdvancedSettingsTag
 import co.electriccoin.zcash.ui.screen.advancedsettings.model.AdvancedSettingsState
@@ -63,17 +64,17 @@ fun AdvancedSettings(
                 Modifier
                     .fillMaxSize()
                     .verticalScroll(rememberScrollState())
-                    .padding(
-                        top = paddingValues.calculateTopPadding(),
-                        bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-                        start = 4.dp,
-                        end = 4.dp
-                    ),
+                    .scaffoldScrollPadding(paddingValues),
         ) {
             state.items.fastForEachIndexed { index, item ->
-                ZashiSettingsListItem(state = item)
+                ZashiSettingsListItem(
+                    state = item,
+                    modifier = Modifier.padding(horizontal = 4.dp)
+                )
                 if (index != state.items.lastIndex) {
-                    ZashiHorizontalDivider()
+                    ZashiHorizontalDivider(
+                        modifier = Modifier.padding(horizontal = 4.dp)
+                    )
                 }
             }
             Spacer(modifier = Modifier.height(ZashiDimensions.Spacing.spacingXl))
@@ -83,7 +84,7 @@ fun AdvancedSettings(
             ZashiButton(
                 modifier =
                     Modifier
-                        .padding(horizontal = 20.dp)
+                        .padding(horizontal = 24.dp)
                         .fillMaxWidth(),
                 colors = ZashiButtonDefaults.destructive1Colors(),
                 state = state.deleteButton

diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/contact/view/ContactView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/contact/view/ContactView.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -31,6 +30,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
 import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
 import co.electriccoin.zcash.ui.design.util.getValue
+import co.electriccoin.zcash.ui.design.util.scaffoldPadding
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.contact.ContactTag
 import co.electriccoin.zcash.ui.screen.contact.model.ContactState
@@ -53,12 +53,7 @@ fun ContactView(
                 modifier =
                     Modifier
                         .fillMaxSize()
-                        .padding(
-                            top = paddingValues.calculateTopPadding() + 24.dp,
-                            bottom = paddingValues.calculateBottomPadding() + 24.dp,
-                            start = 20.dp,
-                            end = 20.dp,
-                        )
+                        .scaffoldPadding(paddingValues)
             )
         }
     }

diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/integrations/view/IntegrationsView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/integrations/view/IntegrationsView.kt
@@ -39,6 +39,7 @@ import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
 import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
 import co.electriccoin.zcash.ui.design.util.StringResource
 import co.electriccoin.zcash.ui.design.util.getValue
+import co.electriccoin.zcash.ui.design.util.scaffoldScrollPadding
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.integrations.model.IntegrationsState
 import co.electriccoin.zcash.ui.screen.settings.SettingsTag
@@ -59,17 +60,17 @@ fun Integrations(
                 Modifier
                     .fillMaxSize()
                     .verticalScroll(rememberScrollState())
-                    .padding(
-                        top = paddingValues.calculateTopPadding(),
-                        bottom = paddingValues.calculateBottomPadding() + ZashiDimensions.Spacing.spacing3xl,
-                        start = 4.dp,
-                        end = 4.dp
-                    ),
+                    .scaffoldScrollPadding(paddingValues),
         ) {
             state.items.forEachIndexed { index, item ->
-                ZashiSettingsListItem(state = item)
+                ZashiSettingsListItem(
+                    state = item,
+                    modifier = Modifier.padding(horizontal = 4.dp)
+                )
                 if (index != state.items.lastIndex) {
-                    ZashiHorizontalDivider()
+                    ZashiHorizontalDivider(
+                        modifier = Modifier.padding(horizontal = 4.dp)
+                    )
                 }
             }
 
@@ -81,7 +82,10 @@ fun Integrations(
             Spacer(modifier = Modifier.height(ZashiDimensions.Spacing.spacingXl))
             Spacer(modifier = Modifier.weight(1f))
             ZashiCard(
-                modifier = Modifier.padding(horizontal = 20.dp).fillMaxWidth(),
+                modifier =
+                    Modifier
+                        .padding(horizontal = 24.dp)
+                        .fillMaxWidth(),
             ) {
                 Image(
                     modifier = Modifier.align(CenterHorizontally),
@@ -107,7 +111,7 @@ private fun DisabledInfo(it: StringResource) {
         modifier =
             Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 20.dp),
+                .padding(horizontal = 24.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Image(