Components: Header

ZeusLN · Mar 26, 2023 · 69e20b8 · 69e20b8
1 parent fd9e7a4
commit 69e20b8
Show file tree

Hide file tree

Showing 53 changed files with 486 additions and 600 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Header } from 'react-native-elements';
+
+interface HeaderProps {
+    leftComponent?: any;
+    centerComponent?: any;
+    rightComponent?: any;
+    containerStyle?: any;
+    placement?: 'left' | 'center' | 'right' | undefined;
+}
+
+function ZeusHeader(props: HeaderProps) {
+    const {
+        leftComponent,
+        centerComponent,
+        rightComponent,
+        containerStyle,
+        placement
+    } = props;
+    return (
+        <Header
+            leftComponent={leftComponent ? leftComponent : null}
+            centerComponent={centerComponent ? centerComponent : null}
+            rightComponent={rightComponent ? rightComponent : null}
+            backgroundColor="transparent"
+            containerStyle={{
+                ...containerStyle,
+                borderBottomWidth: 0,
+                marginBottom: 0
+            }}
+            placement={placement}
+        />
+    );
+}
+
+export default ZeusHeader;
diff --git a/components/Screen.tsx b/components/Screen.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { SafeAreaView } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import { themeColor } from '../utils/ThemeUtils';
@@ -17,9 +16,7 @@ export default class Screen extends React.PureComponent {
                     flex: 1
                 }}
             >
-                <SafeAreaView style={{ flex: 1 }}>
-                    {this.props.children}
-                </SafeAreaView>
+                {this.props.children}
             </LinearGradient>
         );
     }

diff --git a/components/WalletHeader.tsx b/components/WalletHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge, Header } from 'react-native-elements';
+import { Badge } from 'react-native-elements';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { inject, observer } from 'mobx-react';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -10,6 +10,7 @@ import NodeInfoStore from '../stores/NodeInfoStore';
 import PosStore from '../stores/PosStore';
 
 import Button from '../components/Button';
+import Header from './Header';
 import LoadingIndicator from '../components/LoadingIndicator';
 import NodeIdenticon from '../components/NodeIdenticon';
 
@@ -342,10 +343,6 @@ export default class WalletHeader extends React.Component<
                         </View>
                     )
                 }
-                backgroundColor="transparent"
-                containerStyle={{
-                    borderBottomWidth: 0
-                }}
             />
         );
     }

