enhance(mobile): polish UI spacing and background styling in various components

android/app/src/main/java/com/logseq/app/NativeBottomSheetPlugin.kt

@@ -1,6 +1,7 @@
 package com.logseq.app
 
 import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
 import android.os.Handler
 import android.os.Looper
 import android.view.View
@@ -50,9 +51,27 @@ class NativeBottomSheetPlugin : Plugin() {
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
 
+            val cornerRadius = NativeUiUtils.dp(ctx, 16f).toFloat()
+            val roundedBackground = GradientDrawable().apply {
+                setColor(LogseqTheme.current().background)
+                cornerRadii = floatArrayOf(
+                    cornerRadius, cornerRadius,  // 左上角
+                    cornerRadius, cornerRadius,  // 右上角
+                    0f, 0f,                      // 右下角
+                    0f, 0f                       // 左下角
+                )
+            }
+            container!!.background = roundedBackground
+            container!!.clipToOutline = true
+
             val sheet = BottomSheetDialog(ctx)
             sheet.setContentView(container!!)
 
+            sheet.setOnShowListener {
+                val bottomSheet = sheet.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
+                bottomSheet?.setBackgroundColor(Color.TRANSPARENT)
+            }
+
             WebViewSnapshotManager.showSnapshot(snapshotTag, webView)
 
             // Move the WebView into the BottomSheet container

android/app/src/main/java/com/logseq/app/NativeSelectionActionBarPlugin.kt

@@ -5,6 +5,7 @@ import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
@@ -205,8 +206,8 @@ private fun SelectionActionBar(
 
     Surface(
         color = background,
-        shadowElevation = 6.dp,
+        shape = RoundedCornerShape(16.dp),
-        shape = RoundedCornerShape(16.dp)
+        border = BorderStroke(1.dp, tint.copy(alpha = 0.05f))
     ) {
         Row(
             modifier = Modifier

src/main/frontend/components/user/login.css

@@ -1,4 +1,6 @@
 .cp__user-login {
+  @apply px-1;
+
   span.opacity-50, a.opacity-60 {
     @apply opacity-80;
   }

src/main/mobile/components/app.css

@@ -40,7 +40,7 @@ html.is-ios textarea,
 html.is-ios input,
 html.is-ios select,
 html.is-ios .block-content,
-html.is-ios .editor-inner,
+html.is-ios .editor-inner
 {
   font-size: inherit;
 }
@@ -229,7 +229,7 @@ ul {
 }
 
 .app-popup {
-  @apply w-full overflow-y-auto overflow-x-hidden;
+  @apply w-full overflow-y-auto overflow-x-hidden px-1;
 }
 
 .app-audio-recorder {

src/main/mobile/components/settings.cljs

@@ -21,7 +21,7 @@
   (let [username (user-handler/username)
         email (user-handler/email)
         initial  (or (some-> username (subs 0 1) string/upper-case) "?")]
-    [:div.pt-4
+    [:div.pt-2
      (if-not login?
        (shui/button
         {:variant :default
@@ -112,7 +112,7 @@
         theme-value (if system-theme?
                       "system"
                       (or theme "system"))]
-    [:div.app-index-settings.min-h-full.py-4.space-y-4
+    [:div.app-index-settings.min-h-full.space-y-4
      (user-profile login?)
      [:div.space-y-4
       [:div.mobile-setting-item