mobile: update svg logos in paywall

This commit is contained in:
Ammar Ahmed
2026-05-04 09:09:10 +05:00
parent fa349514e2
commit 72be37d51a
8 changed files with 299 additions and 140 deletions

File diff suppressed because one or more lines are too long

View File

@@ -31,7 +31,17 @@ import {
import Config from "react-native-config";
import * as RNIap from "react-native-iap";
import { SafeAreaView } from "react-native-safe-area-context";
import { TRUST_BAR_SVG } from "../../assets/images/assets";
import {
ANDROID_POLICE_SVG,
APPLE_INSIDER,
FREEDOM_PRESS_SVG,
NESS_LABS,
PRIVACY_GUIDES_SVG,
TECHLORE_SVG,
THE_VERGE_SVG,
TRUST_BAR_SVG,
XDA_SVG
} from "../../assets/images/assets";
import { db } from "../../common/database";
import { Radius, Spacing } from "../../common/design/spacing";
import { useNavigationFocus } from "../../hooks/use-navigation-focus";
@@ -56,6 +66,57 @@ import { FAQItem } from "./faq-item";
import { PricingPlanCard } from "./plan-card";
import { ReviewItem } from "./review-item";
const PRESS_LOGOS = [
{
id: "android-police",
src: ANDROID_POLICE_SVG,
width: 120,
height: 14
},
{
id: "the-verge",
src: THE_VERGE_SVG,
width: 67,
height: 14
},
{
id: "freedom-press",
src: FREEDOM_PRESS_SVG,
width: 80,
height: 12
},
{
id: "privacy-guides",
src: PRIVACY_GUIDES_SVG,
width: 110,
height: 16
},
{
id: "techlore",
src: TECHLORE_SVG,
width: 72,
height: 14
},
{
id: "apple-insider",
src: APPLE_INSIDER,
width: 76,
height: 13
},
{
id: "xda",
src: XDA_SVG,
width: 40,
height: 12
},
{
id: "ness-labs",
src: NESS_LABS,
width: 39,
height: 23
}
];
const PayWall = (props: NavigationProps<"PayWall">) => {
const isGithubRelease = Config.GITHUB_RELEASE === "true";
const routeParams = props.route.params;
@@ -150,45 +211,66 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
height: 50,
justifyContent: "flex-end",
alignItems: "flex-end",
width: "100%",
flexDirection: "row",
paddingHorizontal: DefaultAppStyles.GAP
}}
>
<IconButton
name="close"
iconFamily="notesnook"
testID="paywall-close"
color={colors.primary.icon}
size={25}
size={18}
onPress={() => {
Navigation.navigate("FluidPanelsView", {});
}}
/>
</View>
) : (
<Header
canGoBack={true}
onLeftMenuButtonPress={() => {
if (step === Steps.buy) {
setStep(Steps.select);
return;
}
if (routeParams.context === "signup") {
Navigation.navigate("FluidPanelsView", {});
} else {
Navigation.goBack();
}
<View
style={{
height: 50,
justifyContent: "flex-start",
flexShrink: 1,
flexGrow: 1,
flexDirection: "row",
paddingHorizontal: DefaultAppStyles.GAP
}}
title={
step === Steps.buy || step === Steps.buyWeb
? pricingPlans.userCanRequestTrial
? strings.tryPlanForFree(
pricingPlans.currentPlan?.name as string
)
: strings.plan(pricingPlans.currentPlan?.name as string)
: ""
}
/>
>
<IconButton
name="arrow-back"
iconFamily="notesnook"
testID="paywall-close"
color={colors.primary.icon}
size={18}
onPress={() => {
Navigation.navigate("FluidPanelsView", {});
}}
/>
</View>
// <Header
// canGoBack={true}
// onLeftMenuButtonPress={() => {
// if (step === Steps.buy) {
// setStep(Steps.select);
// return;
// }
// if (routeParams.context === "signup") {
// Navigation.navigate("FluidPanelsView", {});
// } else {
// Navigation.goBack();
// }
// }}
// title={
// step === Steps.buy || step === Steps.buyWeb
// ? pricingPlans.userCanRequestTrial
// ? strings.tryPlanForFree(
// pricingPlans.currentPlan?.name as string
// )
// : strings.plan(pricingPlans.currentPlan?.name as string)
// : ""
// }
// />
)}
{step === Steps.select ? (
@@ -304,7 +386,9 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
padding: Spacing.LEVEL_0
}}
>
<Paragraph>-20%</Paragraph>
<Paragraph color={colors.primary.accentForeground}>
-20%
</Paragraph>
</View>
</Pressable>
</View>
@@ -396,17 +480,35 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
<View
style={{
width: "100%"
width: "100%",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
gap: Spacing.LEVEL_1,
paddingVertical: Spacing.LEVEL_7
}}
>
<SvgView
src={TRUST_BAR_SVG}
style={{
height: 230,
width: undefined,
paddingVertical: Spacing.LEVEL_7
}}
/>
{PRESS_LOGOS.map((item) => (
<View
key={item.id}
style={{
backgroundColor: colors.secondary.background,
paddingVertical: Spacing.LEVEL_3,
paddingHorizontal: Spacing.LEVEL_2,
borderRadius: Radius.XS,
alignItems: "center",
justifyContent: "center"
}}
>
<SvgView
src={item.src}
style={{
width: item.width,
height: item.height
}}
/>
</View>
))}
</View>
<View>

View File

@@ -98,9 +98,9 @@ export const IconButton = ({
style={{
justifyContent: "center",
alignItems: "center",
borderRadius: 100,
width: 40 * growFactor,
height: 40 * growFactor,
// borderRadius: 100,
width: size,
height: size,
...style
}}
>

View File

@@ -750,7 +750,10 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
},
regionalDiscount: regionalDiscount.result,
isGithubRelease: isGithubRelease,
isSubscribed: () => user?.subscription?.plan !== SubscriptionPlan.FREE,
isSubscribed: () =>
user &&
user.subscription &&
user?.subscription?.plan !== SubscriptionPlan.FREE,
finish: () => options?.onBuy?.()
};
};

