feat(topbar): refactor DefaultTopBar to use Surface and improve layout structure

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/DefaultTopBar.kt

@@ -7,18 +7,19 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Search
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonColors
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -31,18 +32,27 @@ import hu.bbara.purefin.navigation.LocalNavSharedAnimatedVisibilityScope
 import hu.bbara.purefin.navigation.LocalSharedTransitionScope
 import hu.bbara.purefin.ui.common.image.PurefinLogo
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DefaultTopBar(
     actions: @Composable RowScope.() -> Unit
 ) {
     val scheme = MaterialTheme.colorScheme
 
-    TopAppBar(
+    Surface(
-        title = {
+        color = scheme.background,
+        contentColor = scheme.onSurface,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row(
+            modifier = Modifier
+                .statusBarsPadding()
+                .height(84.dp)
+                .padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
             Row(
-                modifier = Modifier,
+                modifier = Modifier.weight(1f),
-                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.Start,
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 PurefinLogo(
@@ -56,16 +66,12 @@ fun DefaultTopBar(
                     color = scheme.onSecondary
                 )
             }
-        },
+            Row(
-        actions = actions,
+                verticalAlignment = Alignment.CenterVertically,
-        colors = TopAppBarDefaults.largeTopAppBarColors(
+                content = actions
-            containerColor = scheme.background,
+            )
-            navigationIconContentColor = scheme.onSurface,
+        }
-            actionIconContentColor = scheme.onSurface,
+    }
-            titleContentColor = scheme.onSurface
-        ),
-        modifier = Modifier.padding(end = 12.dp)
-    )
 }
 
 @OptIn(ExperimentalSharedTransitionApi::class)

app/src/main/res/drawable/purefin_logo_tintable.xml

@@ -1,12 +1,13 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="600dp"
+    android:width="494dp"
     android:height="552dp"
-    android:viewportWidth="600"
+    android:viewportWidth="494"
     android:viewportHeight="552">
 
     <group
         android:scaleX="0.1"
         android:scaleY="-0.1"
+        android:translateX="-106"
         android:translateY="552">
 
         <path
@@ -17,4 +18,4 @@
             android:fillColor="@android:color/white"
             android:pathData="M3754,3278c14,-45 28,-231 22,-298 -3,-42 -18,-116 -32,-164 -27,-94 -25,-118 11,-142 66,-43 121,70 119,251 -1,87 -30,208 -69,285 -26,51 -60,96 -51,68z" />
     </group>
-</vector>
+</vector>