Skip to content

Commit 37198b2

Browse files
kaloudiskaloudis
committed
ui: improve NFC icons
1 parent 5ec9202 commit 37198b2

File tree

8 files changed

+76
-40
lines changed

8 files changed

+76
-40
lines changed

‎assets/images/SVG/NFC-alt.svg‎

Lines changed: 3 additions & 2 deletions
Loading

‎components/Button.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,18 @@ function Button(props: ButtonProps) {
7272
TouchableComponent={TouchableOpacity as unknown as typeof Component}
7373
icon={
7474
icon
75-
? {
76-
color: icon.color
77-
? icon.color
78-
: iconOnly
79-
? textColor
80-
: secondary
81-
? themeColor('highlight')
82-
: themeColor('background'),
83-
...icon
84-
}
75+
? React.isValidElement(icon)
76+
? icon
77+
: {
78+
color: icon.color
79+
? icon.color
80+
: iconOnly
81+
? textColor
82+
: secondary
83+
? themeColor('highlight')
84+
: themeColor('background'),
85+
...icon
86+
}
8587
: null
8688
}
8789
title={title as string | React.ReactElement<{}>}

‎components/NFCButton.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from 'react';
22
import { Platform, TouchableOpacity } from 'react-native';
33

4-
import { Icon } from '@rneui/themed';
54
import HCESession, { NFCContentType, NFCTagType4 } from 'react-native-hce';
65

6+
import NfcIcon from '../assets/images/SVG/NFC-alt.svg';
7+
78
import Button from './../components/Button';
89

910
import { localeString } from '../utils/LocaleUtils';
@@ -74,14 +75,14 @@ export default class NFCButton extends React.Component<
7475
style={{ padding: 5 }}
7576
onPress={this.toggleNfc}
7677
>
77-
<Icon
78-
name={'nfc'}
79-
size={27}
80-
color={
78+
<NfcIcon
79+
stroke={
8180
nfcBroadcast
8281
? themeColor('highlight')
8382
: themeColor('secondaryText')
8483
}
84+
width={27}
85+
height={27}
8586
/>
8687
</TouchableOpacity>
8788
);
@@ -95,12 +96,16 @@ export default class NFCButton extends React.Component<
9596
: localeString('components.CollapsedQr.startNfc')
9697
}
9798
icon={
98-
icon
99-
? icon
100-
: {
101-
name: 'nfc',
102-
size: 25
103-
}
99+
icon ? (
100+
icon
101+
) : (
102+
<NfcIcon
103+
stroke={themeColor('highlight')}
104+
width={25}
105+
height={25}
106+
style={{ marginRight: 10 }}
107+
/>
108+
)
104109
}
105110
containerStyle={{
106111
marginTop: 10,

‎components/QRCodeScanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ export default function QRCodeScanner({
274274
</View>
275275
)}
276276

277-
{device && cameraStatus === CameraAuthStatus.NOT_AUTHORIZED && (
277+
{true && (
278278
<View style={styles.content}>
279279
<Text
280280
style={{
@@ -298,7 +298,7 @@ export default function QRCodeScanner({
298298
</View>
299299
)}
300300

301-
{!device && (
301+
{false && (
302302
<View style={styles.content}>
303303
<Text
304304
style={{

‎views/Cashu/ReceiveEcash.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import { getAmountFromSats } from '../../utils/AmountUtils';
6363
import LightningSvg from '../../assets/images/SVG/DynamicSVG/LightningSvg';
6464
import AddressSvg from '../../assets/images/SVG/DynamicSVG/AddressSvg';
6565
import ScanSvg from '../../assets/images/SVG/Scan.svg';
66+
import NfcIcon from '../../assets/images/SVG/NFC-alt.svg';
6667

6768
interface ReceiveEcashProps {
6869
exitSetup: any;
@@ -791,10 +792,18 @@ export default class ReceiveEcash extends React.Component<
791792
'general.receiveNfc'
792793
)
793794
}
794-
icon={{
795-
name: 'nfc',
796-
size: 25
797-
}}
795+
icon={
796+
<NfcIcon
797+
stroke={themeColor(
798+
'highlight'
799+
)}
800+
width={25}
801+
height={25}
802+
style={{
803+
marginRight: 10
804+
}}
805+
/>
806+
}
798807
onPress={() =>
799808
this.enableNfc()
800809
}

‎views/OpenChannel.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { AdditionalChannel } from '../models/OpenChannelRequest';
5050
import CaretDown from '../assets/images/SVG/Caret Down.svg';
5151
import CaretRight from '../assets/images/SVG/Caret Right.svg';
5252
import Scan from '../assets/images/SVG/Scan.svg';
53+
import NfcIcon from '../assets/images/SVG/NFC-alt.svg';
5354
import ToggleButton from '../components/ToggleButton';
5455

5556
interface OpenChannelProps {
@@ -1128,10 +1129,14 @@ export default class OpenChannel extends React.Component<
11281129
<View style={styles.button}>
11291130
<Button
11301131
title={localeString('general.enableNfc')}
1131-
icon={{
1132-
name: 'nfc',
1133-
size: 25
1134-
}}
1132+
icon={
1133+
<NfcIcon
1134+
stroke={themeColor('highlight')}
1135+
width={25}
1136+
height={25}
1137+
style={{ marginRight: 10 }}
1138+
/>
1139+
}
11351140
onPress={() => this.enableNfc()}
11361141
secondary
11371142
/>

‎views/Receive.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ import LightningSvg from '../assets/images/SVG/DynamicSVG/LightningSvg';
9999
import OnChainSvg from '../assets/images/SVG/DynamicSVG/OnChainSvg';
100100
import AddressSvg from '../assets/images/SVG/DynamicSVG/AddressSvg';
101101
import Gear from '../assets/images/SVG/Gear.svg';
102+
import NfcIcon from '../assets/images/SVG/NFC-alt.svg';
102103

103104
interface ReceiveProps {
104105
exitSetup: any;
@@ -2341,10 +2342,22 @@ export default class Receive extends React.Component<
23412342
'general.receiveNfc'
23422343
)
23432344
}
2344-
icon={{
2345-
name: 'nfc',
2346-
size: 25
2347-
}}
2345+
icon={
2346+
<NfcIcon
2347+
stroke={themeColor(
2348+
'highlight'
2349+
)}
2350+
width={
2351+
25
2352+
}
2353+
height={
2354+
25
2355+
}
2356+
style={{
2357+
marginRight: 10
2358+
}}
2359+
/>
2360+
}
23482361
onPress={() =>
23492362
this.enableNfc()
23502363
}

‎views/Send.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -789,6 +789,7 @@ export default class Send extends React.Component<SendProps, SendState> {
789789
style={{
790790
flex: 1,
791791
flexDirection: 'row',
792+
alignItems: 'center',
792793
marginTop: 3
793794
}}
794795
>
@@ -838,9 +839,9 @@ export default class Send extends React.Component<SendProps, SendState> {
838839
onPress={() => this.enableNfc()}
839840
>
840841
<NFC
841-
fill={themeColor('text')}
842-
width={30}
843-
height={30}
842+
stroke={themeColor('text')}
843+
width={32}
844+
height={32}
844845
/>
845846
</TouchableOpacity>
846847
</View>

0 commit comments

Comments
 (0)