change desings overall

app/src/main/java/ksnd/hiraganaconverter/view/TopBar.kt

@@ -3,6 +3,7 @@ package ksnd.hiraganaconverter.view
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -16,6 +17,7 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import ksnd.hiraganaconverter.core.resource.R
@@ -45,10 +47,10 @@ fun TopBar(
     ) {
         TopAppBar(
             title = {},
-            colors =
-            TopAppBarDefaults.centerAlignedTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.surface,
-                scrolledContainerColor = MaterialTheme.colorScheme.surface,
+            modifier = Modifier.background(MaterialTheme.colorScheme.surface),
+            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                containerColor = Color.Transparent,
+                scrolledContainerColor = Color.Transparent,
                 titleContentColor = MaterialTheme.colorScheme.primary,
             ),
             actions = {

app/src/main/java/ksnd/hiraganaconverter/view/navigation/Navigation.kt

@@ -6,9 +6,11 @@ import androidx.compose.animation.core.EaseOutQuad
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.foundation.background
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
@@ -76,7 +78,7 @@ fun Navigation(
         )
     }
 
-    fun NavGraphBuilder.pushComposable(
+    fun NavGraphBuilder.slideHorizontallyComposable(
         route: String,
         arguments: List<NamedNavArgument> = emptyList(),
         content: @Composable AnimatedVisibilityScope.(NavBackStackEntry) -> Unit,
@@ -85,17 +87,17 @@ fun Navigation(
             route = route,
             arguments = arguments,
             enterTransition = {
-                slideInVertically(
+                slideInHorizontally(
                     animationSpec = tween(durationMillis = 500, easing = EaseInOutQuart),
-                    initialOffsetY = { fullHeight -> fullHeight * 2 / 10 },
+                    initialOffsetX = { fullWidth -> fullWidth * 2 / 10 },
                 ) + fadeIn(
                     animationSpec = tween(durationMillis = 500, easing = EaseOutQuad),
                 )
             },
             exitTransition = {
-                slideOutVertically(
+                slideOutHorizontally(
                     animationSpec = tween(durationMillis = 500, easing = EaseInOutQuart),
-                    targetOffsetY = { fullHeight -> fullHeight * 2 / 10 },
+                    targetOffsetX = { fullWidth -> fullWidth * 2 / 10 },
                 ) + fadeOut(
                     animationSpec = tween(durationMillis = 500, easing = EaseOutQuad),
                 )
@@ -107,7 +109,7 @@ fun Navigation(
     NavHost(
         navController = navController,
         startDestination = "%s/{%s}".format(NavRoute.Converter.route, NavKey.RECEIVED_TEXT),
-        modifier = modifier,
+        modifier = modifier.background(MaterialTheme.colorScheme.surface),
     ) {
         fadeComposable(
             route = "%s/{%s}".format(NavRoute.Converter.route, NavKey.RECEIVED_TEXT),
@@ -120,8 +122,10 @@ fun Navigation(
             ),
         ) {
             ConverterScreen(
-                snackbarHostState = snackbarHostState,
                 viewModel = hiltViewModel(),
+                snackbarHostState = snackbarHostState,
+                scrollBehavior = scrollBehavior,
+                topBarHeight = topBarHeight,
                 topBar = {
                     TopBar(
                         modifier = Modifier.onSizeChanged { topBarHeight = it.height },
@@ -131,23 +135,21 @@ fun Navigation(
                         transitionInfo = { transitionScreen(NavRoute.Info) },
                     )
                 },
-                topBarHeight = topBarHeight,
-                scrollBehavior = scrollBehavior,
             )
         }
-        pushComposable(route = NavRoute.History.route) {
+        slideHorizontallyComposable(route = NavRoute.History.route) {
             ConvertHistoryScreen(
                 viewModel = hiltViewModel(),
                 onBackPressed = ::navigateUp,
             )
         }
-        pushComposable(route = NavRoute.Setting.route) {
+        slideHorizontallyComposable(route = NavRoute.Setting.route) {
             SettingScreen(
                 viewModel = hiltViewModel(),
                 onBackPressed = ::navigateUp,
             )
         }
-        pushComposable(route = NavRoute.Info.route) {
+        slideHorizontallyComposable(route = NavRoute.Info.route) {
             InfoScreen(
                 viewModel = hiltViewModel(),
                 onBackPressed = ::navigateUp,

core/ui/src/main/java/ksnd/hiraganaconverter/core/ui/parts/BackTopBar.kt

@@ -30,9 +30,10 @@ fun BackTopBar(
     scrollBehavior: TopAppBarScrollBehavior,
     modifier: Modifier = Modifier,
     onBackPressed: () -> Unit,
+    title: @Composable () -> Unit = {},
 ) {
     TopAppBar(
-        title = {},
+        title = title,
         modifier = modifier,
         scrollBehavior = scrollBehavior,
         navigationIcon = {
@@ -65,6 +66,9 @@ fun BackTopBar(
 @Composable
 fun PreviewBackTopBar() {
     HiraganaConverterTheme {
-        BackTopBar(TopAppBarDefaults.pinnedScrollBehavior()) {}
+        BackTopBar(
+            scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(),
+            onBackPressed = {},
+        )
     }
 }

core/ui/src/main/java/ksnd/hiraganaconverter/core/ui/parts/button/MoveTopButton.kt

@@ -32,7 +32,7 @@ import ksnd.hiraganaconverter.core.ui.theme.HiraganaConverterTheme
 
 @Composable
 fun MoveTopButton(scrollState: ScrollState) {
-    val scrollScope = rememberCoroutineScope()
+    val coroutineScope = rememberCoroutineScope()
     val offset = IntOffset(x = 100, y = 100)
     val showVisibleTopBar by remember {
         derivedStateOf { scrollState.value > 0 }
@@ -45,7 +45,7 @@ fun MoveTopButton(scrollState: ScrollState) {
     ) {
         FloatingActionButton(
             onClick = {
-                scrollScope.launch {
+                coroutineScope.launch {
                     scrollState.animateScrollTo(0)
                 }
             },

core/ui/src/main/java/ksnd/hiraganaconverter/core/ui/parts/dialog/DialogTopBar.kt

@@ -0,0 +1,73 @@
+package ksnd.hiraganaconverter.core.ui.parts.dialog
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import ksnd.hiraganaconverter.core.resource.R
+import ksnd.hiraganaconverter.core.ui.parts.button.CustomIconButton
+import ksnd.hiraganaconverter.core.ui.preview.UiModePreview
+import ksnd.hiraganaconverter.core.ui.theme.HiraganaConverterTheme
+
+@Composable
+fun DialogTopBar(
+    isScrolled: Boolean,
+    modifier: Modifier = Modifier,
+    leftContent: @Composable RowScope.() -> Unit = {},
+    onCloseClick: () -> Unit,
+) {
+    Column {
+        Row(
+            modifier = modifier
+                .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.9f))
+                .fillMaxWidth()
+                .padding(all = 8.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Row(modifier = Modifier.weight(1f), content = leftContent)
+            CustomIconButton(
+                modifier = Modifier.padding(end = 8.dp),
+                contentDescription = "",
+                painter = painterResource(id = R.drawable.baseline_close_24),
+                onClick = onCloseClick,
+            )
+        }
+        AnimatedVisibility(
+            visible = isScrolled,
+            enter = fadeIn(animationSpec = tween(500)),
+            exit = fadeOut(animationSpec = tween(500)),
+        ) {
+            HorizontalDivider(thickness = 2.dp, color = MaterialTheme.colorScheme.secondaryContainer)
+        }
+    }
+}
+
+@UiModePreview
+@Composable
+fun PreviewDialogTopBar() {
+    HiraganaConverterTheme {
+        Surface {
+            DialogTopBar(
+                isScrolled = true,
+                leftContent = {},
+                onCloseClick = {},
+            )
+        }
+    }
+}

feature/converter/src/main/java/ksnd/hiraganaconverter/feature/converter/ConverterScreen.kt

@@ -69,6 +69,7 @@ import ksnd.hiraganaconverter.core.ui.LocalIsConnectNetwork
 import ksnd.hiraganaconverter.core.ui.parts.button.ConvertButton
 import ksnd.hiraganaconverter.core.ui.parts.button.CustomButtonWithBackground
 import ksnd.hiraganaconverter.core.ui.parts.button.CustomIconButton
+import ksnd.hiraganaconverter.core.ui.parts.button.MoveTopButton
 import ksnd.hiraganaconverter.core.ui.parts.card.ConversionTypeCard
 import ksnd.hiraganaconverter.core.ui.parts.card.ERROR_CARD_ANIMATUIB_DURATION
 import ksnd.hiraganaconverter.core.ui.parts.card.ErrorCard
@@ -81,12 +82,12 @@ import my.nanihadesuka.compose.ScrollbarSelectionMode
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ConverterScreen(
-    modifier: Modifier = Modifier,
-    snackbarHostState: SnackbarHostState,
     viewModel: ConvertViewModel,
-    topBar: @Composable () -> Unit,
-    topBarHeight: Int,
+    snackbarHostState: SnackbarHostState,
     scrollBehavior: TopAppBarScrollBehavior,
+    topBarHeight: Int,
+    modifier: Modifier = Modifier,
+    topBar: @Composable () -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle(ConvertUiState())
     val analytics = LocalAnalytics.current
@@ -163,7 +164,7 @@ fun ConverterScreenContent(
         topBar = topBar,
         snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
         containerColor = MaterialTheme.colorScheme.surface,
-        floatingActionButton = { ksnd.hiraganaconverter.core.ui.parts.button.MoveTopButton(scrollState = scrollState) },
+        floatingActionButton = { MoveTopButton(scrollState = scrollState) },
     ) { innerPadding ->
         ColumnScrollbar(
             state = scrollState,