fix: calculator preview keyboard overlap

app/src/main/java/to/bitkit/ui/components/TextInput.kt

@@ -8,6 +8,7 @@
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -46,7 +47,8 @@
     supportingText: @Composable (() -> Unit)? = null,
     visualTransformation: VisualTransformation = VisualTransformation.None,
     textStyle: TextStyle = AppTextStyles.BodySSB,
-) {
+    colors: TextFieldColors = AppTextFieldDefaults.semiTransparent,
+    ) {
     var textFieldValue by remember { mutableStateOf(TextFieldValue(value)) }
 
     // Sync external changes
@@ -75,7 +77,7 @@
         maxLines = maxLines,
         minLines = minLines,
         singleLine = singleLine,
-        colors = AppTextFieldDefaults.semiTransparent,
+        colors = colors,
         shape = AppShapes.small,
         keyboardOptions = keyboardOptions,
         keyboardActions = keyboardActions,

app/src/main/java/to/bitkit/ui/screens/widgets/calculator/CalculatorPreviewScreen.kt

@@ -1,11 +1,15 @@
 package to.bitkit.ui.screens.widgets.calculator
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -26,16 +30,19 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import to.bitkit.R
 import to.bitkit.ui.components.BodyM
+import to.bitkit.ui.components.FillHeight
 import to.bitkit.ui.components.Headline
 import to.bitkit.ui.components.PrimaryButton
 import to.bitkit.ui.components.SecondaryButton
 import to.bitkit.ui.components.Text13Up
+import to.bitkit.ui.components.VerticalSpacer
 import to.bitkit.ui.scaffold.AppTopBar
 import to.bitkit.ui.scaffold.DrawerNavIcon
-import to.bitkit.ui.scaffold.ScreenColumn
 import to.bitkit.ui.screens.widgets.calculator.components.CalculatorCard
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
+import to.bitkit.ui.utils.keyboardAsState
 import to.bitkit.viewmodels.CurrencyViewModel
 
 @Composable
@@ -73,8 +80,12 @@ fun CalculatorPreviewContent(
     currencyViewModel: CurrencyViewModel?,
     isCalculatorWidgetEnabled: Boolean,
 ) {
-    ScreenColumn(
-        modifier = Modifier.testTag("facts_preview_screen")
+    val isKeyboardVisible by keyboardAsState()
+
+    Column(
+        modifier = Modifier
+            .screen()
+            .testTag("facts_preview_screen")
     ) {
         AppTopBar(
             titleText = stringResource(R.string.widgets__widget__nav_title),
@@ -84,47 +95,58 @@ fun CalculatorPreviewContent(
 
         Column(
             modifier = Modifier
+                .imePadding()
                 .padding(horizontal = 16.dp)
                 .testTag("main_content")
         ) {
-            Spacer(modifier = Modifier.height(26.dp))
-
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .testTag("header_row"),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.SpaceBetween
+            AnimatedVisibility(
+                visible = !isKeyboardVisible,
+                enter = expandVertically(),
+                exit = shrinkVertically(),
             ) {
-                Headline(
-                    text = AnnotatedString(stringResource(R.string.widgets__calculator__name)),
-                    modifier = Modifier
-                        .width(200.dp)
-                        .testTag("widget_title")
-                )
-                Icon(
-                    painter = painterResource(R.drawable.widget_math_operation),
-                    contentDescription = null,
-                    tint = Color.Unspecified,
-                    modifier = Modifier
-                        .size(64.dp)
-                        .testTag("widget_icon")
-                )
-            }
+                Column {
+                    VerticalSpacer(26.dp)
 
-            BodyM(
-                text = stringResource(R.string.widgets__facts__description),
-                color = Colors.White64,
-                modifier = Modifier
-                    .padding(vertical = 16.dp)
-                    .testTag("widget_description")
-            )
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .testTag("header_row"),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.SpaceBetween
+                    ) {
+                        Headline(
+                            text = AnnotatedString(stringResource(R.string.widgets__calculator__name)),
+                            modifier = Modifier
+                                .width(200.dp)
+                                .testTag("widget_title")
+                        )
+                        Icon(
+                            painter = painterResource(R.drawable.widget_math_operation),
+                            contentDescription = null,
+                            tint = Color.Unspecified,
+                            modifier = Modifier
+                                .size(64.dp)
+                                .testTag("widget_icon")
+                        )
+                    }
 
-            HorizontalDivider(
-                modifier = Modifier.testTag("divider")
-            )
+                    BodyM(
+                        text = stringResource(R.string.widgets__facts__description),
+                        color = Colors.White64,
+                        modifier = Modifier
+                            .padding(vertical = 16.dp)
+                            .testTag("widget_description")
+                    )
 
-            Spacer(modifier = Modifier.weight(1f))
+                    HorizontalDivider(
+                        modifier = Modifier.testTag("divider")
+                    )
+                }
+            }
+
+            if (!isKeyboardVisible) {
+                FillHeight()
+            }
 
             Text13Up(
                 stringResource(R.string.common__preview),

app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorCard.kt

@@ -101,7 +101,7 @@ fun CalculatorCardContent(
     Box(
         modifier = modifier
             .clip(shape = MaterialTheme.shapes.medium)
-            .background(Colors.White10)
+            .background(Colors.Gray6)
     ) {
         Column(
             modifier = Modifier

app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorInput.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.unit.dp
 import to.bitkit.ui.components.BodyMSB
 import to.bitkit.ui.components.CaptionB
 import to.bitkit.ui.components.TextInput
+import to.bitkit.ui.theme.AppTextFieldDefaults
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 
@@ -30,7 +31,7 @@ fun CalculatorInput(
     currencySymbol: String,
     currencyName: String,
     modifier: Modifier = Modifier,
-    visualTransformation: VisualTransformation = VisualTransformation.None
+    visualTransformation: VisualTransformation = VisualTransformation.None,
 ) {
     TextInput(
         value = value,
@@ -39,7 +40,7 @@ fun CalculatorInput(
         leadingIcon = {
             Box(
                 modifier = Modifier
-                    .background(color = Colors.White10, shape = CircleShape)
+                    .background(color = Colors.Gray6, shape = CircleShape)
                     .size(32.dp),
                 contentAlignment = Alignment.Center
             ) {
@@ -50,6 +51,10 @@ fun CalculatorInput(
             keyboardType = KeyboardType.Number
         ),
         suffix = { CaptionB(currencyName.uppercase(), color = Colors.Gray1) },
+        colors = AppTextFieldDefaults.noIndicatorColors.copy(
+            focusedContainerColor = Colors.Black,
+            unfocusedContainerColor = Colors.Black
+        ),
         modifier = modifier,
         visualTransformation = visualTransformation
     )
@@ -60,7 +65,9 @@ fun CalculatorInput(
 private fun Preview() {
     AppThemeSurface {
         Column(
-            modifier = Modifier.fillMaxSize().padding(16.dp),
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp),
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
             CalculatorInput(