Skip to content

Commit e126da2

Browse files
codeAbinashcodeAbinash
committed
feat: use gradient icons in settings screen
1 parent bfbb77b commit e126da2

28 files changed

Lines changed: 151 additions & 182 deletions

‎src/screens/DeveloperOptions/DeveloperOptions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
7171
<SettOption
7272
title='Developer Options'
7373
onPress={() => setEnabled(!isEnabled)}
74-
Icon={<RoundIcon Icon={CodeIcon} className='bg-accent' />}
74+
Icon={<RoundIcon Icon={CodeIcon} gradient='accent' />}
7575
Right={<Toggle isActive={isEnabled} />}
7676
/>
7777
</SettGroup>
@@ -87,7 +87,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
8787
<SettGroup title='General'>
8888
<SettOption
8989
title='Toggle fab button'
90-
Icon={<RoundIcon Icon={ComputerIcon} className='bg-green-500' />}
90+
Icon={<RoundIcon Icon={ComputerIcon} gradient='green' />}
9191
Right={<Toggle isActive={isFabEnabled} />}
9292
onPress={() => setFabEnabled(!isFabEnabled)}
9393
/>
@@ -97,7 +97,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
9797
<SettGroup title='Animation Duration'>
9898
<Input
9999
// Icon={<Timer02Icon {...ic} />}
100-
Icon={<RoundIcon Icon={Timer02Icon} className='bg-rose-500' />}
100+
Icon={<RoundIcon Icon={Timer02Icon} gradient='rose' />}
101101
placeholder='Enter animation duration'
102102
onChangeText={setAnim}
103103
defaultValue={animationDuration.toString()}
@@ -127,7 +127,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
127127
</SettText>
128128
<SettGroup title='Auth Token'>
129129
<Input
130-
Icon={<RoundIcon Icon={LockPasswordIcon} className='bg-gray-500' />}
130+
Icon={<RoundIcon Icon={LockPasswordIcon} gradient='slate' />}
131131
placeholder='Enter auth token'
132132
// onChangeText={setToken}
133133
onChangeText={(text) => {
@@ -149,7 +149,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
149149
<SettGroup>
150150
<SettOption
151151
title='Rest Developer Options'
152-
Icon={<RoundIcon Icon={CleanIcon} className='bg-amber-500' />}
152+
Icon={<RoundIcon Icon={CleanIcon} gradient='amber' />}
153153
onPress={resetDevOptions}
154154
arrow
155155
/>

‎src/screens/DeveloperOptions/MMKVDataEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default function MMKVDataEditor({
109109
<SettOption
110110
title='Delete this data'
111111
className='text-red-500'
112-
Icon={<RoundIcon Icon={Delete02Icon} className='bg-red-500' />}
112+
Icon={<RoundIcon Icon={Delete02Icon} gradient='red' />}
113113
onPress={deleteData}
114114
Right={<TxtAcc className='text-red-500'>{toReadableSize(value?.length || 0)}</TxtAcc>}
115115
/>

‎src/screens/DeveloperOptions/MMKVDataList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function MMKVDataList({ navigation }: NavProp) {
7575
arrow
7676
key={item}
7777
numberOfLines={1}
78-
Icon={<RoundIcon Icon={Database02Icon} className='bg-slate-500' />}
78+
Icon={<RoundIcon Icon={Database02Icon} gradient='slate' />}
7979
onPress={() => navigation.navigate('MMKVDataEditor', { key: item as StorageKeys })}
8080
/>
8181
</Animated.View>
@@ -85,7 +85,7 @@ export default function MMKVDataList({ navigation }: NavProp) {
8585
<SettOption
8686
title='Create new data'
8787
onPress={() => navigation.navigate('MMKVDataEditor', { new: true })}
88-
Icon={<RoundIcon Icon={Database02Icon} className='bg-slate-500' />}
88+
Icon={<RoundIcon Icon={Database02Icon} gradient='slate' />}
8989
arrow
9090
/>
9191
</>

‎src/screens/Example/Skia.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,7 @@ export default function Skia({ navigation }: NavProp) {
3232
<Gap12>
3333
<SettText>Beginning Text</SettText>
3434
<SettGroup title='Sample title'>
35-
<SettOption
36-
title='A blank setting'
37-
Icon={<RoundIcon Icon={Setting07Icon} className='bg-slate-500' />}
38-
arrow
39-
/>
35+
<SettOption title='A blank setting' Icon={<RoundIcon Icon={Setting07Icon} gradient='slate' />} arrow />
4036
</SettGroup>
4137
<SettText>Sample text</SettText>
4238
</Gap12>

‎src/screens/LocationNotes/LocationDetails.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,22 @@ export default function LocationDetails({ data }: { data: GeoPosition | undefine
2525
<SettGroup title='Location Details'>
2626
<SettOption
2727
title='Latitude'
28-
Icon={<RoundIcon Icon={LongitudeIcon} className='bg-blue-500' />}
28+
Icon={<RoundIcon Icon={LongitudeIcon} gradient='blue' />}
2929
Right={<Txt skeleton={latitude === undefined}>{getLatitude(latitude || 0)}</Txt>}
3030
/>
3131
<SettOption
3232
title='Longitude'
33-
Icon={<RoundIcon Icon={LatitudeIcon} className='bg-green-500' />}
33+
Icon={<RoundIcon Icon={LatitudeIcon} gradient='green' />}
3434
Right={<Txt skeleton={longitude === undefined}>{getLongitude(longitude || 0)}</Txt>}
3535
/>
3636
<SettOption
3737
title='Accuracy'
38-
Icon={<RoundIcon Icon={DashboardSpeed02Icon} className='bg-rose-500' />}
38+
Icon={<RoundIcon Icon={DashboardSpeed02Icon} gradient='rose' />}
3939
Right={<Txt skeleton={accuracy === undefined}>{accuracy?.toFixed(0)} m</Txt>}
4040
/>
4141
<SettOption
4242
title='Altitude'
43-
Icon={<RoundIcon Icon={EarthIcon} className='bg-blue-500' />}
43+
Icon={<RoundIcon Icon={EarthIcon} gradient='blue' />}
4444
Right={
4545
<Txt skeleton={altitude === undefined}>
4646
{altitude?.toFixed(0)} m ± {altitudeAccuracy?.toFixed(0)} m
@@ -49,12 +49,12 @@ export default function LocationDetails({ data }: { data: GeoPosition | undefine
4949
/>
5050
{/* <SettOption
5151
title='Speed'
52-
Icon={<RoundIcon Icon={Rocket01Icon} className='bg-orange-500' />}
52+
Icon={<RoundIcon Icon={Rocket01Icon} gradient='orange' />}
5353
Right={<Txt skeleton={speed === undefined}>{speed?.toFixed(0)} m/s</Txt>}
5454
/> */}
5555
<SettOption
5656
title='Timestamp'
57-
Icon={<RoundIcon Icon={Timer02Icon} className='bg-accent' />}
57+
Icon={<RoundIcon Icon={Timer02Icon} gradient='accent' />}
5858
Right={<Txt skeleton={timestamp === undefined}>{new Date(timestamp || 0).toLocaleString()}</Txt>}
5959
/>
6060
</SettGroup>
@@ -63,15 +63,15 @@ export default function LocationDetails({ data }: { data: GeoPosition | undefine
6363
<SettGroup title='Actions'>
6464
<SettOption
6565
title='View on Map'
66-
Icon={<RoundIcon Icon={MapsLocation02Icon} className='bg-green-500' />}
66+
Icon={<RoundIcon Icon={MapsLocation02Icon} gradient='green' />}
6767
onPress={() =>
6868
Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`)
6969
}
7070
arrow
7171
/>
7272
<SettOption
7373
title='Share Location'
74-
Icon={<RoundIcon Icon={Sent02Icon} className='bg-blue-500' />}
74+
Icon={<RoundIcon Icon={Sent02Icon} gradient='blue' />}
7575
onPress={() =>
7676
Share.share({
7777
message: shareMessage(latitude || 0, longitude || 0, timestamp),

‎src/screens/LocationNotes/LocationNote.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import SettWrapper from '@components/Settings/SettWrapper'
99
import InformationCircleIcon from '@hugeicons/InformationCircleIcon'
1010
import MapsLocation02Icon from '@hugeicons/MapsLocation02Icon'
1111
import { RouteProp } from '@react-navigation/native'
12-
import { locationNotesStore, type LocationNote } from '@screens/LocationNotes/locationNotesStore'
12+
import { type LocationNote, locationNotesStore } from '@screens/LocationNotes/locationNotesStore'
1313
import type { StackNav } from '@utils/types'
1414
import { useCallback, useEffect, useState } from 'react'
1515
import { BackHandler, View } from 'react-native'
@@ -94,14 +94,14 @@ export default function LocationNote({ navigation, route }: LocationNoteProps) {
9494
numberOfLines={10}
9595
value={description}
9696
onChangeText={setDescription}
97-
Icon={<RoundIcon Icon={InformationCircleIcon} className='bg-slate-500' />}
97+
Icon={<RoundIcon Icon={InformationCircleIcon} gradient='slate' />}
9898
/>
9999
</SettGroup>
100100
{/* <SettGroup title='Tag'>
101101
<SettOption
102102
title=''
103103
placeholder='Add a tag'
104-
Icon={<RoundIcon Icon={Home01Icon} className='bg-rose-500' />}
104+
Icon={<RoundIcon Icon={Home01Icon} gradient='rose' />}
105105
onPress={() => navigation.navigate('LocationTags')}
106106
arrow
107107
/>

‎src/screens/LocationNotes/NewLocationNote.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,11 @@ export default function NewLocationNote({ navigation }: NavProp) {
8383
numberOfLines={10}
8484
value={description}
8585
onChangeText={setDescription}
86-
Icon={<RoundIcon Icon={InformationCircleIcon} className='bg-slate-500' />}
86+
Icon={<RoundIcon Icon={InformationCircleIcon} gradient='slate' />}
8787
/>
8888
</SettGroup>
8989
<SettGroup title='Tag'>
90-
<SettOption
91-
title=''
92-
placeholder='Add a tag'
93-
Icon={<RoundIcon Icon={Home01Icon} className='bg-rose-500' />}
94-
arrow
95-
/>
90+
<SettOption title='' placeholder='Add a tag' Icon={<RoundIcon Icon={Home01Icon} gradient='rose' />} arrow />
9691
</SettGroup>
9792
<LocationDetails data={data} />
9893
<View className='gap-8 px-5'>

‎src/screens/Settings/Admin/EditVersion.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,15 +123,15 @@ export default function EditVersion({ navigation }: NavProp) {
123123
<Input
124124
Icon={
125125
<Press activeScale={0.9} onPress={incrementMajorVersion}>
126-
<RoundIcon Icon={Setting07Icon} className='bg-gray-500' />
126+
<RoundIcon Icon={Setting07Icon} gradient='slate' />
127127
</Press>
128128
}
129129
placeholder='e.g. 2.6.8'
130130
value={version}
131131
onChangeText={setVersion}
132132
Right={
133133
<Press activeScale={0.9} onPress={incrementMinorVersion}>
134-
<RoundIcon Icon={PlusSignIcon} className='bg-gray-500' />
134+
<RoundIcon Icon={PlusSignIcon} gradient='slate' />
135135
</Press>
136136
}
137137
/>
@@ -168,7 +168,7 @@ export default function EditVersion({ navigation }: NavProp) {
168168
activeScale={0.9}
169169
onPress={() => setCriticalVersionCode((parseInt(criticalVersionCode, 10) - 1).toString())}
170170
>
171-
<RoundIcon Icon={StarIcon} className='bg-red-500' />
171+
<RoundIcon Icon={StarIcon} gradient='red' />
172172
</Press>
173173
}
174174
placeholder='e.g. 268'
@@ -179,7 +179,7 @@ export default function EditVersion({ navigation }: NavProp) {
179179
activeScale={0.9}
180180
onPress={() => setCriticalVersionCode((parseInt(criticalVersionCode, 10) + 1).toString())}
181181
>
182-
<RoundIcon Icon={PlusSignIcon} className='bg-red-500' />
182+
<RoundIcon Icon={PlusSignIcon} gradient='red' />
183183
</Press>
184184
}
185185
/>
@@ -192,7 +192,7 @@ export default function EditVersion({ navigation }: NavProp) {
192192
) : (
193193
<Input
194194
placeholder='e.g. 12 MB'
195-
Icon={<RoundIcon Icon={FolderFileStorageIcon} className='bg-yellow-500' />}
195+
Icon={<RoundIcon Icon={FolderFileStorageIcon} gradient='yellow' />}
196196
value={size}
197197
onChangeText={setSize}
198198
/>

‎src/screens/Settings/Admin/Users/User.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,33 +65,30 @@ export default function User({ navigation, route }: { navigation: StackNav; rout
6565
</SettGroup>
6666

6767
<SettGroup title='Username'>
68-
<SettOption title={username} Icon={<RoundIcon Icon={StarIcon} className='bg-yellow-500' />} />
68+
<SettOption title={username} Icon={<RoundIcon Icon={StarIcon} gradient='yellow' />} />
6969
</SettGroup>
7070

7171
<SettGroup title='Email'>
72-
<SettOption title={email} Icon={<RoundIcon Icon={Mail02Icon} className='bg-red-500' />} />
72+
<SettOption title={email} Icon={<RoundIcon Icon={Mail02Icon} gradient='red' />} />
7373
</SettGroup>
7474

7575
<SettGroup title='Admin'>
76-
<SettOption title={isAdmin ? 'Yes' : 'No'} Icon={<RoundIcon Icon={StarsIcon} className='bg-slate-500' />} />
76+
<SettOption title={isAdmin ? 'Yes' : 'No'} Icon={<RoundIcon Icon={StarsIcon} gradient='slate' />} />
7777
</SettGroup>
7878

7979
<SettGroup title='OTP'>
80-
<SettOption title={otp || 'Cleared'} Icon={<RoundIcon Icon={UserIcon} className='bg-green-500' />} />
80+
<SettOption title={otp || 'Cleared'} Icon={<RoundIcon Icon={UserIcon} gradient='green' />} />
8181
</SettGroup>
8282

8383
<SettGroup title='Last OTP Sent'>
8484
<SettOption
8585
title={getDate(new Date(lastOtpSent).getTime())}
86-
Icon={<RoundIcon Icon={Calendar03Icon} className='bg-red-500' />}
86+
Icon={<RoundIcon Icon={Calendar03Icon} gradient='red' />}
8787
/>
8888
</SettGroup>
8989

9090
<SettGroup title='Verified'>
91-
<SettOption
92-
title={isVerified ? 'Yes' : 'No'}
93-
Icon={<RoundIcon Icon={NewReleasesIcon} className='bg-blue-500' />}
94-
/>
91+
<SettOption title={isVerified ? 'Yes' : 'No'} Icon={<RoundIcon Icon={NewReleasesIcon} gradient='blue' />} />
9592
</SettGroup>
9693

9794
<SettGroup title='Banned'>

‎src/screens/Settings/AppLock/AppLock.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { Gap12 } from '@components/Gap'
44
import { Input } from '@components/Input'
55
import RoundIcon from '@components/RoundIcon'
66
import SettGroup from '@components/Settings/SettGroup'
7-
import { ic } from '@components/Settings/Settings'
87
import { SettOption } from '@components/Settings/SettOption'
98
import SettText from '@components/Settings/SettText'
109
import SettWrapper from '@components/Settings/SettWrapper'
10+
import { ic } from '@components/Settings/Settings'
1111
import { Toggle } from '@components/Toggle'
1212
import LockPasswordIcon from '@hugeicons/LockPasswordIcon'
1313
import SquareLock02Icon from '@hugeicons/SquareLock02Icon'
@@ -44,7 +44,7 @@ export default function AppLock({ navigation }: NavProp) {
4444
<SettGroup title='App Lock Settings'>
4545
<SettOption
4646
title='App Lock'
47-
Icon={<RoundIcon Icon={SquareLock02Icon} className='bg-green-500' />}
47+
Icon={<RoundIcon Icon={SquareLock02Icon} gradient='green' />}
4848
Right={<Toggle isActive={isAppLockEnabled} accent={Colors.green['500']} />}
4949
onPress={handleAppLockPress}
5050
/>
@@ -60,7 +60,7 @@ export default function AppLock({ navigation }: NavProp) {
6060
placeholder='Password'
6161
secureTextEntry={!isVisible}
6262
// Icon={<LockPasswordIcon {...ic} />}
63-
Icon={<RoundIcon Icon={LockPasswordIcon} className='bg-rose-500' />}
63+
Icon={<RoundIcon Icon={LockPasswordIcon} gradient='rose' />}
6464
Right={
6565
<TouchableOpacity onPress={() => setIsVisible(!isVisible)}>
6666
{isVisible ? <ViewIcon {...ic} size={24} /> : <ViewOffSlashIcon {...ic} size={24} />}
@@ -71,7 +71,7 @@ export default function AppLock({ navigation }: NavProp) {
7171
<SettGroup title='Confirm Password'>
7272
<Input
7373
placeholder='Confirm Password'
74-
Icon={<RoundIcon Icon={LockPasswordIcon} className='bg-rose-500' />}
74+
Icon={<RoundIcon Icon={LockPasswordIcon} gradient='rose' />}
7575
secureTextEntry={!isVisible}
7676
value={confirmPassword}
7777
onChangeText={setConfirmPassword}

0 commit comments

Comments
 (0)