Design update

Electric-Coin-Company · Nov 22, 2024 · b18fb71 · b18fb71
1 parent f8c730c
commit b18fb71
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TopAppBar.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TopAppBar.kt
@@ -8,6 +8,7 @@ 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.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -25,6 +26,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -412,8 +414,10 @@ fun SmallTopAppBar(
     showTitleLogo: Boolean = false,
     titleText: String? = null,
     titleStyle: TextStyle = SecondaryTypography.headlineSmall,
+    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
 ) {
     CenterAlignedTopAppBar(
+        windowInsets = windowInsets,
         title = {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiIconButton.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiIconButton.kt
@@ -1,12 +1,14 @@
 package co.electriccoin.zcash.ui.design.component
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.util.StringResource
 import co.electriccoin.zcash.ui.design.util.getValue
 
@@ -16,7 +18,7 @@ fun ZashiIconButton(
     modifier: Modifier = Modifier
 ) {
     IconButton(
-        modifier = modifier,
+        modifier = modifier.size(40.dp),
         onClick = state.onClick
     ) {
         Icon(

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiMainTopAppBar.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiMainTopAppBar.kt
@@ -4,8 +4,12 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -21,6 +25,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 fun ZashiMainTopAppBar(state: ZashiMainTopAppBarState) {
     ZashiSmallTopAppBar(
+        windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Top),
         hamburgerMenuActions = {
             ZashiIconButton(state.balanceVisibilityButton)
             Spacer(Modifier.width(4.dp))
@@ -32,7 +37,7 @@ fun ZashiMainTopAppBar(state: ZashiMainTopAppBarState) {
                 modifier =
                     Modifier
                         .defaultMinSize(40.dp, 40.dp)
-                        .padding(start = 20.dp)
+                        .padding(start = 16.dp)
                         .clip(RoundedCornerShape(8.dp))
                         .clickable(
                             onClick =

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiTopAppBar.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiTopAppBar.kt
@@ -1,6 +1,9 @@
 package co.electriccoin.zcash.ui.design.component
 
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
@@ -9,6 +12,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.internal.SecondaryTypography
 import co.electriccoin.zcash.ui.design.theme.internal.TopAppBarColors
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 @Suppress("LongParameterList")
 fun ZashiSmallTopAppBar(
@@ -20,8 +24,10 @@ fun ZashiSmallTopAppBar(
     navigationAction: @Composable () -> Unit = {},
     hamburgerMenuActions: (@Composable RowScope.() -> Unit)? = null,
     regularActions: (@Composable RowScope.() -> Unit)? = null,
+    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
 ) {
     SmallTopAppBar(
+        windowInsets = windowInsets,
         modifier = modifier,
         colors = colors,
         hamburgerMenuActions = hamburgerMenuActions,