android: match ios27 icon button and top bar style

android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledIconButton.kt

@@ -18,15 +18,21 @@
 
 package me.kavishdevar.librepods.presentation.components
 
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.graphics.RuntimeShader
 import android.os.Build
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.VectorConverter
 import androidx.compose.animation.core.VisibilityThreshold
 import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -36,6 +42,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.BlendMode
@@ -44,6 +51,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ShaderBrush
 import androidx.compose.ui.graphics.TileMode
 import androidx.compose.ui.graphics.drawOutline
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.drawscope.translate
 import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.graphics.layer.CompositingStrategy
@@ -58,6 +66,8 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.util.fastCoerceAtMost
@@ -68,7 +78,7 @@ import com.kyant.backdrop.backdrops.rememberLayerBackdrop
 import com.kyant.backdrop.drawBackdrop
 import com.kyant.backdrop.effects.lens
 import com.kyant.backdrop.highlight.Highlight
-import com.kyant.backdrop.shadow.Shadow
+import com.kyant.backdrop.shadow.InnerShadow
 import kotlinx.coroutines.launch
 import me.kavishdevar.librepods.R
 import me.kavishdevar.librepods.utils.inspectDragGestures
@@ -136,11 +146,14 @@ half4 main(float2 coord) {
                 backdrop = backdrop,
                 shape = { RoundedCornerShape(56.dp) },
                 highlight = { Highlight.Ambient.copy(alpha = if (isDarkTheme) 1f else 0f) },
-                shadow = {
+                innerShadow = {
-                    Shadow(
+                    if (isDarkTheme) {
-                        radius = 12f.dp,
+                        InnerShadow(
-                        color = Color.Black.copy(if (isDarkTheme) 0.08f else 0.2f)
+                            radius = 0.5.dp,
-                    )
+                            offset = DpOffset(1.dp, 1.dp),
+                            color = Color.White.copy(0.6f),
+                        )
+                    } else InnerShadow()
                 },
                 layerBlock = {
                     if (!enabled) return@drawBackdrop
@@ -204,6 +217,14 @@ half4 main(float2 coord) {
                         drawRect(surfaceColor)
                     }
 
+                    if (!isDarkTheme) {
+                        drawOutline(
+                            outline = outline,
+                            color = Color.Black.copy(0.4f),
+                            style = Stroke(1f),
+                        )
+                    }
+
                     drawRect(
                         (if (isDarkTheme) Color(0xFFAFAFAF) else Color.White).copy(
                             progress.coerceIn(
@@ -304,3 +325,15 @@ half4 main(float2 coord) {
         )
     }
 }
+
+@Preview(uiMode = UI_MODE_NIGHT_NO, name = "Light")
+@Preview(uiMode = UI_MODE_NIGHT_YES, name = "Dark")
+@Composable
+fun StyledIconButtonPreview() {
+    Box(modifier = Modifier.height(120.dp).width(200.dp).background(if (isSystemInDarkTheme()) Color(0xFF000000) else Color(0xFFF2F2F7), RoundedCornerShape(28.dp)), contentAlignment = Alignment.Center) {
+        StyledIconButton(
+            icon = "􀍟",
+            onClick = { }
+        )
+    }
+}

android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledScaffold.kt

@@ -52,7 +52,6 @@ import androidx.compose.ui.zIndex
 import com.kyant.backdrop.backdrops.LayerBackdrop
 import com.kyant.backdrop.backdrops.layerBackdrop
 import com.kyant.backdrop.backdrops.rememberLayerBackdrop
-import dev.chrisbanes.haze.HazeProgressive
 import dev.chrisbanes.haze.HazeState
 import dev.chrisbanes.haze.HazeTint
 import dev.chrisbanes.haze.hazeEffect
@@ -93,24 +92,29 @@ fun StyledScaffold(
                     .height(64.dp + topPadding)
                     .fillMaxWidth()
                     .layerBackdrop(backdrop)
-                    .hazeEffect(state = hazeState) {
+                    .hazeEffect(
-                        tints = listOf(HazeTint(color = if (isDarkTheme) Color.Black else Color.White))
+                        state = hazeState
-                        progressive = HazeProgressive.verticalGradient(startIntensity = 1f, endIntensity = 0f)
+                    ) {
+                        backgroundColor = if (isDarkTheme) Color(0xFF000000) else Color(0xFFF2F2F7)
+                        tints = listOf(HazeTint(
+                            if (isDarkTheme) Color.Black.copy(0.55f) else Color(0xFFF2F2F7).copy(alpha = 0.85f)
+                        ))
+                        blurRadius = 6.dp
                     }
             ) {
                 Column(modifier = Modifier.fillMaxSize()) {
                     Spacer(modifier = Modifier.height(topPadding + 12.dp))
                     Text(
-                            text = title,
+                        text = title,
-                            style = TextStyle(
+                        style = TextStyle(
-                                fontSize = 20.sp,
+                            fontSize = 20.sp,
-                                fontWeight = FontWeight.Medium,
+                            fontWeight = FontWeight.SemiBold,
-                                color = if (isDarkTheme) Color.White else Color.Black,
+                            color = if (isDarkTheme) Color.White else Color.Black,
-                                fontFamily = FontFamily(Font(R.font.sf_pro))
+                            fontFamily = FontFamily(Font(R.font.sf_pro))
-                            ),
+                        ),
-                            modifier = Modifier.fillMaxWidth(),
+                        modifier = Modifier.fillMaxWidth(),
-                            textAlign = TextAlign.Center
+                        textAlign = TextAlign.Center
-                        )
+                    )
                 }
             }
             Row(