Merge pull request #2558 from myxmaster/intro_explainers

Intro: Show explainer inside buttons
ZeusLN · Nov 23, 2024 · 468f0f4 · 468f0f4
2 parents 6a5b266 + c2d313f
commit 468f0f4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -4,7 +4,7 @@ import { themeColor } from './../utils/ThemeUtils';
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 interface ButtonProps {
-    title?: string;
+    title?: string | React.ReactElement;
     icon?: any;
     titleStyle?: TextStyle;
     onPress?: any;

diff --git a/locales/en.json b/locales/en.json
@@ -511,9 +511,11 @@
     "views.NodeQRScanner.error": "Scanned QR code was not a valid Lightning Node",
     "views.Intro.whatIsZeus": "What is Zeus?",
     "views.Intro.quickStart": "Quick start",
+    "views.Intro.quickStartExplainer": "Your own node on the phone",
     "views.Intro.lightningOnboarding": "Learn about lightning onboarding",
     "views.Intro.lightningLiquidity": "Learn about lightning liquidity",
     "views.Intro.advancedSetUp": "Advanced set-up",
+    "views.Intro.advancedSetUpExplainer": "Connect to a remote node",
     "views.Intro.creatingWallet": "Zeus is creating your wallet.",
     "views.Intro.choosingPeers": "ZEUS is choosing your peers.",
     "views.Intro.carousel1.title": "Payments you can trust",

diff --git a/views/Intro.tsx b/views/Intro.tsx
@@ -173,7 +173,36 @@ const Intro: React.FC<IntroProps> = (props) => {
                             }}
                         >
                             <Button
-                                title={localeString('views.Intro.quickStart')}
+                                title={
+                                    <View>
+                                        <Text
+                                            style={{
+                                                fontSize: 20,
+                                                fontFamily:
+                                                    'PPNeueMontreal-Book',
+                                                color: themeColor('white'),
+                                                textAlign: 'center'
+                                            }}
+                                        >
+                                            {localeString(
+                                                'views.Intro.quickStart'
+                                            ).toUpperCase()}
+                                        </Text>
+                                        <Text
+                                            style={{
+                                                fontSize: 14,
+                                                fontFamily:
+                                                    'PPNeueMontreal-Book',
+                                                color: themeColor('white'),
+                                                textAlign: 'center'
+                                            }}
+                                        >
+                                            {localeString(
+                                                'views.Intro.quickStartExplainer'
+                                            ).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                }
                                 onPress={async () => {
                                     const { settingsStore } = stores;
                                     const {
@@ -226,9 +255,36 @@ const Intro: React.FC<IntroProps> = (props) => {
                             }}
                         >
                             <Button
-                                title={localeString(
-                                    'views.Intro.advancedSetUp'
-                                )}
+                                title={
+                                    <View>
+                                        <Text
+                                            style={{
+                                                fontSize: 20,
+                                                fontFamily:
+                                                    'PPNeueMontreal-Book',
+                                                color: themeColor('highlight'),
+                                                textAlign: 'center'
+                                            }}
+                                        >
+                                            {localeString(
+                                                'views.Intro.advancedSetUp'
+                                            )}
+                                        </Text>
+                                        <Text
+                                            style={{
+                                                fontSize: 14,
+                                                fontFamily:
+                                                    'PPNeueMontreal-Book',
+                                                color: themeColor('highlight'),
+                                                textAlign: 'center'
+                                            }}
+                                        >
+                                            {localeString(
+                                                'views.Intro.advancedSetUpExplainer'
+                                            ).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                }
                                 onPress={() => navigation.navigate('Menu')}
                                 secondary
                             />