From 2e0bbcfec105dfdf8950ad911572fed096c168b7 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Mon, 8 Jun 2026 12:21:04 +0500
Subject: [PATCH] mobile: support dark/light mode on paywall logos

---
 apps/mobile/app/components/paywall/index.tsx  | 22 +++++++++----------
 .../app/components/sheets/buy-plan/index.tsx  |  9 +++++++-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/mobile/app/components/paywall/index.tsx b/apps/mobile/app/components/paywall/index.tsx
index cff1b92cd..c20e5d305 100644
--- a/apps/mobile/app/components/paywall/index.tsx
+++ b/apps/mobile/app/components/paywall/index.tsx
@@ -39,7 +39,6 @@ import {
   PRIVACY_GUIDES_SVG,
   TECHLORE_SVG,
   THE_VERGE_SVG,
-  TRUST_BAR_SVG,
   XDA_SVG
 } from "../../assets/images/assets";
 import { db } from "../../common/database";
@@ -50,7 +49,6 @@ import Navigation, { NavigationProps } from "../../services/navigation";
 import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { AuthMode } from "../auth/common";
-import { Header } from "../header";
 import { BuyPlan } from "../sheets/buy-plan";
 import { Toast } from "../toast";
 import AppIcon from "../ui/AppIcon";
@@ -66,34 +64,34 @@ import { FAQItem } from "./faq-item";
 import { PricingPlanCard } from "./plan-card";
 import { ReviewItem } from "./review-item";
 
-const PRESS_LOGOS = [
+const PRESS_LOGOS = (dark?: boolean) => [
   {
     id: "android-police",
-    src: ANDROID_POLICE_SVG,
+    src: ANDROID_POLICE_SVG.replace(/white/g, dark ? "white" : "black"),
     width: 120,
     height: 14
   },
   {
     id: "the-verge",
-    src: THE_VERGE_SVG,
+    src: THE_VERGE_SVG.replace(/#F0F0F0/gi, dark ? "#F0F0F0" : "#111827"),
     width: 67,
     height: 14
   },
   {
     id: "freedom-press",
-    src: FREEDOM_PRESS_SVG,
+    src: FREEDOM_PRESS_SVG.replace(/white/g, dark ? "white" : "#1F2937"),
     width: 80,
     height: 12
   },
   {
     id: "privacy-guides",
-    src: PRIVACY_GUIDES_SVG,
+    src: PRIVACY_GUIDES_SVG.replace(/white/g, dark ? "white" : "#1F2937"),
     width: 110,
     height: 16
   },
   {
     id: "techlore",
-    src: TECHLORE_SVG,
+    src: TECHLORE_SVG.replace(/white/g, dark ? "white" : "#1F2937"),
     width: 72,
     height: 14
   },
@@ -105,7 +103,7 @@ const PRESS_LOGOS = [
   },
   {
     id: "xda",
-    src: XDA_SVG,
+    src: XDA_SVG.replace(/#C9C9C9/gi, dark ? "#C9C9C9" : "#4B5563"),
     width: 40,
     height: 12
   },
@@ -124,7 +122,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
   const [planPageIndex, setPlanPageIndex] = useState(1);
   const [testimonialIndex, setTestimonialIndex] = useState(0);
   const isTablet = width > 600;
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
   const pricingPlans = usePricingPlans({
     planId: routeParams.state?.planId,
     productId: routeParams.state?.productId,
@@ -484,7 +482,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                 paddingVertical: Spacing.LEVEL_7
               }}
             >
-              {PRESS_LOGOS.map((item) => (
+              {PRESS_LOGOS(isDark).map((item) => (
                 <View
                   key={item.id}
                   style={{
@@ -616,7 +614,7 @@ After trying all the privacy security oriented note taking apps, for the price a
                 paddingVertical: Spacing.LEVEL_4
               }}
             >
-              <Heading fontSize="XL">
+              <Heading fontSize="XL" lineHeight={undefined}>
                 {strings.frequentlyAskedQuestions()}
               </Heading>
             </View>
diff --git a/apps/mobile/app/components/sheets/buy-plan/index.tsx b/apps/mobile/app/components/sheets/buy-plan/index.tsx
index d725307aa..a820b5849 100644
--- a/apps/mobile/app/components/sheets/buy-plan/index.tsx
+++ b/apps/mobile/app/components/sheets/buy-plan/index.tsx
@@ -601,7 +601,14 @@ const ProductItem = (props: {
             : null}
         </Heading>
 
-        <Paragraph size={AppFontSize.xs}>/month</Paragraph>
+        <Paragraph
+          style={{
+            alignSelf: "flex-end"
+          }}
+          size={AppFontSize.xs}
+        >
+          /month
+        </Paragraph>
       </View>
     </TouchableOpacity>
   );