View File

@@ -1 +1 @@
{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"83a1ac81fdaaf076cb52c3ad793c668b4be2ce48e94af989b74c69660096843b"},"i":{"archive":[1024,[[59648,"#666666"]]],"bell":[1024,[[59649,"#666666"]]],"book-open":[1024,[[59650,"#666666"]]],"bookmark":[1024,[[59651,"#666666"]]],"box-empty":[1024,[[59652,"#B0B0B1"]]],"calendar":[1024,[[59653,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59654,"white"]]],"checkbox":[1024,[[59655,"#008836"],[59656,"white"]]],"checks":[1024,[[59657,"#181818"]]],"chevron-down":[1024,[[59658,"#181818"]]],"chevron-up":[1024,[[59659,"#181818"]]],"close":[1024,[[59660,"#666666"]]],"dark-mode-outline":[1024,[[59661,"currentColor"]]],"dots-three":[1024,[[59662,"#202020"]]],"drive-file-move":[1088,[[59663,"#666666"]]],"envelope-simple":[1024,[[59664,"white"]]],"funnel":[1024,[[59665,"#666666"]]],"home":[1024,[[59666,"#181818"]]],"link":[560,[[59667,"#666666"]]],"lock-simple":[1024,[[59668,"white"]]],"menu":[1024,[[59669,"#181818"]]],"note":[1024,[[59670,"#181818"]]],"pin":[939,[[59671,"#666666"]]],"plus":[1024,[[59672,"#666666"]]],"search":[1024,[[59673,"#181818"]]],"shield-check":[1024,[[59674,"#008836"]]],"shopping-mode":[1024,[[59675,"#666666"]]],"sliders":[1024,[[59676,"#181818"]]],"sort-ascending":[1024,[[59677,"#666666"]]],"sort-descending":[1024,[[59678,"currentColor"]]],"star-filled":[1024,[[59679,"#E5C131"]]],"star":[1024,[[59680,"#666666"]]],"sun":[1024,[[59681,"#666666"]]],"trash":[1024,[[59682,"#666666"]]],"view-list":[1024,[[59683,"#181818"]]],"warning-circle":[1024,[[59684,"#BB3431"]]]}}
{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"07a452234d5730a0542b3d4875bf7d4479d5a4ede12c782514ba8bb1a6d4619d"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"dark-mode-outline":[1024,[[59662,"currentColor"]]],"dots-three":[1024,[[59663,"#202020"]]],"drive-file-move":[1088,[[59664,"#666666"]]],"edit-pencil":[1024,[[59665,"#181818"]]],"envelope-simple":[1024,[[59666,"white"]]],"funnel":[1024,[[59667,"#666666"]]],"home":[1024,[[59668,"#181818"]]],"link":[560,[[59669,"#666666"]]],"lock-simple":[1024,[[59670,"white"]]],"menu":[1024,[[59671,"#181818"]]],"note":[1024,[[59672,"#181818"]]],"pin":[939,[[59673,"#666666"]]],"plus":[1024,[[59674,"#666666"]]],"search":[1024,[[59675,"#181818"]]],"shield-check":[1024,[[59676,"#008836"]]],"shopping-mode":[1024,[[59677,"#666666"]]],"sliders":[1024,[[59678,"#181818"]]],"sort-ascending":[1024,[[59679,"#666666"]]],"sort-descending":[1024,[[59680,"currentColor"]]],"square-out":[1024,[[59681,"#181818"]]],"star-filled":[1024,[[59682,"#E5C131"]]],"star":[1024,[[59683,"#666666"]]],"sun":[1024,[[59684,"#666666"]]],"trash":[1024,[[59685,"#666666"]]],"view-list":[1024,[[59686,"#181818"]]],"warning-circle":[1024,[[59687,"#BB3431"]]]}}

View File

@@ -0,0 +1,10 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1133_12157)">
<path d="M9 3L10.0575 4.0575L5.8725 8.25H15V9.75H5.8725L10.0575 13.9425L9 15L3 9L9 3Z" fill="white" fill-opacity="0.7"/>
</g>
<defs>
<clipPath id="clip0_1133_12157">
<rect width="18" height="18" fill="white" transform="matrix(-1 0 0 1 18 0)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 406 B