diff --git a/views/Accounts/Accounts.tsx b/views/Accounts/Accounts.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
-import { Header, Icon } from 'react-native-elements';
+import { Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
-import Button from './../../components/Button';
-import LayerBalances from './../../components/LayerBalances';
-import LoadingIndicator from './../../components/LoadingIndicator';
-import Screen from './../../components/Screen';
+import Button from '../../components/Button';
+import Header from '../../components/Header';
+import LayerBalances from '../../components/LayerBalances';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import Screen from '../../components/Screen';
 
-import BalanceStore from './../../stores/BalanceStore';
-import UnitsStore from './../../stores/UnitsStore';
-import UTXOsStore from './../../stores/UTXOsStore';
-import SettingsStore from './../../stores/SettingsStore';
+import BalanceStore from '../../stores/BalanceStore';
+import UnitsStore from '../../stores/UnitsStore';
+import UTXOsStore from '../../stores/UTXOsStore';
+import SettingsStore from '../../stores/SettingsStore';
 
-import BackendUtils from './../../utils/BackendUtils';
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import BackendUtils from '../../utils/BackendUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
 interface AccountsProps {
     navigation: any;
@@ -116,10 +117,6 @@ export default class Accounts extends React.Component<
                         style: { color: themeColor('text') }
                     }}
                     rightComponent={value ? null : <AddButton />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 {loadingAccounts && <LoadingIndicator />}
                 {!loadingAccounts && (

diff --git a/views/Accounts/ImportAccount.tsx b/views/Accounts/ImportAccount.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { Button, Header, Icon } from 'react-native-elements';
+import { Button, Icon } from 'react-native-elements';
 
-import TextInput from './../../components/TextInput';
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import Header from '../../components/Header';
+import TextInput from '../../components/TextInput';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
 interface ImportAccountProps {
     exitSetup: any;
@@ -87,7 +88,6 @@ export default class ImportAccount extends React.Component<
                         text: localeString('views.ImportAccount.title'),
                         style: { color: themeColor('text') }
                     }}
-                    backgroundColor="grey"
                 />
                 <View style={styles.content}>
                     <Text

diff --git a/views/Activity/Activity.tsx b/views/Activity/Activity.tsx
@@ -6,10 +6,11 @@ import {
     TouchableOpacity,
     View
 } from 'react-native';
-import { Button, Header, Icon, ListItem } from 'react-native-elements';
+import { Button, Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Amount from '../../components/Amount';
+import Header from '../../components/Header';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import Screen from '../../components/Screen';
 
@@ -145,10 +146,6 @@ export default class Activity extends React.Component<ActivityProps, {}> {
                         }
                     }}
                     rightComponent={<FilterButton />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 {loading ? (
                     <View style={{ padding: 50 }}>

diff --git a/views/Activity/ActivityFilter.tsx b/views/Activity/ActivityFilter.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
-import { Button, Header, Icon, ListItem } from 'react-native-elements';
+import { Button, Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 import { isEqual } from 'lodash';
 
 import DatePicker from 'react-native-date-picker';
 
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
-import ActivityStore, { DEFAULT_FILTERS } from './../../stores/ActivityStore';
+import ActivityStore, { DEFAULT_FILTERS } from '../../stores/ActivityStore';
 
-import Screen from './../../components/Screen';
-import Switch from './../../components/Switch';
-import TextInput from './../../components/TextInput';
-import ZeusButton from './../../components/Button';
+import Header from '../../components/Header';
+import Screen from '../../components/Screen';
+import Switch from '../../components/Switch';
+import TextInput from '../../components/TextInput';
+import ZeusButton from '../../components/Button';
 
 interface ActivityFilterProps {
     navigation: any;
@@ -297,10 +298,6 @@ export default class ActivityFilter extends React.Component<
                             <ClearButton />
                         )
                     }
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 <FlatList
                     data={FILTERS}

diff --git a/views/BumpFee.tsx b/views/BumpFee.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
-import { ButtonGroup, Header, Icon } from 'react-native-elements';
+import { ButtonGroup, Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Button from '../components/Button';
+import Header from '../components/Header';
 import LoadingIndicator from '../components/LoadingIndicator';
 import Screen from '../components/Screen';
 import {
@@ -134,10 +135,6 @@ export default class BumpFee extends React.PureComponent<
                             fontFamily: 'Lato-Regular'
                         }
                     }}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 <View
                     style={{

diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
@@ -9,12 +9,13 @@ import {
 } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 
-import { Divider, Header, Icon } from 'react-native-elements';
+import { Divider, Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 import Channel from '../../models/Channel';
 
 import BalanceSlider from '../../components/BalanceSlider';
 import Button from '../../components/Button';
+import Header from '../../components/Header';
 import KeyValue from '../../components/KeyValue';
 import Amount from '../../components/Amount';
 import FeeBreakdown from '../../components/FeeBreakdown';
@@ -211,10 +212,6 @@ export default class ChannelView extends React.Component<
                     leftComponent={<BackButton />}
                     centerComponent={centerComponent}
                     rightComponent={<KeySend />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                     placement="right"
                 />
                 <ScrollView style={styles.content}>

diff --git a/views/EditFee.tsx b/views/EditFee.tsx
@@ -8,10 +8,11 @@ import {
     TouchableOpacity,
     TouchableWithoutFeedback
 } from 'react-native';
-import { Icon, Header } from 'react-native-elements';
+import { Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Button from '../components/Button';
+import Header from '../components/Header';
 import LightningIndicator from '../components/LightningIndicator';
 import Screen from '../components/Screen';
 
@@ -84,12 +85,8 @@ export default class EditFee extends React.Component<
                             : localeString('views.EditFee.title'),
                         style: { color: themeColor('text') }
                     }}
-                    backgroundColor="transparent"
                     leftComponent={<BackButton />}
                     rightComponent={<ReloadButton />}
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 <View
                     style={{

diff --git a/views/IntroSplash.tsx b/views/IntroSplash.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { Image, View, SafeAreaView, TouchableOpacity } from 'react-native';
-import { Header } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Globe from '../assets/images/SVG/Globe.svg';
 import WordLogo from '../assets/images/SVG/Word Logo - no outline.svg';
 
-import Button from './../components/Button';
-import Screen from './../components/Screen';
+import Button from '../components/Button';
+import Header from '../components/Header';
+import Screen from '../components/Screen';
 
-import SettingsStore from './../stores/SettingsStore';
+import SettingsStore from '../stores/SettingsStore';
 
-import { localeString } from './../utils/LocaleUtils';
-import { themeColor } from './../utils/ThemeUtils';
+import { localeString } from '../utils/LocaleUtils';
+import { themeColor } from '../utils/ThemeUtils';
 
-const Splash = require('./../assets/images/intro/splash.png');
+const Splash = require('../assets/images/intro/splash.png');
 
 interface IntroSplashProps {
     navigation: any;
@@ -42,13 +42,7 @@ export default class IntroSplash extends React.Component<IntroSplashProps, {}> {
 
         return (
             <Screen>
-                <Header
-                    rightComponent={<LanguageButton />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
-                />
+                <Header rightComponent={<LanguageButton />} />
                 <SafeAreaView
                     style={{
                         flex: 1,

diff --git a/views/Invoice.tsx b/views/Invoice.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { StyleSheet, ScrollView, View } from 'react-native';
-import { Header, Icon } from 'react-native-elements';
-import Invoice from './../models/Invoice';
+import { Icon } from 'react-native-elements';
+import Invoice from '../models/Invoice';
 
-import Amount from './../components/Amount';
-import CollapsedQR from './../components/CollapsedQR';
-import KeyValue from './../components/KeyValue';
-import Screen from './../components/Screen';
+import Amount from '../components/Amount';
+import Header from '../components/Header';
+import CollapsedQR from '../components/CollapsedQR';
+import KeyValue from '../components/KeyValue';
+import Screen from '../components/Screen';
 
-import { localeString } from './../utils/LocaleUtils';
-import { themeColor } from './../utils/ThemeUtils';
+import { localeString } from '../utils/LocaleUtils';
+import { themeColor } from '../utils/ThemeUtils';
 
 interface InvoiceProps {
     navigation: any;
@@ -55,10 +56,6 @@ export default class InvoiceView extends React.Component<InvoiceProps> {
                             fontFamily: 'Lato-Regular'
                         }
                     }}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
                 />
                 <ScrollView>
                     <View style={styles.center}>