style

src/components/player/GlobalAudioPlayer.js

@@ -4,8 +4,9 @@ import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { icons, img } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
 import usePlayer from "../../hooks/usePlayer";
-import { Palette } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 
 const formatDuration = (ms) => {
@@ -50,14 +51,24 @@ const GlobalAudioPlayer = () => {
     }
   };
 
+  const TAB_BAR_HEIGHT = 64;
+  const GAP_WITH_TAB = 8;
+  const bottomOffset = (isWeb ? gutters : 3) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
+
   return (
-    <View pointerEvents="box-none" style={styles.host}>
+    <View
+      pointerEvents="box-none"
+      style={[styles.host, { bottom: bottomOffset }]}
+    >
       <BlurView
         intensity={40}
         // tint="dark"
         blurReductionFactor={2}
         // tint="dark"
-        style={[styles.container]}
+        style={[
+          styles.container,
+          { paddingVertical: Math.max(4, insets.bottom / 6) },
+        ]}
         experimentalBlurMethod="dimezisBlurView"
       >
         <Image source={artworkSource} style={styles.cover} />
@@ -91,21 +102,19 @@ const GlobalAudioPlayer = () => {
 const styles = StyleSheet.create({
   host: {
     position: "absolute",
-    left: 0,
+    alignSelf: "center",
-    right: 0,
+    width: "90%",
-    bottom: 0,
+    maxWidth: 500,
     pointerEvents: "box-none",
   },
   container: {
-    marginHorizontal: 16,
+    width: "100%",
-    marginBottom: 80,
     borderRadius: 12,
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
     overflow: "hidden",
     paddingHorizontal: 4,
-    paddingVertical: 4,
     // backgroundColor: "rgba(18, 11, 29, 0.85)",
     // borderWidth: 1,
     // borderColor: "#372152",

src/navigation/TabBar.js

@@ -15,7 +15,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
     <View
       style={{
         position: "absolute",
-        bottom: gutters * 2,
+        bottom: isWeb ? gutters : 3,
         width: "90%",
         maxWidth: 500,
         alignSelf: "center",

src/screens/Home/Home.js

@@ -296,7 +296,7 @@ const Home = () => {
         <View
           style={{
             position: "absolute",
-            bottom: isWeb ? 180 : 120,
+            bottom: isWeb ? 180 : 140,
             flexDirection: isWeb ? "row" : "column",
             gap: 5,
             alignSelf: "center",
@@ -360,5 +360,6 @@ const styles = StyleSheet.create({
   carouselSection: {
     width: "100%",
     flex: 1,
+    marginBottom: 40,
   },
 });