Merge pull request #408 from getAlby/fix/settings

fix: add scroll view to settings screen

Author: im-adithya

components/AlbyBanner.tsx

@@ -6,9 +6,10 @@ import { ALBY_LIGHTNING_ADDRESS } from "~/lib/constants";
 import { initiatePaymentFlow } from "~/lib/initiatePaymentFlow";
 import { useAppStore } from "~/lib/state/appStore";
 import { useThemeColor } from "~/lib/useThemeColor";
+import { cn } from "~/lib/utils";
 import { Button } from "./ui/button";
 
-function AlbyBanner() {
+function AlbyBanner({ className }: { className?: string }) {
   const { shadow } = useThemeColor("shadow");
   const lastPayment = useAppStore.getState().getLastAlbyPayment();
   const [showBanner, setShowBanner] = useState(
@@ -39,7 +40,10 @@ function AlbyBanner() {
 
   return (
     <View
-      className="bg-background dark:bg-muted rounded-2xl flex flex-col gap-3 p-4 relative mx-2"
+      className={cn(
+        "bg-background dark:bg-muted rounded-2xl flex flex-col gap-3 p-4 relative",
+        className,
+      )}
       style={{
         ...Platform.select({
           // make sure bg color is applied to avoid RCTView errors

pages/Home.tsx

@@ -136,7 +136,7 @@ export function Home() {
           showsVerticalScrollIndicator={false}
           contentContainerClassName="flex-1 px-6"
         >
-          <View className="flex-1 justify-center gap-8">
+          <View className="flex-1 justify-center gap-4 sm:gap-8">
             <View className="flex items-center justify-center gap-2">
               {wallets.length > 1 && (
                 <TouchableOpacity
@@ -243,7 +243,7 @@ export function Home() {
                 )}
               </TouchableOpacity>
             </View>
-            {new Date().getDate() === 21 && <AlbyBanner />}
+            {new Date().getDate() !== 21 && <AlbyBanner />}
           </View>
         </ScrollView>
         <View className="flex items-center justify-center">