Browse Source
Co-authored-by: Vlad <vlad960706@gmail.com> Reviewed-on: #2 Co-authored-by: Vlad Narizhnyi <vlad960706@gmail.com> Co-committed-by: Vlad Narizhnyi <vlad960706@gmail.com>pull/3/head
184 changed files with 3473 additions and 2739 deletions
@ -1,7 +1,10 @@
@@ -1,7 +1,10 @@
|
||||
module.exports = { |
||||
bracketSpacing: false, |
||||
jsxBracketSameLine: true, |
||||
bracketSpacing: true, |
||||
bracketSameLine: true, |
||||
singleQuote: true, |
||||
trailingComma: 'all', |
||||
arrowParens: 'avoid', |
||||
tabWidth: 4, |
||||
useTabs: true, |
||||
semi: false, |
||||
}; |
||||
|
||||
@ -1,26 +1,32 @@
@@ -1,26 +1,32 @@
|
||||
import React, {useEffect} from 'react'; |
||||
import SplashScreen from 'react-native-splash-screen'; |
||||
import {Navigation} from './src/module/root'; |
||||
import './src/i18n/index'; |
||||
import {Provider} from 'react-redux'; |
||||
import {store} from './src/store/store'; |
||||
import {GestureHandlerRootView} from 'react-native-gesture-handler'; |
||||
|
||||
if (__DEV__) { |
||||
import('./ReactotronConfig').then(() => console.log('Reactotron Configured')); |
||||
} |
||||
import React, { useEffect } from 'react' |
||||
import SplashScreen from 'react-native-splash-screen' |
||||
import { Root } from './src/module/root' |
||||
import './src/i18n/index' |
||||
import { Provider } from 'react-redux' |
||||
import { store } from './src/store/store' |
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler' |
||||
import { NavigationContainer } from '@react-navigation/native' |
||||
import { |
||||
SafeAreaProvider, |
||||
initialWindowMetrics, |
||||
} from 'react-native-safe-area-context' |
||||
|
||||
const App = () => { |
||||
useEffect(() => { |
||||
SplashScreen.hide(); |
||||
}, []); |
||||
SplashScreen.hide() |
||||
}, []) |
||||
|
||||
return ( |
||||
<GestureHandlerRootView style={{ flex: 1 }}> |
||||
<NavigationContainer> |
||||
<SafeAreaProvider initialMetrics={initialWindowMetrics}> |
||||
<Provider store={store}> |
||||
<Navigation /> |
||||
<Root /> |
||||
</Provider> |
||||
</SafeAreaProvider> |
||||
</NavigationContainer> |
||||
</GestureHandlerRootView> |
||||
); |
||||
}; |
||||
) |
||||
} |
||||
|
||||
export default App; |
||||
export default App |
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
{ |
||||
"migIndex": 1, |
||||
"data": [ |
||||
{ |
||||
"path": "src/assets/resources/fonts/Roboto-Bold.ttf", |
||||
"sha1": "62442a18a9fe9457c1afeabf683d263a691b7798" |
||||
}, |
||||
{ |
||||
"path": "src/assets/resources/fonts/Roboto-Regular.ttf", |
||||
"sha1": "56c5c0d38bde4c1f1549dda43db37b09c608aad3" |
||||
}, |
||||
{ |
||||
"path": "src/assets/resources/fonts/fontello.ttf", |
||||
"sha1": "73fc32c22bdcda8f8bea6b28b74a9a45ba721f7d" |
||||
} |
||||
] |
||||
} |
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
{ |
||||
"migIndex": 1, |
||||
"data": [ |
||||
{ |
||||
"path": "src/assets/resources/fonts/Roboto-Bold.ttf", |
||||
"sha1": "62442a18a9fe9457c1afeabf683d263a691b7798" |
||||
}, |
||||
{ |
||||
"path": "src/assets/resources/fonts/Roboto-Regular.ttf", |
||||
"sha1": "56c5c0d38bde4c1f1549dda43db37b09c608aad3" |
||||
}, |
||||
{ |
||||
"path": "src/assets/resources/fonts/fontello.ttf", |
||||
"sha1": "73fc32c22bdcda8f8bea6b28b74a9a45ba721f7d" |
||||
} |
||||
] |
||||
} |
||||
@ -1,10 +1,3 @@
@@ -1,10 +1,3 @@
|
||||
module.exports = { |
||||
assets: ['./src/assets/resources/fonts'], |
||||
dependencies: { |
||||
'react-native-vector-icons': { |
||||
platforms: { |
||||
ios: null, |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
|
Before Width: | Height: | Size: 436 B |
|
Before Width: | Height: | Size: 476 B |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 449 B |
|
Before Width: | Height: | Size: 363 B |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,286 @@
@@ -0,0 +1,286 @@
|
||||
{ |
||||
"name": "", |
||||
"css_prefix_text": "icon-", |
||||
"css_use_suffix": false, |
||||
"hinting": true, |
||||
"units_per_em": 1000, |
||||
"ascent": 850, |
||||
"glyphs": [ |
||||
{ |
||||
"uid": "700da62fed99c13c5205f6113e8016e1", |
||||
"css": "magic-star", |
||||
"code": 59392, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M237.5 766.7C225 754.2 204.2 754.2 191.7 766.7L66.7 891.7C54.2 904.2 54.2 925 66.7 937.5 79.2 950 100 950 112.5 937.5L237.5 812.5C245.8 800 245.8 779.2 237.5 766.7ZM900 550L816.7 454.2C812.5 450 808.3 441.7 808.3 433.3S808.3 416.7 808.3 412.5V412.5L850 279.2C854.2 262.5 858.3 245.8 858.3 229.2 858.3 204.2 850 179.2 833.3 158.3 804.2 129.2 758.3 125 712.5 141.7L587.5 183.3C583.3 183.3 575 183.3 566.7 183.3 558.3 183.3 550 179.2 545.8 175L545.8 175 420.8 83.3C395.8 62.5 366.7 50 341.7 50 329.2 50 312.5 54.2 300 58.3 262.5 83.3 245.8 125 250 175L250 329.2C250 333.3 250 341.7 245.8 350 241.7 358.3 237.5 366.7 233.3 366.7L129.2 445.8C95.8 470.8 75 504.2 75 537.5 75 541.7 75 545.8 75 554.2 83.3 595.8 116.7 625 162.5 637.5H162.5L295.8 679.2H295.8C300 679.2 308.3 683.3 316.7 691.7 325 700 329.2 704.2 329.2 712.5V712.5L362.5 833.3C370.8 858.3 379.2 883.3 395.8 900 408.3 916.7 429.2 929.2 450 933.3 495.8 941.7 533.3 908.3 562.5 862.5L637.5 741.7C641.7 737.5 645.8 729.2 654.2 725 662.5 720.8 670.8 716.7 679.2 720.8L816.7 729.2C820.8 729.2 825 729.2 829.2 729.2 879.2 729.2 920.8 716.7 941.7 679.2 954.2 637.5 937.5 591.7 900 550ZM879.2 654.2C875 658.3 862.5 675 816.7 670.8L679.2 662.5C658.3 662.5 641.7 666.7 625 675 608.3 683.3 591.7 695.8 583.3 712.5L504.2 833.3C479.2 875 462.5 879.2 454.2 875 450 875 445.8 870.8 437.5 862.5 429.2 854.2 425 841.7 416.7 816.7L383.3 695.8V695.8C379.2 679.2 366.7 662.5 354.2 650 350 637.5 333.3 625 316.7 620.8H316.7L183.3 579.2C150 566.7 141.7 554.2 137.5 545.8 137.5 545.8 137.5 545.8 137.5 541.7 137.5 533.3 141.7 516.7 170.8 495.8L270.8 416.7C283.3 408.3 295.8 391.7 304.2 375 312.5 358.3 316.7 341.7 316.7 325L312.5 170.8C312.5 133.3 325 120.8 329.2 116.7 337.5 112.5 354.2 112.5 383.3 133.3L512.5 225C525 233.3 545.8 241.7 558.3 241.7 566.7 241.7 570.8 241.7 579.2 241.7 591.7 241.7 600 241.7 612.5 237.5L737.5 195.8C770.8 183.3 787.5 191.7 791.7 195.8 795.8 200 800 208.3 800 220.8 800 229.2 800 237.5 795.8 254.2L754.2 387.5V387.5C750 404.2 750 425 754.2 441.7 758.3 458.3 766.7 475 775 491.7L858.3 587.5C883.3 629.2 883.3 645.8 879.2 654.2Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["magic-star"] |
||||
}, |
||||
{ |
||||
"uid": "1811d7a152d8dc9fd1b63ba5b6aae0fb", |
||||
"css": "play", |
||||
"code": 59393, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M766.7 325L408.3 150C350 116.7 291.7 100 245.8 95.8 200 91.7 158.3 100 129.2 129.2S91.7 200 95.8 245.8C100 291.7 120.8 345.8 150 408.3L187.5 479.2C187.5 483.3 191.7 487.5 191.7 500 191.7 508.3 191.7 516.7 187.5 520.8L150 591.7C120.8 654.2 100 708.3 95.8 754.2 91.7 800 100 841.7 129.2 870.8 158.3 900 200 908.3 245.8 904.2 291.7 900 345.8 883.3 408.3 850L766.7 670.8C850 629.2 904.2 566.7 904.2 495.8S850 366.7 766.7 325ZM737.5 616.7L379.2 795.8C320.8 825 275 841.7 237.5 841.7 200 845.8 183.3 837.5 170.8 825 158.3 812.5 150 795.8 154.2 758.3S170.8 675 200 616.7L237.5 545.8C250 533.3 254.2 516.7 254.2 500 254.2 483.3 250 466.7 245.8 450L208.3 379.2C179.2 320.8 166.7 275 162.5 237.5S166.7 183.3 179.2 170.8 208.3 150 245.8 154.2C283.3 158.3 329.2 170.8 387.5 200L745.8 379.2C820.8 416.7 850 462.5 850 495.8S812.5 579.2 737.5 616.7Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["play"] |
||||
}, |
||||
{ |
||||
"uid": "39dbcaf5114baeee024ed94e740839e3", |
||||
"css": "privacy-policy", |
||||
"code": 59394, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M516.7 645.8H333.3C316.7 645.8 300 658.3 300 679.2 300 691.7 316.7 708.3 333.3 708.3H516.7C533.3 708.3 550 695.8 550 675 545.8 658.3 533.3 645.8 516.7 645.8ZM625 479.2H333.3C316.7 479.2 300 491.7 300 512.5 300 525 316.7 541.7 333.3 541.7H625C641.7 541.7 658.3 529.2 658.3 508.3 658.3 491.7 641.7 479.2 625 479.2ZM845.8 200C808.3 158.3 758.3 141.7 695.8 137.5 691.7 104.2 679.2 83.3 658.3 66.7 633.3 50 604.2 50 587.5 50H412.5C395.8 50 366.7 50 341.7 66.7 320.8 83.3 308.3 108.3 304.2 137.5 241.7 145.8 191.7 162.5 154.2 204.2 112.5 250 91.7 320.8 91.7 416.7V666.7C91.7 750 100 825 145.8 875 191.7 925 266.7 950 370.8 950H620.8C729.2 950 800 929.2 845.8 875 891.7 825 900 750 900 666.7V416.7C908.3 320.8 887.5 250 845.8 200ZM375 120.8C383.3 116.7 391.7 116.7 416.7 116.7H583.3C608.3 116.7 616.7 116.7 625 120.8 629.2 120.8 637.5 129.2 637.5 166.7 637.5 166.7 637.5 166.7 637.5 166.7 637.5 187.5 637.5 200 633.3 204.2 633.3 208.3 625 216.7 587.5 216.7H420.8C395.8 216.7 387.5 216.7 379.2 212.5 375 212.5 366.7 204.2 366.7 166.7S375 120.8 375 120.8ZM841.7 666.7C841.7 750 829.2 800 804.2 833.3 775 866.7 725 883.3 625 883.3H375C275 883.3 220.8 862.5 195.8 833.3 166.7 800 158.3 750 158.3 666.7V416.7C158.3 325 175 275 200 245.8 220.8 220.8 254.2 208.3 304.2 204.2 308.3 229.2 320.8 250 341.7 266.7 366.7 283.3 395.8 283.3 412.5 283.3H583.3C629.2 283.3 662.5 270.8 683.3 241.7 691.7 229.2 695.8 216.7 695.8 200 745.8 204.2 779.2 220.8 800 241.7 825 270.8 841.7 320.8 841.7 412.5V666.7Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["privacy-policy"] |
||||
}, |
||||
{ |
||||
"uid": "8d69358dbc3e596b030f178d8f2a538e", |
||||
"css": "crazy", |
||||
"code": 59395, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M979.2 125C975 108.3 962.5 95.8 954.2 87.5 941.7 75 929.2 66.7 916.7 62.5 904.2 58.3 887.5 54.2 870.8 54.2 854.2 54.2 837.5 58.3 825 62.5 812.5 70.8 795.8 79.2 787.5 87.5H787.5L562.5 320.8 562.5 320.8 20.8 879.2C12.5 887.5 8.3 900 12.5 908.3 16.7 920.8 25 929.2 33.3 929.2 275 983.3 475 900 616.7 804.2 687.5 754.2 741.7 704.2 779.2 666.7 800 645.8 812.5 629.2 825 616.7 829.2 612.5 833.3 604.2 837.5 604.2 837.5 604.2 837.5 600 841.7 600L841.7 600 841.7 600C850 587.5 850 570.8 837.5 558.3L750 470.8 950 254.2C962.5 241.7 970.8 229.2 975 216.7 979.2 204.2 983.3 187.5 983.3 170.8S987.5 141.7 979.2 125ZM775 583.3C766.7 591.7 754.2 608.3 737.5 625 700 662.5 650 708.3 583.3 754.2 462.5 837.5 295.8 908.3 104.2 879.2L583.3 387.5 687.5 491.7C687.5 491.7 687.5 491.7 687.5 495.8H687.5L775 583.3ZM925 195.8C920.8 200 916.7 208.3 908.3 212.5 908.3 212.5 908.3 212.5 908.3 212.5L708.3 429.2 625 345.8 829.2 133.3C833.3 125 841.7 120.8 850 116.7 858.3 112.5 866.7 112.5 870.8 112.5 879.2 112.5 887.5 112.5 891.7 116.7 900 120.8 904.2 125 908.3 129.2S916.7 141.7 920.8 145.8C925 154.2 925 162.5 925 166.7S925 187.5 925 195.8Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["crazy"] |
||||
}, |
||||
{ |
||||
"uid": "83f34d05e31a12e6bd64706dfbe65766", |
||||
"css": "all_packages", |
||||
"code": 59396, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M904.2 595.8C900 575 895.8 550 879.2 529.2 866.7 508.3 845.8 495.8 820.8 483.3V250C820.8 229.2 820.8 204.2 816.7 183.3 812.5 162.5 808.3 137.5 791.7 116.7 762.5 75 708.3 54.2 620.8 54.2H375C287.5 54.2 233.3 75 204.2 116.7 187.5 133.3 183.3 158.3 179.2 179.2 175 204.2 175 225 175 250V487.5C150 495.8 133.3 512.5 116.7 533.3 104.2 554.2 95.8 579.2 91.7 600 87.5 620.8 87.5 645.8 87.5 666.7V708.3C87.5 737.5 87.5 766.7 91.7 791.7 100 820.8 108.3 850 125 875 158.3 925 225 950 333.3 950H666.7C754.2 950 816.7 925 858.3 879.2 895.8 833.3 908.3 770.8 908.3 712.5V670.8C908.3 641.7 908.3 620.8 904.2 595.8ZM241.7 250C241.7 225 241.7 208.3 245.8 187.5 245.8 170.8 254.2 158.3 258.3 150 270.8 133.3 300 116.7 379.2 116.7H629.2C708.3 116.7 737.5 133.3 750 150 758.3 158.3 762.5 170.8 762.5 187.5 758.3 208.3 758.3 225 758.3 250V470.8C741.7 470.8 725 466.7 708.3 466.7 687.5 466.7 666.7 470.8 654.2 475 637.5 479.2 629.2 487.5 616.7 495.8L616.7 495.8C616.7 495.8 612.5 495.8 612.5 500L570.8 545.8V545.8C533.3 583.3 470.8 583.3 433.3 545.8L391.7 500C391.7 500 387.5 495.8 387.5 495.8L387.5 495.8C379.2 487.5 366.7 479.2 350 475 333.3 470.8 312.5 466.7 291.7 466.7 270.8 466.7 254.2 466.7 241.7 470.8V250ZM841.7 708.3C841.7 762.5 833.3 804.2 808.3 837.5 783.3 866.7 741.7 887.5 666.7 887.5H333.3C233.3 887.5 195.8 866.7 175 841.7 166.7 829.2 162.5 812.5 158.3 787.5 154.2 766.7 154.2 741.7 154.2 712.5V670.8C154.2 645.8 154.2 629.2 158.3 608.3 158.3 591.7 166.7 579.2 170.8 570.8 183.3 554.2 212.5 537.5 291.7 537.5 312.5 537.5 320.8 537.5 325 541.7 333.3 537.5 337.5 541.7 345.8 550L387.5 591.7C416.7 625 458.3 641.7 500 641.7S583.3 625 612.5 591.7L654.2 550C662.5 541.7 666.7 541.7 675 537.5 679.2 537.5 691.7 533.3 708.3 533.3 787.5 533.3 816.7 550 829.2 566.7 837.5 575 841.7 587.5 841.7 604.2 845.8 620.8 845.8 641.7 845.8 666.7V708.3ZM570.8 345.8H433.3C416.7 345.8 400 358.3 400 379.2 400 395.8 412.5 412.5 433.3 412.5H570.8C587.5 412.5 604.2 400 604.2 379.2 600 362.5 587.5 345.8 570.8 345.8ZM604.2 225H395.8C379.2 225 362.5 237.5 362.5 258.3 362.5 275 375 291.7 395.8 291.7H604.2C620.8 291.7 637.5 279.2 637.5 258.3 633.3 237.5 620.8 225 604.2 225Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["all_packages"] |
||||
}, |
||||
{ |
||||
"uid": "2c9a97699ce25914630cbc62849761d5", |
||||
"css": "terms-&-cond", |
||||
"code": 59397, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M666.7 508.3H333.3C316.7 508.3 300 520.8 300 541.7S312.5 575 333.3 575H666.7C683.3 575 700 562.5 700 541.7S683.3 508.3 666.7 508.3ZM666.7 300H333.3C316.7 300 300 316.7 300 333.3S316.7 366.7 333.3 366.7H666.7C683.3 366.7 700 354.2 700 333.3S683.3 300 666.7 300ZM333.3 366.7H666.7C683.3 366.7 700 354.2 700 333.3S683.3 300 666.7 300H333.3C316.7 300 300 316.7 300 333.3S316.7 366.7 333.3 366.7ZM666.7 508.3H333.3C316.7 508.3 300 520.8 300 541.7S312.5 575 333.3 575H666.7C683.3 575 700 562.5 700 541.7S683.3 508.3 666.7 508.3ZM916.7 75H83.3C66.7 75 50 87.5 50 108.3S66.7 133.3 83.3 133.3H120.8V600C120.8 650 145.8 700 183.3 729.2L400 891.7C458.3 933.3 537.5 933.3 595.8 891.7L812.5 729.2C854.2 700 879.2 650 879.2 600V133.3H916.7C933.3 133.3 950 120.8 950 100S933.3 75 916.7 75ZM816.7 604.2C816.7 637.5 800 666.7 775 683.3L558.3 845.8C525 870.8 475 870.8 441.7 845.8L225 683.3C200 662.5 183.3 633.3 183.3 604.2V133.3H816.7V604.2ZM333.3 366.7H666.7C683.3 366.7 700 354.2 700 333.3S683.3 300 666.7 300H333.3C316.7 300 300 316.7 300 333.3S316.7 366.7 333.3 366.7ZM333.3 575H666.7C683.3 575 700 562.5 700 541.7S687.5 508.3 666.7 508.3H333.3C316.7 508.3 300 520.8 300 541.7S316.7 575 333.3 575Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["terms-&-cond"] |
||||
}, |
||||
{ |
||||
"uid": "8c13722b5cc45ade10652caf542ec26e", |
||||
"css": "diamond", |
||||
"code": 59398, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M929.2 370.8L779.2 204.2C758.3 179.2 725 166.7 695.8 166.7H308.3C275 166.7 245.8 179.2 225 204.2L75 370.8C33.3 416.7 37.5 483.3 79.2 529.2L420.8 883.3C466.7 929.2 541.7 929.2 583.3 883.3L925 529.2C966.7 483.3 970.8 416.7 929.2 370.8ZM116.7 412.5L266.7 245.8C279.2 237.5 291.7 229.2 308.3 229.2H433.3L275 429.2H108.3C108.3 425 112.5 416.7 116.7 412.5ZM500 250L645.8 429.2H354.2L500 250ZM125 491.7H283.3L429.2 804.2 125 491.7ZM354.2 491.7H645.8L500 804.2 354.2 491.7ZM570.8 804.2L716.7 491.7H875L570.8 804.2ZM725 429.2L566.7 229.2H691.7C708.3 229.2 720.8 237.5 729.2 245.8L879.2 412.5C883.3 416.7 887.5 420.8 887.5 429.2H725Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["diamond"] |
||||
}, |
||||
{ |
||||
"uid": "97ea590a6f485a6af416d3bd37536c95", |
||||
"css": "lock", |
||||
"code": 59399, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M895.8 437.5C866.7 408.3 829.2 395.8 779.2 391.7V333.3C779.2 262.5 770.8 191.7 725 137.5 679.2 83.3 608.3 54.2 495.8 54.2S316.7 83.3 270.8 137.5C229.2 191.7 216.7 262.5 216.7 333.3V387.5C166.7 391.7 129.2 404.2 100 433.3 58.3 475 50 537.5 50 620.8V704.2C50 787.5 58.3 850 100 891.7 141.7 933.3 204.2 941.7 287.5 941.7H704.2C787.5 941.7 850 933.3 891.7 891.7 933.3 850 941.7 787.5 941.7 704.2V620.8C950 541.7 937.5 479.2 895.8 437.5ZM283.3 333.3C283.3 266.7 291.7 212.5 325 175 350 141.7 400 116.7 500 116.7S650 141.7 679.2 179.2C708.3 216.7 720.8 270.8 720.8 337.5V387.5H283.3V333.3ZM883.3 708.3C883.3 791.7 870.8 833.3 850 854.2 833.3 875 791.7 883.3 708.3 883.3H291.7C208.3 883.3 166.7 870.8 145.8 850 125 833.3 116.7 791.7 116.7 708.3V625C116.7 541.7 129.2 500 150 479.2 166.7 458.3 208.3 450 291.7 450H708.3C791.7 450 833.3 462.5 854.2 483.3 875 500 883.3 541.7 883.3 625V708.3ZM500 533.3C425 533.3 366.7 595.8 366.7 666.7S429.2 800 500 800 633.3 737.5 633.3 666.7 575 533.3 500 533.3ZM500 741.7C458.3 741.7 425 708.3 425 666.7S458.3 591.7 500 591.7 575 625 575 666.7 541.7 741.7 500 741.7Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["lock"] |
||||
}, |
||||
{ |
||||
"uid": "19c39957a85bdd5ec25b680904186893", |
||||
"css": "notification", |
||||
"code": 59400, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M118.7 545.2L90.8 528.4 90.7 528.5 118.7 545.2ZM63.5 637.4L35.5 620.6 35.5 620.7 63.5 637.4ZM115.7 778.7L105.3 809.6 105.4 809.6 115.7 778.7ZM756.1 778.7L766.4 809.6 766.4 809.6 756.1 778.7ZM808.3 637.4L836.2 620.6 836.2 620.6 808.3 637.4ZM753 545.2L781 528.5 781 528.4 753 545.2ZM725.7 354.8H758.3L758.3 354.7 725.7 354.8ZM435.7 32.6C257.6 32.6 113.5 176.8 113.5 354.8H178.7C178.7 212.8 293.7 97.8 435.7 97.8V32.6ZM113.5 354.8V446.1H178.7V354.8H113.5ZM113.5 446.1C113.5 457 111.1 472.5 106.7 488.6 102.2 504.8 96.3 519.1 90.8 528.4L146.6 562.1C156.3 546.1 164.1 525.7 169.5 506 175 486.2 178.7 464.7 178.7 446.1H113.5ZM90.7 528.5L35.5 620.6 91.4 654.1 146.7 562 90.7 528.5ZM35.5 620.7C13.9 656.8 9.6 697.2 22.8 732.9 36 768.6 65.5 796.4 105.3 809.6L126 747.8C103.2 740.2 89.7 725.8 84 710.3 78.2 694.8 79.1 674.9 91.5 654.1L35.5 620.7ZM105.4 809.6C319.9 881 551.9 881 766.4 809.6L745.8 747.8C544.6 814.7 327.1 814.7 125.9 747.8L105.4 809.6ZM766.4 809.6C845 783.4 878.6 691.5 836.2 620.6L780.3 654.1C801.4 689.4 784.6 734.8 745.8 747.8L766.4 809.6ZM836.2 620.6L781 528.5 725.1 562 780.3 654.1 836.2 620.6ZM781 528.4C775.4 519.2 769.6 504.7 765.1 488.5 760.6 472.2 758.3 456.8 758.3 446.1H693C693 464.5 696.8 486 702.2 505.8 707.6 525.5 715.5 546 725.1 562.1L781 528.4ZM758.3 446.1V354.8H693V446.1H758.3ZM758.3 354.7C757.8 177.6 612.8 32.6 435.7 32.6V97.8C576.8 97.8 692.7 213.7 693 354.9L758.3 354.7ZM547 796.5C547 858.1 496.3 908.7 434.8 908.7V973.9C532.4 973.9 612.2 894.1 612.2 796.5H547ZM434.8 908.7C404.3 908.7 376 896 355.7 875.6L309.6 921.8C341.4 953.6 386.1 973.9 434.8 973.9V908.7ZM355.7 875.6C335.3 855.3 322.6 827 322.6 796.5H257.4C257.4 845.2 277.7 889.9 309.6 921.8L355.7 875.6Z", |
||||
"width": 870 |
||||
}, |
||||
"search": ["notification"] |
||||
}, |
||||
{ |
||||
"uid": "a0dff324e51217d37350ab34f592c5d7", |
||||
"css": "message", |
||||
"code": 59401, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M144.3 161.9C110.3 193.4 87.5 244.6 87.5 325V675C87.5 755.3 110.3 806.6 144.3 838.1 178.8 870.2 230.7 887.5 300 887.5H550C570.7 887.5 587.5 904.3 587.5 925 587.5 945.7 570.7 962.5 550 962.5H300C219.3 962.5 146.2 942.3 93.2 893.1 39.7 843.4 12.5 769.7 12.5 675V325C12.5 230.4 39.7 156.6 93.2 106.9 146.2 57.7 219.3 37.5 300 37.5H800C880.7 37.5 953.8 57.7 1006.8 106.9 1060.3 156.6 1087.5 230.4 1087.5 325V475C1087.5 495.7 1070.7 512.5 1050 512.5 1029.3 512.5 1012.5 495.7 1012.5 475V325C1012.5 244.6 989.7 193.4 955.7 161.9 921.2 129.8 869.3 112.5 800 112.5H300C230.7 112.5 178.8 129.8 144.3 161.9ZM829.3 326.6C842.2 342.8 839.6 366.4 823.4 379.3L666.9 504.3 666.9 504.3C601.7 556.2 497.8 556.2 432.6 504.3L432.6 504.3 276.6 379.3C260.4 366.3 257.8 342.7 270.7 326.6 283.7 310.4 307.3 307.8 323.4 320.7L479.4 445.7C479.4 445.7 479.4 445.7 479.4 445.7 517.2 475.8 582.3 475.8 620.1 445.7 620.1 445.7 620.1 445.7 620.1 445.7L776.6 320.7C792.8 307.8 816.4 310.4 829.3 326.6ZM956.7 572.8C989.8 569.4 1020.3 584.3 1047.5 611.5 1074.8 638.8 1089.9 669.4 1086.6 702.6 1083.5 733.9 1064.9 758.1 1047.5 775.5L1027.2 795.9C1024.4 800 1020.9 803.4 1016.9 806.1L870.9 952.1C863.6 959.8 854.6 965.4 847.1 969.1 839.4 973 829.9 976.5 820.4 978L819.7 978.1 819.7 978.1 752.3 987.6C752.3 987.6 752.3 987.6 752.3 987.6 730.2 990.8 707.4 985 691 968.5 674.5 952.1 668.7 929.3 671.9 907.2 671.9 907.2 671.9 907.2 671.9 907.2L681.4 839.8 681.5 839.2 681.5 839.2C683 829.5 686.6 820 690.5 812.4 694.4 804.7 699.9 796.1 707 789L858 637.9C858.3 637.6 858.7 637.3 859 637L884 612 903.2 631.2 884 612C901.4 594.6 925.6 576 956.7 572.8ZM873.4 728.6L760.1 841.9C760.1 841.9 760.1 841.9 760.1 841.9 760.1 842 759.8 842.3 759.3 843 758.7 843.8 758 845 757.4 846.2 756.8 847.5 756.2 848.7 755.9 849.7 755.7 850.3 755.6 850.7 755.5 850.9L746.9 912.7 808.6 904C808.8 903.9 809.3 903.8 810 903.6 811.1 903.2 812.3 902.7 813.6 902 814.9 901.4 815.9 900.8 816.6 900.3 816.8 900.2 816.9 900.1 816.9 900 817.1 899.8 817.3 899.7 817.5 899.5L930.8 786.2C907.9 771.2 888.3 751.6 873.4 728.6ZM985.7 731.2C960.6 719.2 940.4 698.8 928.4 673.6L937 665C950.1 651.9 958.9 648 964.3 647.4 967.7 647.1 977.2 647.2 994.5 664.5 1012.2 682.2 1012.3 691.9 1012 695.2 1011.5 700.6 1007.6 709.4 994.5 722.5L985.7 731.2Z", |
||||
"width": 1100 |
||||
}, |
||||
"search": ["message"] |
||||
}, |
||||
{ |
||||
"uid": "c6a00e21a96841dd37e5f413d44583ad", |
||||
"css": "rate", |
||||
"code": 59402, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M722.4 100.7C718 100.7 701.4 104.6 683.5 141.1L683.4 141.4 683.4 141.4 605.1 297.9C596.1 316.2 581.3 331.7 566.3 342.9 551.2 354.1 532 363.9 511.7 367.2 511.7 367.2 511.7 367.2 511.7 367.2L370.3 390.5C332.2 397.1 323 411.5 321.4 416.7 319.7 421.7 318.8 438.8 346.1 466.1L316.7 495.6 346.1 466.1 456.7 576.6 457.1 577.1 457.1 577.1C472.2 592.6 482.3 613 487.8 632.4 493.4 651.8 495.7 674.7 490.6 696.2L458.9 832.7 458.9 832.8C447.3 883 460.1 896.6 461.7 897.8 463.5 899 480.6 906.9 524.9 880.8 524.9 880.8 524.9 880.8 524.9 880.8L657.5 802C677.5 790 701.4 785.3 722.8 785.3 744.1 785.3 768 790 788.1 802L920.7 880.8 920.8 880.9C965 907.3 982.1 899.3 983.8 898 985.5 896.8 998.3 883 986.6 832.8L986.6 832.7 955 696.2C955 696.1 955 696.1 955 696.1 949.9 674.5 952.1 651.5 957.7 632 963.3 612.6 973.4 592.1 988.9 576.6L1099.3 466.2C1099.3 466.2 1099.3 466.2 1099.4 466.2 1126.7 438.5 1125.8 421.4 1124.2 416.2 1122.6 411.2 1113.5 396.9 1075.5 390.6 1075.5 390.6 1075.4 390.6 1075.4 390.6 1075.4 390.6 1075.4 390.6 1075.4 390.6L933.8 367.2 932.9 367.1C913.3 363.4 894.5 353.9 879.4 342.8 864.5 331.7 849.5 316.4 840.4 297.9L762.2 141.5C762.2 141.5 762.2 141.5 762.2 141.5 743.8 104.8 726.9 100.7 722.4 100.7ZM722.4 17.4C773.4 17.4 812.3 55.7 836.7 104L836.7 104.1 915 260.8 915.2 261.2 915.2 261.2C916.7 264.3 921.2 270 928.9 275.7 936.4 281.2 943.5 284.2 947.9 285.1L1089 308.3 1089 308.3C1141.5 317 1188.2 342.9 1203.6 390.8 1218.9 438.6 1196 487 1158.5 524.9L1158.4 525 1047.8 635.6C1044.9 638.5 1040.6 645.2 1037.8 654.9 1035.1 664.6 1035.1 672.7 1036.1 677.2L1036.2 677.3 1067.8 813.9C1067.8 813.9 1067.8 813.9 1067.8 813.9 1081.2 871.5 1077.6 932.7 1032.9 965.3 988.2 998 928.9 982.7 878.2 952.5 878.2 952.5 878.2 952.5 878.2 952.5 878.1 952.5 878.1 952.5 878.1 952.5L745.4 873.6 745.1 873.4 745.1 873.4C741.3 871.1 733.3 868.6 722.8 868.6 712.3 868.6 704.3 871.1 700.5 873.4L700.2 873.6 700.2 873.6 567.4 952.5 567.3 952.5C516.6 982.5 457.3 997.6 412.7 965.1 367.9 932.6 364.4 871.5 377.7 813.9L409.4 677.3 409.5 677C410.4 673 410.5 665.1 407.7 655.3 405 645.8 400.7 638.7 397.5 635.3L287.2 525C249.5 487.4 226.7 439.1 242 391.3 257.3 343.5 303.9 317.4 356.3 308.4L356.6 308.3 356.6 308.3 498.2 285 498.3 285C501.9 284.4 508.8 281.7 516.5 276 524.2 270.3 528.7 264.4 530.3 261.2L530.5 260.8 530.5 260.8 608.8 104.3C632.5 55.9 671.2 17.4 722.4 17.4ZM13.9 111.1C13.9 88.1 32.5 69.4 55.6 69.4H388.9C411.9 69.4 430.6 88.1 430.6 111.1 430.6 134.1 411.9 152.8 388.9 152.8H55.6C32.5 152.8 13.9 134.1 13.9 111.1ZM13.9 500C13.9 477 32.5 458.3 55.6 458.3H111.1C134.1 458.3 152.8 477 152.8 500 152.8 523 134.1 541.7 111.1 541.7H55.6C32.5 541.7 13.9 523 13.9 500ZM13.9 888.9C13.9 865.9 32.5 847.2 55.6 847.2H222.2C245.2 847.2 263.9 865.9 263.9 888.9 263.9 911.9 245.2 930.6 222.2 930.6H55.6C32.5 930.6 13.9 911.9 13.9 888.9Z", |
||||
"width": 1222 |
||||
}, |
||||
"search": ["rate"] |
||||
}, |
||||
{ |
||||
"uid": "977b12dbd799da8e3896b6837260958d", |
||||
"css": "share", |
||||
"code": 59403, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M705.1 118.9C731 73.3 787.8 58.1 832 84.1 876.6 110.2 892.3 168.7 866.2 214.7 840.3 260.3 783.5 275.4 739.3 249.5 694.7 223.3 679 164.8 705.1 118.9ZM868.2 22.5C789.1-23.9 688.3 3.9 643 83.6 597.9 163 624.4 264.9 703.1 311.1 782.2 357.5 883 329.7 928.3 249.9 973.4 170.5 946.9 68.7 868.2 22.5ZM591.6 99.4C593.4 119 579 136.4 559.3 138.3 457.5 147.8 361.2 200.7 298 289.6 286.6 305.7 264.3 309.5 248.2 298 232.2 286.6 228.4 264.3 239.8 248.2 315.3 142 430.6 78.6 552.7 67.1 572.3 65.3 589.7 79.7 591.6 99.4ZM239.7 699.5C256.3 688.8 278.4 693.7 289.1 710.3 319 757.1 360.2 797.7 411.1 827.5 460.2 856.3 512.4 872.1 565 875.9 584.7 877.3 599.5 894.4 598.1 914.1 596.7 933.8 579.6 948.6 559.9 947.2 496.3 942.6 433.4 923.5 374.9 889.1 314.2 853.5 264.8 804.9 228.9 748.8 218.3 732.2 223.1 710.1 239.7 699.5ZM258.5 412.5C214.3 386.6 157.5 401.7 131.6 447.3 105.5 493.3 121.2 551.8 165.8 577.9 210 603.9 266.8 588.7 292.7 543.1 318.8 497.2 303.1 438.7 258.5 412.5ZM69.5 412.1C114.8 332.3 215.6 304.5 294.7 350.9 373.4 397.2 399.9 499 354.8 578.4 309.5 658.1 208.7 685.9 129.6 639.5 50.9 593.3 24.4 491.5 69.5 412.1ZM707.3 785.3C733.2 739.7 790 724.6 834.2 750.5 878.8 776.7 894.5 835.2 868.4 881.1 842.5 926.7 785.7 941.9 741.5 915.9 696.9 889.8 681.2 831.3 707.3 785.3ZM870.4 688.9C791.3 642.5 690.5 670.3 645.2 750.1 600.1 829.5 626.6 931.3 705.3 977.5 784.4 1023.9 885.2 996.1 930.5 916.4 975.6 837 949.1 735.1 870.4 688.9Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["share"] |
||||
}, |
||||
{ |
||||
"uid": "abdce6349b22376773c9307931df7e2a", |
||||
"css": "information", |
||||
"code": 59404, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M95.2 95.2C155.9 34.6 246.6 11.4 363.6 11.4H636.4C753.4 11.4 844.1 34.6 904.8 95.2 965.4 155.9 988.6 246.6 988.6 363.6V636.4C988.6 753.4 965.4 844.1 904.8 904.8 844.1 965.4 753.4 988.6 636.4 988.6H363.6C246.6 988.6 155.9 965.4 95.2 904.8 34.6 844.1 11.4 753.4 11.4 636.4V363.6C11.4 246.6 34.6 155.9 95.2 95.2ZM143.4 143.4C101.8 185 79.5 253.4 79.5 363.6V636.4C79.5 746.6 101.8 815 143.4 856.6 185 898.2 253.4 920.5 363.6 920.5H636.4C746.6 920.5 815 898.2 856.6 856.6 898.2 815 920.5 746.6 920.5 636.4V363.6C920.5 253.4 898.2 185 856.6 143.4 815 101.8 746.6 79.5 636.4 79.5H363.6C253.4 79.5 185 101.8 143.4 143.4ZM295.5 363.6C295.5 344.8 310.7 329.5 329.5 329.5H670.5C689.3 329.5 704.5 344.8 704.5 363.6 704.5 382.5 689.3 397.7 670.5 397.7H329.5C310.7 397.7 295.5 382.5 295.5 363.6ZM329.5 602.3C310.7 602.3 295.5 617.5 295.5 636.4 295.5 655.2 310.7 670.5 329.5 670.5H670.5C689.3 670.5 704.5 655.2 704.5 636.4 704.5 617.5 689.3 602.3 670.5 602.3H329.5Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["information"] |
||||
}, |
||||
{ |
||||
"uid": "e9afa1d3024e0b521bc10b35c1a7f542", |
||||
"css": "lang", |
||||
"code": 59405, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M363.6 11.4C246.6 11.4 155.9 34.6 95.2 95.2 34.6 155.9 11.4 246.6 11.4 363.6V636.4C11.4 753.4 34.6 844.1 95.2 904.8 155.9 965.4 246.6 988.6 363.6 988.6H636.4C753.4 988.6 844.1 965.4 904.8 904.8 965.4 844.1 988.6 753.4 988.6 636.4V363.6C988.6 246.6 965.4 155.9 904.8 95.2 844.1 34.6 753.4 11.4 636.4 11.4H363.6ZM79.5 363.6C79.5 253.4 101.8 185 143.4 143.4 185 101.8 253.4 79.5 363.6 79.5H636.4C746.6 79.5 815 101.8 856.6 143.4 898.2 185 920.5 253.4 920.5 363.6V636.4C920.5 746.6 898.2 815 856.6 856.6 815 898.2 746.6 920.5 636.4 920.5H363.6C253.4 920.5 185 898.2 143.4 856.6 101.8 815 79.5 746.6 79.5 636.4V363.6ZM500 251.4C518.8 251.4 534.1 266.6 534.1 285.5V327.7H605.8C608.3 327.1 610.9 326.8 613.6 326.8 616.3 326.8 619 327.1 621.5 327.7H726.8C745.6 327.7 760.9 343 760.9 361.8 760.9 380.6 745.6 395.9 726.8 395.9H646.2C639.5 473.8 610.4 545.2 565.5 603.1 610.5 652.2 666.8 680.5 727.3 680.5 746.1 680.5 761.4 695.7 761.4 714.5 761.4 733.4 746.1 748.6 727.3 748.6 645.9 748.6 574 711.3 519.1 653.3 453.3 712.6 367.3 748.6 272.7 748.6 253.9 748.6 238.6 733.4 238.6 714.5 238.6 695.7 253.9 680.5 272.7 680.5 357.5 680.5 434.7 644.5 490.5 586.1 492.7 581.9 495.8 578.2 499.8 575.1 500.3 574.8 500.8 574.4 501.4 574 542.9 525.8 570.6 464.2 577.7 395.9H500 273.2C254.4 395.9 239.1 380.6 239.1 361.8 239.1 343 254.4 327.7 273.2 327.7H465.9V285.5C465.9 266.6 481.2 251.4 500 251.4Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["lang"] |
||||
}, |
||||
{ |
||||
"uid": "705b801dfeb33ae0471fdd24e536753e", |
||||
"css": "purchases", |
||||
"code": 59430, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M645.8 562.5C629.2 562.5 612.5 575 612.5 595.8 612.5 658.3 562.5 712.5 495.8 712.5S379.2 662.5 379.2 595.8C379.2 579.2 366.7 562.5 345.8 562.5S312.5 575 312.5 595.8C312.5 691.7 391.7 770.8 487.5 770.8S662.5 691.7 662.5 595.8C675 575 662.5 562.5 645.8 562.5ZM908.3 229.2C883.3 212.5 850 212.5 825 212.5H808.3L658.3 62.5C645.8 50 625 50 612.5 62.5 600 75 600 95.8 612.5 108.3L720.8 216.7H283.3L391.7 108.3C404.2 95.8 404.2 75 391.7 62.5 375 50 358.3 50 345.8 62.5L195.8 212.5H175C150 212.5 116.7 212.5 91.7 229.2 62.5 250 50 283.3 50 325 50 370.8 62.5 408.3 91.7 429.2 100 433.3 108.3 437.5 112.5 437.5L166.7 779.2C175 820.8 187.5 862.5 216.7 895.8 250 929.2 295.8 945.8 362.5 945.8H612.5C679.2 945.8 729.2 929.2 758.3 895.8 787.5 862.5 800 820.8 804.2 783.3L870.8 433.3C879.2 433.3 887.5 429.2 895.8 425 929.2 404.2 937.5 370.8 937.5 320.8 950 283.3 937.5 250 908.3 229.2ZM754.2 775C745.8 816.7 737.5 837.5 725 858.3 712.5 875 683.3 887.5 620.8 887.5H370.8C316.7 887.5 287.5 875 270.8 858.3 254.2 841.7 241.7 812.5 237.5 775L183.3 445.8H820.8L754.2 775ZM879.2 366.7C879.2 375 875 375 875 375 870.8 375 866.7 379.2 858.3 379.2 850 379.2 845.8 379.2 833.3 379.2H166.7C158.3 379.2 150 379.2 141.7 379.2 133.3 379.2 129.2 375 125 375 125 375 112.5 366.7 112.5 325 112.5 291.7 120.8 283.3 125 279.2 133.3 275 145.8 270.8 170.8 270.8H820.8C845.8 270.8 862.5 275 866.7 279.2 875 283.3 883.3 291.7 883.3 325 883.3 345.8 883.3 358.3 879.2 366.7Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["purchases"] |
||||
}, |
||||
{ |
||||
"uid": "4c4b6c7c88200b05de8b440a80f2f097", |
||||
"css": "inst", |
||||
"code": 59407, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M95.2 95.2C155.9 34.6 246.6 11.4 363.6 11.4H636.4C753.4 11.4 844.1 34.6 904.8 95.2 965.4 155.9 988.6 246.6 988.6 363.6V636.4C988.6 753.4 965.4 844.1 904.8 904.8 844.1 965.4 753.4 988.6 636.4 988.6H363.6C246.6 988.6 155.9 965.4 95.2 904.8 34.6 844.1 11.4 753.4 11.4 636.4V363.6C11.4 246.6 34.6 155.9 95.2 95.2ZM143.4 143.4C101.8 185 79.5 253.4 79.5 363.6V636.4C79.5 746.6 101.8 815 143.4 856.6 185 898.2 253.4 920.5 363.6 920.5H636.4C746.6 920.5 815 898.2 856.6 856.6 898.2 815 920.5 746.6 920.5 636.4V363.6C920.5 253.4 898.2 185 856.6 143.4 815 101.8 746.6 79.5 636.4 79.5H363.6C253.4 79.5 185 101.8 143.4 143.4ZM500 375C431 375 375 431 375 500 375 569 431 625 500 625 569 625 625 569 625 500 625 431 569 375 500 375ZM306.8 500C306.8 393.3 393.3 306.8 500 306.8 606.7 306.8 693.2 393.3 693.2 500 693.2 606.7 606.7 693.2 500 693.2 393.3 693.2 306.8 606.7 306.8 500ZM756.2 227.3C731.1 227.3 710.7 247.6 710.7 272.7 710.7 297.8 731.1 318.2 756.2 318.2H756.7C781.8 318.2 802.2 297.8 802.2 272.7 802.2 247.6 781.8 227.3 756.7 227.3H756.2Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["inst"] |
||||
}, |
||||
{ |
||||
"uid": "f6a68286a14207e4de3b324550ca0150", |
||||
"css": "restore", |
||||
"code": 59408, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M500 11.4C338.3 11.4 217.2 78.9 137.2 145.6 114.9 164.3 95.6 182.9 79.5 200.1V90.9C79.5 72.1 64.3 56.8 45.5 56.8 26.6 56.8 11.4 72.1 11.4 90.9V298.2C11.4 317 26.6 332.3 45.5 332.3H136.8 247.3C266.1 332.3 281.4 317 281.4 298.2 281.4 279.4 266.1 264.1 247.3 264.1H136.8 113.7C130.6 244.4 153 221.2 180.9 198 252.4 138.4 358.5 79.5 500 79.5 733.8 79.5 920.5 267.8 920.5 500 920.5 695 787.6 859.1 607.2 906.6 589 911.4 578.1 930 582.9 948.2 587.7 966.4 606.4 977.3 624.6 972.5 834.2 917.3 988.6 726.8 988.6 500 988.6 230.4 771.6 11.4 500 11.4ZM79.5 500C79.5 481.2 64.3 465.9 45.5 465.9 26.6 465.9 11.4 481.2 11.4 500 11.4 521.6 12.8 542.9 15.5 563.8 17.9 582.4 35 595.6 53.7 593.2 72.4 590.7 85.5 573.6 83.1 554.9 80.8 537 79.5 518.6 79.5 500ZM111.5 660.9C104.2 643.5 84.3 635.3 66.9 642.5 49.5 649.7 41.3 669.6 48.5 687 65 726.8 86.6 763.8 112.4 797.5 123.9 812.4 145.3 815.2 160.2 803.7 175.1 792.2 177.9 770.8 166.4 755.9 144.2 727 125.6 695.1 111.5 660.9ZM244.1 833.6C229.2 822.1 207.8 824.9 196.3 839.8 184.8 854.7 187.6 876.1 202.5 887.6 236.2 913.4 273.2 935 313 951.5 330.3 958.7 350.3 950.5 357.5 933.1 364.7 915.7 356.5 895.8 339.1 888.5 304.9 874.4 273 855.8 244.1 833.6ZM445.1 916.9C426.4 914.5 409.3 927.6 406.8 946.3 404.4 965 417.6 982.1 436.2 984.5 457.1 987.2 478.4 988.6 500 988.6 518.8 988.6 534.1 973.4 534.1 954.5 534.1 935.7 518.8 920.5 500 920.5 481.4 920.5 463 919.2 445.1 916.9Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["restore"] |
||||
}, |
||||
{ |
||||
"uid": "adcd8b42be8309ee990e4c4e0b318db6", |
||||
"css": "ghost", |
||||
"code": 59409, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M190.1 191C266 114.4 368.9 71.5 476.2 71.5 583.5 71.5 686.4 114.4 762.3 191 838.2 267.5 881 371.4 881 479.8V888.5L792.6 815.6C779.4 804.7 760.3 804.7 747.1 815.6L623 918 498.9 815.6C485.7 804.7 466.7 804.7 453.5 815.6L329.4 918 205.3 815.6C192.1 804.7 173 804.7 159.8 815.6L71.4 888.5V479.8C71.4 371.4 114.1 267.5 190.1 191ZM476.2 0C349.8 0 228.7 50.6 139.4 140.7 50.1 230.7 0 352.7 0 479.8V964.3C0 978.1 8 990.7 20.5 996.6 33 1002.5 47.8 1000.6 58.4 991.8L182.5 889.5 306.6 991.8C319.8 1002.7 338.9 1002.7 352.1 991.8L476.2 889.5 600.3 991.8C613.5 1002.7 632.6 1002.7 645.7 991.8L769.8 889.5 893.9 991.8C904.6 1000.6 919.4 1002.5 931.9 996.6 944.4 990.7 952.4 978.1 952.4 964.3V479.8C952.4 352.7 902.3 230.7 813 140.7 723.7 50.6 602.6 0 476.2 0ZM336 520.2C369.2 520.2 396.1 493.1 396.1 459.6 396.1 426.2 369.2 399.1 336 399.1 302.9 399.1 276 426.2 276 459.6 276 493.1 302.9 520.2 336 520.2ZM616.4 520.2C649.5 520.2 676.4 493.1 676.4 459.6 676.4 426.2 649.5 399.1 616.4 399.1 583.2 399.1 556.3 426.2 556.3 459.6 556.3 493.1 583.2 520.2 616.4 520.2Z", |
||||
"width": 952 |
||||
}, |
||||
"search": ["ghost"] |
||||
}, |
||||
{ |
||||
"uid": "f7b24ebdf92fac4c1c425906ad0c42ae", |
||||
"css": "setting", |
||||
"code": 59410, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M334.2 110.7C353.3 99.3 378.9 105.7 391.1 125.9L395.9 134.2 395.9 134.3C420 176.3 456.5 204.9 500.1 204.9 543.5 204.9 580.2 176.3 604.5 134.4L604.5 134.4 609.4 125.9C621.6 105.7 647.2 99.3 666.2 110.7L666.2 110.7 666.7 111 745.3 156 745.4 156C770.2 170.2 778.8 202.4 764.6 227 740.3 269 733.7 315 755.5 352.7 777.2 390.3 820.2 407.7 868.6 407.7 897.2 407.7 920.9 431.2 920.9 460V540C920.9 568.6 897.4 592.3 868.6 592.3 820.2 592.3 777.2 609.7 755.5 647.4 733.8 685 740.3 731 764.5 772.9 778.9 798.1 770.2 829.9 745.4 844L745.3 844.1 666.7 889.1 666.7 889.1 666.2 889.3C647.2 900.7 621.6 894.4 609.4 874.1L604.6 865.8 604.5 865.7C580.5 823.7 543.9 795.1 500.4 795.1 456.9 795.1 420.3 823.7 396 865.6L396 865.6 391.1 874.1C378.9 894.4 353.3 900.7 334.2 889.3L334.3 889.3 333.8 889.1 255.1 844.1 255.1 844C230.2 829.8 221.7 797.6 235.9 773 260.2 731 266.7 685.1 245 647.4 223.3 609.7 180.2 592.3 131.8 592.3 103 592.3 79.5 568.6 79.5 540V460C79.5 431.4 103 407.7 131.8 407.7 180.2 407.7 223.3 390.3 245 352.7 266.7 315 260.2 269 235.9 227 221.7 202.4 230.2 170.2 255.1 156L255.1 156 333.8 111 333.8 111 334.2 110.7ZM235.9 227C235.9 227 235.9 227 235.9 227L206.4 244.1 235.9 227C235.9 227 235.9 227 235.9 227ZM449.8 91.2C419.2 39.9 352.4 20.8 299.7 51.9L221.3 96.8 221.3 96.8 221.2 96.8C163.4 129.8 143.8 204 176.8 261.2L176.9 261.2C193.9 290.6 191.2 309.4 185.9 318.6 180.6 327.8 165.7 339.6 131.8 339.6 65.1 339.6 11.4 394 11.4 460V540C11.4 606 65.1 660.5 131.8 660.5 165.7 660.5 180.6 672.2 185.9 681.4 191.2 690.6 193.9 709.4 176.9 738.8L176.8 738.9C143.8 796 163.4 870.2 221.2 903.2L221.3 903.2 299.7 948.1C352.4 979.3 419.2 960.1 449.8 908.8L449.8 908.8 450 908.5 454.9 899.8 455 899.8C472 870.4 489.7 863.3 500.4 863.3 511.1 863.3 528.6 870.4 545.4 899.7L545.5 899.8 550.5 908.5 550.5 908.5 550.7 908.8C581.2 960.1 648.1 979.3 700.8 948.1L779.2 903.2 779.2 903.2C837.1 870.1 856.6 796.5 823.7 739L823.7 739 823.6 738.8C806.5 709.4 809.2 690.6 814.5 681.4 819.9 672.2 834.8 660.5 868.6 660.5 935.3 660.5 989.1 606 989.1 540V460C989.1 393.3 934.6 339.6 868.6 339.6 834.8 339.6 819.9 327.8 814.5 318.6 809.2 309.4 806.5 290.6 823.6 261.2L823.6 261.2C856.6 204 837 129.8 779.2 96.8L700.8 51.9C648.1 20.8 581.2 39.9 550.7 91.2L550.7 91.2 550.5 91.6 545.5 100.2 545.5 100.2C528.4 129.6 510.8 136.7 500.1 136.7 489.4 136.7 471.8 129.7 455 100.3L455 100.2 450 91.6 450 91.6 449.8 91.2ZM397.7 500C397.7 443.5 443.5 397.7 500 397.7 556.5 397.7 602.3 443.5 602.3 500 602.3 556.5 556.5 602.3 500 602.3 443.5 602.3 397.7 556.5 397.7 500ZM500 329.6C405.9 329.6 329.5 405.9 329.5 500 329.5 594.1 405.9 670.5 500 670.5 594.1 670.5 670.5 594.1 670.5 500 670.5 405.9 594.1 329.6 500 329.6Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["setting"] |
||||
}, |
||||
{ |
||||
"uid": "c0f00bfaafecf771a588798f5995fee2", |
||||
"css": "settings", |
||||
"code": 59411, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M78.6 162.7C78.6 79.4 146.1 11.4 230 11.4 313.8 11.4 381.4 78.9 381.4 162.7 381.4 244.7 316.8 311.1 235.8 314.1 233.9 314.1 232.1 314.1 230.2 313.8 228.4 314.1 226.5 314.1 224.7 314.1 143.6 311.1 79.2 244.7 78.6 163L78.6 162.7ZM146.8 162.6C147.2 207.2 181.5 243 224.7 245.8 228.4 245.5 232.1 245.5 235.7 245.8 279 243 313.2 207.2 313.2 162.7 313.2 116.6 276.2 79.5 230 79.5 184 79.5 146.9 116.9 146.8 162.6ZM685.5 162.7C685.5 116.6 722.5 79.5 768.6 79.5 814.7 79.5 851.7 116.9 851.8 162.6 851.4 207.2 817.1 243 773.9 245.8 770.3 245.5 766.5 245.5 762.9 245.8 719.6 243 685.5 207.2 685.5 162.7ZM768.6 11.4C684.8 11.4 617.3 78.9 617.3 162.7 617.3 244.7 681.8 311.1 762.9 314.1 764.7 314.1 766.6 314.1 768.4 313.8 770.2 314.1 772.1 314.1 774 314.1 855 311.1 919.4 244.7 920 163H920V162.7C920 79.4 852.5 11.4 768.6 11.4ZM923.8 394.3C866.6 356.3 787.8 344.8 718.7 356.9 700.1 360.1 687.7 377.8 691 396.3 694.2 414.9 711.9 427.3 730.4 424 785.9 414.3 846.1 424.6 886.1 451.1 911 467.7 919 486.3 919 500.5 919 514.6 911 533.2 886.1 549.8L886 549.9C846.5 576.3 787.1 586.6 731.6 577.3 713 574.2 695.4 586.7 692.3 605.3 689.2 623.8 701.7 641.4 720.3 644.5 789.2 656.1 867 644.6 923.9 606.5 963.1 580.4 987.2 542.6 987.2 500.5 987.2 458.3 963.1 420.5 923.9 394.4L923.8 394.3ZM268.2 424C212.8 414.3 152.5 424.6 112.5 451.1 87.6 467.7 79.7 486.3 79.7 500.5 79.7 514.6 87.6 533.2 112.5 549.8L112.6 549.9C152.1 576.3 211.5 586.6 267.1 577.3 285.6 574.2 303.2 586.7 306.3 605.3 309.5 623.8 296.9 641.4 278.4 644.5 209.4 656.1 131.6 644.6 74.7 606.5 35.6 580.4 11.5 542.6 11.5 500.5 11.5 458.3 35.6 420.5 74.7 394.4L74.8 394.3C132.1 356.3 210.9 344.8 280 356.9 298.5 360.1 310.9 377.8 307.7 396.3 304.4 414.9 286.8 427.3 268.2 424ZM495.9 419.1C449.7 419.1 412.7 456.1 412.7 502.3 412.7 546.7 446.9 582.5 490.2 585.4 493.9 585 497.6 585 501.3 585.4 544.2 582.9 578.7 547 579.1 502.1 579 456.4 542 419.1 495.9 419.1ZM344.5 502.3C344.5 418.4 412.1 350.9 495.9 350.9 579.8 350.9 647.3 419 647.3 502.3V502.5H647.3C646.7 584.1 582.5 651.3 501 653.6 499.2 653.7 497.4 653.6 495.7 653.4 493.8 653.6 492 653.7 490.1 653.6 409.1 650.7 344.5 584.3 344.5 502.3ZM651.2 734.4C608.2 705.7 553.3 692.5 500.2 692.5 447 692.5 392 705.7 348.9 734.3L348.8 734.4C309.7 760.5 285.6 798.3 285.6 840.5 285.6 882.6 309.7 920.4 348.8 946.5 391.9 975.4 446.9 988.8 500 988.8 553.1 988.8 608.1 975.4 651.2 946.5 690.3 920.4 714.4 882.6 714.4 840.5 714.4 798.3 690.3 760.5 651.2 734.4ZM353.7 840.5C353.7 826.3 361.7 807.7 386.6 791.1 416.2 771.5 457.3 760.7 500.2 760.7 543.1 760.7 584 771.5 613.4 791.1 638.3 807.7 646.3 826.3 646.3 840.5 646.3 854.6 638.3 873.2 613.4 889.8L613.3 889.8C583.7 909.6 542.8 920.6 500 920.6 457.2 920.6 416.3 909.6 386.7 889.8L386.6 889.8C361.7 873.2 353.7 854.6 353.7 840.5Z", |
||||
"width": 1000 |
||||
}, |
||||
"search": ["settings"] |
||||
}, |
||||
{ |
||||
"uid": "dd62c27b488715bc9c53b0d0eb62e70f", |
||||
"css": "arrow", |
||||
"code": 59412, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M473.9 30.5C490.2 46.8 490.2 73.2 473.9 89.5L111.7 451.7C85.2 478.2 85.2 521.8 111.7 548.3L473.9 910.5C490.2 926.8 490.2 953.2 473.9 969.5 457.6 985.7 431.3 985.7 415 969.5L52.8 607.2C-6.3 548.2-6.3 451.8 52.8 392.8L415 30.5C431.3 14.3 457.6 14.3 473.9 30.5Z", |
||||
"width": 500 |
||||
}, |
||||
"search": ["arrow"] |
||||
}, |
||||
{ |
||||
"uid": "63828f253968dceee7e2f437113d9434", |
||||
"css": "add-plus", |
||||
"code": 59416, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M395.8 52.1C288.6 52.1 205.4 73.3 149.8 128.9 94.2 184.5 72.9 267.8 72.9 375V625C72.9 732.3 94.2 815.5 149.8 871.1 205.4 926.7 288.6 947.9 395.8 947.9H645.8C753.1 947.9 836.3 926.7 891.9 871.1 947.5 815.5 968.8 732.3 968.8 625V375C968.8 267.8 947.5 184.5 891.9 128.9 836.3 73.3 753.1 52.1 645.8 52.1H395.8ZM135.4 375C135.4 273.9 155.8 211.3 194 173.1 232.1 135 294.7 114.6 395.8 114.6H645.8C746.9 114.6 809.5 135 847.7 173.1 885.8 211.3 906.3 273.9 906.3 375V625C906.3 726.1 885.8 788.7 847.7 826.9 809.5 865 746.9 885.4 645.8 885.4H395.8C294.7 885.4 232.1 865 194 826.9 155.8 788.7 135.4 726.1 135.4 625V375ZM520.8 302.1C538.1 302.1 552.1 316.1 552.1 333.3V468.8H687.5C704.8 468.8 718.8 482.7 718.8 500 718.8 517.3 704.8 531.3 687.5 531.3H552.1V666.7C552.1 683.9 538.1 697.9 520.8 697.9 503.6 697.9 489.6 683.9 489.6 666.7V531.3H354.2C336.9 531.3 322.9 517.3 322.9 500 322.9 482.7 336.9 468.8 354.2 468.8H489.6V333.3C489.6 316.1 503.6 302.1 520.8 302.1Z", |
||||
"width": 1042 |
||||
}, |
||||
"search": ["add-plus"] |
||||
}, |
||||
{ |
||||
"uid": "9730bc56fc027ab32b612262c1735269", |
||||
"css": "union", |
||||
"code": 59417, |
||||
"src": "custom_icons", |
||||
"selected": true, |
||||
"svg": { |
||||
"path": "M102.3 500C102.3 267.8 288.9 79.5 522.7 79.5 664.2 79.5 770.4 138.4 841.9 198 869.7 221.2 892.1 244.4 909.1 264.1H775.5C756.6 264.1 741.4 279.4 741.4 298.2 741.4 317 756.6 332.3 775.5 332.3H977.3C996.1 332.3 1011.4 317 1011.4 298.2V70.9C1011.4 52.1 996.1 36.8 977.3 36.8 958.4 36.8 943.2 52.1 943.2 70.9V200.1C927.1 182.9 907.9 164.3 885.5 145.6 805.5 78.9 684.4 11.4 522.7 11.4 251.1 11.4 34.1 230.4 34.1 500 34.1 518.8 49.4 534.1 68.2 534.1 87 534.1 102.3 518.8 102.3 500ZM1011.4 500C1011.4 481.2 996.1 465.9 977.3 465.9 958.4 465.9 943.2 481.2 943.2 500 943.2 732.1 754.8 920.5 522.7 920.5 409.1 920.5 315.9 863.2 249.5 802.9 223.6 779.4 202.2 755.8 185.8 735.9H324.1C342.9 735.9 358.2 720.6 358.2 701.8 358.2 683 342.9 667.7 324.1 667.7H118.6C99.8 667.7 84.5 683 84.5 701.8V929.1C84.5 947.9 99.8 963.2 118.6 963.2 137.5 963.2 152.7 947.9 152.7 929.1V802.1C167.3 818.4 184.3 835.9 203.7 853.4 276.6 919.5 385.4 988.6 522.7 988.6 792.5 988.6 1011.4 769.7 1011.4 500Z", |
||||
"width": 1045 |
||||
}, |
||||
"search": ["union"] |
||||
} |
||||
] |
||||
} |
||||
@ -1,12 +1,12 @@
@@ -1,12 +1,12 @@
|
||||
import { CustomPack } from '../../module/shared/interfaces/custom-pack'; |
||||
import { PageTitles } from '../../module/shared/interfaces/page-titles'; |
||||
import { Buttons } from './buttons.types'; |
||||
import {OnBoardingLocale} from './on-boarding.types'; |
||||
import {SettingLocale} from './settings.types'; |
||||
import { CustomPack, PageTitles } from '../../module/common' |
||||
import { Buttons } from './buttons.types' |
||||
import { OnBoardingLocale } from './on-boarding.types' |
||||
import { SettingLocale } from './settings.types' |
||||
|
||||
export interface MainLocaleModule { |
||||
stepTranslation: OnBoardingLocale.OnboardingSteps; |
||||
settingTranslation: SettingLocale.Core; |
||||
buttonsTranslation: Buttons; |
||||
customPack: CustomPack; |
||||
pageTitles: PageTitles; |
||||
stepTranslation: OnBoardingLocale.OnboardingSteps |
||||
settingTranslation: SettingLocale.Core |
||||
buttonsTranslation: Buttons |
||||
customPack: CustomPack |
||||
pageTitles: PageTitles |
||||
} |
||||
|
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
export const colors = { |
||||
primaryColor: '#37296B', |
||||
turquoise: '#99EDCC', |
||||
textPrimary: '#FFFF', |
||||
secondaryText: '#7669C2', |
||||
red: '#E36588', |
||||
darkPurple: '#2C205C', |
||||
purple: '#A798FF', |
||||
lightPurple: '#51418D', |
||||
blue: '#9AC4F8', |
||||
} |
||||
@ -0,0 +1,90 @@
@@ -0,0 +1,90 @@
|
||||
import React, { FC, PropsWithChildren } from 'react' |
||||
import { |
||||
ActivityIndicator, |
||||
DimensionValue, |
||||
StyleProp, |
||||
StyleSheet, |
||||
TextStyle, |
||||
TouchableOpacity, |
||||
View, |
||||
ViewStyle, |
||||
} from 'react-native' |
||||
import { Txt, TxtModType } from '../txt' |
||||
import { Font } from '../../typing' |
||||
import { $size } from '../../helpers' |
||||
import { colors } from '../../colors' |
||||
|
||||
type ButtonStyleMod = 'filled' | 'outline' | 'danger' |
||||
|
||||
interface IButtonPrimaryProps { |
||||
mod?: ButtonStyleMod |
||||
style?: ViewStyle |
||||
onPress: () => void |
||||
isLoading?: boolean |
||||
|
||||
mb?: number |
||||
width?: DimensionValue | undefined |
||||
txtMod?: TxtModType |
||||
txtFont?: Font |
||||
txtColor?: string |
||||
disabled?: boolean |
||||
styleTxt?: any |
||||
} |
||||
|
||||
export const ButtonPrimary: FC<PropsWithChildren<IButtonPrimaryProps>> = ({ |
||||
children, |
||||
style, |
||||
onPress, |
||||
isLoading, |
||||
|
||||
mb = 0, |
||||
width = '100%', |
||||
txtFont = Font.Roboto700, |
||||
txtMod = 'md', |
||||
txtColor = colors.textPrimary, |
||||
disabled = false, |
||||
styleTxt, |
||||
}) => { |
||||
if (isLoading) { |
||||
return ( |
||||
<View style={style}> |
||||
<ActivityIndicator |
||||
style={[styles.loader, { marginBottom: mb, width }]} |
||||
/> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<TouchableOpacity |
||||
activeOpacity={0.6} |
||||
disabled={disabled} |
||||
onPress={onPress} |
||||
style={[styles.container, style, { marginBottom: mb, width }]}> |
||||
<Txt |
||||
font={txtFont} |
||||
mod={txtMod} |
||||
style={[styles.txtBtn, { color: txtColor }, styleTxt]}> |
||||
{children} |
||||
</Txt> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: colors.red, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
borderRadius: 60, |
||||
height: $size(50), |
||||
}, |
||||
|
||||
txtBtn: { |
||||
color: colors.textPrimary, |
||||
}, |
||||
|
||||
loader: { |
||||
height: $size(56, 54), |
||||
}, |
||||
}) |
||||
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native' |
||||
import { colors } from '../../colors' |
||||
import { Icon } from '../icon' |
||||
import { $size } from '../../helpers' |
||||
|
||||
interface IProps { |
||||
iconName: string |
||||
onPress: () => void |
||||
styleBtn?: ViewStyle |
||||
} |
||||
|
||||
export const ButtonWithIcon: React.FC<IProps> = ({ |
||||
iconName, |
||||
onPress, |
||||
styleBtn, |
||||
}) => { |
||||
return ( |
||||
<TouchableOpacity |
||||
style={[styles.container, styleBtn]} |
||||
onPress={onPress}> |
||||
<Icon name={iconName} size={$size(24)} color={colors.textPrimary} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
borderRadius: 60, |
||||
backgroundColor: colors.red, |
||||
height: $size(50), |
||||
width: $size(101), |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
}, |
||||
}) |
||||
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
import React, { FC } from 'react' |
||||
import { TouchableOpacity, ViewStyle } from 'react-native' |
||||
import { colors } from '../../colors/colors' |
||||
import { Icon } from '../icon' |
||||
import { $size } from '../../helpers' |
||||
|
||||
interface IProps { |
||||
onPress: () => void |
||||
style?: ViewStyle |
||||
} |
||||
export const GoBackBtn: FC<IProps> = ({ onPress, style }) => { |
||||
return ( |
||||
<TouchableOpacity onPress={onPress} style={style}> |
||||
<Icon name="arrow" size={$size(24)} color={colors.turquoise} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
export * from './go-back.component' |
||||
export * from './button-primary.component' |
||||
export * from './button-with-icon' |
||||
@ -0,0 +1,93 @@
@@ -0,0 +1,93 @@
|
||||
import React, { FC } from 'react' |
||||
import { StyleSheet, TouchableOpacity, View } from 'react-native' |
||||
import { colors } from '../../colors' |
||||
import { Icon } from '../icon' |
||||
import { $size } from '../../helpers' |
||||
import { Txt } from '../txt' |
||||
import { Font } from '../../typing' |
||||
|
||||
interface IProps { |
||||
onPressLeft?: () => any |
||||
title?: string |
||||
onPressRight?: () => any |
||||
leftIcon?: string |
||||
rightIcon?: string |
||||
gamer?: boolean |
||||
} |
||||
export const Header: FC<IProps> = ({ |
||||
onPressLeft, |
||||
leftIcon, |
||||
rightIcon, |
||||
title, |
||||
gamer, |
||||
onPressRight, |
||||
}) => { |
||||
return ( |
||||
<View style={styles.header}> |
||||
<View style={styles.button}> |
||||
{leftIcon && ( |
||||
<TouchableOpacity |
||||
style={styles.button} |
||||
onPress={onPressLeft}> |
||||
<Icon |
||||
name={leftIcon} |
||||
size={$size(24)} |
||||
color={colors.turquoise} |
||||
/> |
||||
</TouchableOpacity> |
||||
)} |
||||
</View> |
||||
|
||||
<View |
||||
style={[ |
||||
styles.titleContainer, |
||||
gamer && { backgroundColor: colors.darkPurple }, |
||||
]}> |
||||
<Txt mod="xxl" style={styles.title}> |
||||
{title} |
||||
</Txt> |
||||
</View> |
||||
|
||||
<View style={styles.button}> |
||||
{rightIcon && ( |
||||
<TouchableOpacity |
||||
style={styles.button} |
||||
onPress={onPressRight}> |
||||
<Icon |
||||
name={rightIcon} |
||||
size={$size(24)} |
||||
color={colors.turquoise} |
||||
/> |
||||
</TouchableOpacity> |
||||
)} |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
header: { |
||||
height: $size(54), |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
justifyContent: 'space-between', |
||||
paddingHorizontal: 24, |
||||
}, |
||||
title: { |
||||
color: colors.turquoise, |
||||
fontFamily: Font.Roboto700, |
||||
}, |
||||
titleContainer: { |
||||
borderRadius: 60, |
||||
minWidth: $size(130), |
||||
padding: $size(14), |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
}, |
||||
button: { |
||||
width: $size(24), |
||||
height: $size(24), |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}, |
||||
}) |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
import React, { FC } from 'react' |
||||
import { createIconSetFromFontello } from 'react-native-vector-icons' |
||||
import { ColorValue, TouchableOpacity, ViewStyle } from 'react-native' |
||||
import fontelloConfig from '../../../../config/fontello.json' |
||||
|
||||
const FontelloIcon = createIconSetFromFontello(fontelloConfig) |
||||
|
||||
interface IProps { |
||||
name: string |
||||
size: number |
||||
color?: ColorValue |
||||
style?: any |
||||
onPress?: () => void |
||||
buttonStyle?: ViewStyle | ViewStyle[] |
||||
disabled?: boolean |
||||
} |
||||
|
||||
export const Icon: FC<IProps> = props => { |
||||
if (props.onPress) { |
||||
return ( |
||||
<TouchableOpacity |
||||
disabled={props.disabled} |
||||
onPress={props.onPress} |
||||
style={props.buttonStyle} |
||||
activeOpacity={0.3}> |
||||
<FontelloIcon {...props} onPress={() => null} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
|
||||
return <FontelloIcon {...props} /> |
||||
} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './icon.component' |
||||
@ -1,4 +1,7 @@
@@ -1,4 +1,7 @@
|
||||
export * from './Icon'; |
||||
export * from './icon'; |
||||
export * from './buttons'; |
||||
export * from './header'; |
||||
export * from './layout'; |
||||
export * from './modal'; |
||||
export * from './txt'; |
||||
|
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './screen-layout-content.component' |
||||
export * from './screen-layout.component' |
||||
@ -0,0 +1,93 @@
@@ -0,0 +1,93 @@
|
||||
import React, { FC } from 'react' |
||||
import { |
||||
KeyboardAvoidingView, |
||||
Platform, |
||||
StyleSheet, |
||||
View, |
||||
ViewStyle, |
||||
} from 'react-native' |
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' |
||||
import { $size } from '../../helpers' |
||||
|
||||
interface ScreenLayoutContentProps { |
||||
children: JSX.Element | JSX.Element[] |
||||
header?: () => React.ReactNode |
||||
paddingHorizontal?: number |
||||
needScroll?: Boolean |
||||
scrollStyle?: ViewStyle |
||||
viewStyle?: ViewStyle |
||||
leftBottomRound?: boolean |
||||
background?: string |
||||
keyboardSpacerOn?: boolean |
||||
scrollRef?: React.MutableRefObject<KeyboardAwareScrollView> |
||||
extraHeight?: number |
||||
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined |
||||
paddingTop?: number |
||||
} |
||||
|
||||
export const ScreenLayoutContent: FC<ScreenLayoutContentProps> = ({ |
||||
children, |
||||
header, |
||||
paddingTop = $size(16), |
||||
paddingHorizontal = 16, |
||||
needScroll, |
||||
scrollStyle, |
||||
viewStyle, |
||||
scrollRef, |
||||
extraHeight = 160, |
||||
pointerEvents = undefined, |
||||
}) => { |
||||
if (needScroll) { |
||||
return ( |
||||
<View style={styles.view}> |
||||
{header && header()} |
||||
<KeyboardAwareScrollView |
||||
ref={scrollRef} |
||||
enableAutomaticScroll={true} |
||||
keyboardShouldPersistTaps="handled" |
||||
extraHeight={extraHeight} |
||||
scrollEventThrottle={20} |
||||
pointerEvents={pointerEvents} |
||||
contentContainerStyle={[ |
||||
{ |
||||
paddingTop, |
||||
paddingHorizontal: $size(paddingHorizontal), |
||||
}, |
||||
scrollStyle, |
||||
]}> |
||||
{children} |
||||
</KeyboardAwareScrollView> |
||||
</View> |
||||
) |
||||
} else { |
||||
return ( |
||||
<KeyboardAvoidingView |
||||
style={{ flex: 1 }} |
||||
behavior="height" |
||||
keyboardVerticalOffset={Platform.OS === 'android' ? 50 : 70}> |
||||
<View style={styles.view}> |
||||
{header && header()} |
||||
<View |
||||
style={[ |
||||
viewStyle, |
||||
{ |
||||
paddingTop, |
||||
paddingHorizontal: $size(paddingHorizontal), |
||||
flex: 1, |
||||
}, |
||||
]} |
||||
pointerEvents={pointerEvents}> |
||||
{children} |
||||
</View> |
||||
</View> |
||||
</KeyboardAvoidingView> |
||||
) |
||||
} |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
view: { |
||||
flex: 1, |
||||
zIndex: 2, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,91 @@
@@ -0,0 +1,91 @@
|
||||
import React, { ReactElement } from 'react' |
||||
import { |
||||
ColorValue, |
||||
StatusBar, |
||||
StyleSheet, |
||||
View, |
||||
ViewStyle, |
||||
} from 'react-native' |
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' |
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context' |
||||
import { ScreenLayoutContent } from './screen-layout-content.component' |
||||
import _ from 'lodash' |
||||
import { gcService } from '../../tools' |
||||
import { colors } from '../../colors' |
||||
import { $size } from '../../helpers' |
||||
|
||||
export interface ScreenLayoutProps { |
||||
children: JSX.Element | JSX.Element[] |
||||
needScroll?: Boolean |
||||
scrollStyle?: ViewStyle |
||||
viewStyle?: ViewStyle |
||||
leftBottomRound?: boolean |
||||
statusBarBg?: ColorValue |
||||
background?: string |
||||
paddingHorizontal?: number |
||||
keyboardSpacerOn?: boolean |
||||
headerComponent?: ReactElement |
||||
scrollRef?: React.MutableRefObject<KeyboardAwareScrollView> |
||||
extraHeight?: number |
||||
footer?: () => ReactElement |
||||
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined |
||||
bottomSafeArea?: boolean |
||||
bottomBarSafeArea?: boolean |
||||
paddingTop?: number |
||||
} |
||||
|
||||
export const ScreenLayout = ({ |
||||
statusBarBg, |
||||
background, |
||||
bottomSafeArea = false, |
||||
paddingTop, |
||||
bottomBarSafeArea = false, |
||||
...props |
||||
}: ScreenLayoutProps) => { |
||||
const insets = useSafeAreaInsets() |
||||
|
||||
const heightTopDefault = _.defaultTo( |
||||
Math.max(insets.top, gcService.get('insetsTop')), |
||||
$size(44), |
||||
) |
||||
|
||||
return ( |
||||
<> |
||||
<View |
||||
style={{ |
||||
backgroundColor: colors.primaryColor, |
||||
height: heightTopDefault, |
||||
width: '100%', |
||||
}}> |
||||
<StatusBar |
||||
barStyle="light-content" |
||||
backgroundColor={colors.primaryColor} |
||||
/> |
||||
</View> |
||||
<View |
||||
style={[ |
||||
styles.container, |
||||
{ |
||||
backgroundColor: _.defaultTo( |
||||
background, |
||||
colors.primaryColor, |
||||
), |
||||
}, |
||||
]}> |
||||
<ScreenLayoutContent |
||||
{...props} |
||||
header={() => props.headerComponent} |
||||
paddingTop={paddingTop} |
||||
/> |
||||
|
||||
{props.footer ? props.footer() : null} |
||||
</View> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
|
||||
export const ModalBodyAtom = ({ children }: { children?: React.ReactNode }) => ( |
||||
<View style={styles.body}>{children}</View> |
||||
) |
||||
|
||||
const styles = StyleSheet.create({ |
||||
body: { |
||||
justifyContent: 'center', |
||||
minHeight: 100, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, View, ViewStyle } from 'react-native' |
||||
import { colors } from '../../../colors' |
||||
|
||||
export const ModalContainerAtom = ({ |
||||
children, |
||||
style, |
||||
}: { |
||||
children: React.ReactNode |
||||
style?: ViewStyle |
||||
}) => { |
||||
return <View style={[styles.container, style]}>{children}</View> |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: colors.darkPurple, |
||||
borderRadius: 4, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
|
||||
export const ModalFooterAtom = ({ |
||||
children, |
||||
}: { |
||||
children?: React.ReactNode |
||||
}) => <View style={styles.footer}>{children}</View> |
||||
|
||||
const styles = StyleSheet.create({ |
||||
footer: { |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
flexDirection: 'row', |
||||
}, |
||||
}) |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
|
||||
export const ModalHeaderAtom = ({ |
||||
children, |
||||
}: { |
||||
children?: React.ReactNode |
||||
}) => <View style={styles.header}>{children}</View> |
||||
|
||||
const styles = StyleSheet.create({ |
||||
header: { |
||||
justifyContent: 'center', |
||||
}, |
||||
}) |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
export * from './header-modal.atom' |
||||
export * from './body-modal.atom' |
||||
export * from './footer-modal.atom' |
||||
export * from './container-modal.atom' |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './modal' |
||||
@ -0,0 +1,61 @@
@@ -0,0 +1,61 @@
|
||||
import React from 'react' |
||||
import RNModal, { ModalProps } from 'react-native-modal' |
||||
import { getDimensions } from '../../helpers' |
||||
import { |
||||
ModalBodyAtom, |
||||
ModalContainerAtom, |
||||
ModalFooterAtom, |
||||
ModalHeaderAtom, |
||||
} from './atoms' |
||||
|
||||
interface Props extends Partial<ModalProps> { |
||||
isVisible: boolean |
||||
children: React.ReactNode |
||||
onClose: () => void |
||||
positionModal?: |
||||
| 'center' |
||||
| 'flex-start' |
||||
| 'flex-end' |
||||
| 'space-between' |
||||
| 'space-around' |
||||
| 'space-evenly' |
||||
} |
||||
|
||||
const dimensions = getDimensions() |
||||
|
||||
export const ModalComponent = ({ |
||||
isVisible = false, |
||||
children, |
||||
positionModal = 'center', |
||||
onClose, |
||||
...props |
||||
}: Props) => { |
||||
return ( |
||||
<RNModal |
||||
deviceHeight={dimensions.height} |
||||
deviceWidth={dimensions.width} |
||||
statusBarTranslucent |
||||
isVisible={isVisible} |
||||
animationInTiming={600} |
||||
animationOutTiming={300} |
||||
backdropTransitionInTiming={300} |
||||
backdropTransitionOutTiming={300} |
||||
backdropOpacity={0.7} |
||||
hasBackdrop={true} |
||||
onBackdropPress={onClose} |
||||
style={{ |
||||
marginHorizontal: 0, |
||||
marginVertical: 0, |
||||
justifyContent: positionModal, |
||||
paddingHorizontal: 16, |
||||
}} |
||||
{...props}> |
||||
{children} |
||||
</RNModal> |
||||
) |
||||
} |
||||
|
||||
ModalComponent.Header = ModalHeaderAtom |
||||
ModalComponent.Container = ModalContainerAtom |
||||
ModalComponent.Body = ModalBodyAtom |
||||
ModalComponent.Footer = ModalFooterAtom |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './txt.component' |
||||
@ -0,0 +1,67 @@
@@ -0,0 +1,67 @@
|
||||
import React, { FC } from 'react' |
||||
import { Text, TextStyle, TextProps } from 'react-native' |
||||
import { $size } from '../../helpers' |
||||
import { Font } from '../../typing' |
||||
import { colors } from '../../colors' |
||||
|
||||
export type TxtModType = 's' | 'es' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' |
||||
|
||||
const sizes = { |
||||
s: $size(10, 8), |
||||
es: $size(12, 10), |
||||
sm: $size(14, 12), |
||||
md: $size(16, 14), |
||||
lg: $size(18, 16), |
||||
xl: $size(20, 18), |
||||
xxl: $size(24, 22), |
||||
} |
||||
|
||||
const lineHeights = { |
||||
s: $size(12, 10), |
||||
es: $size(14, 12), |
||||
sm: $size(16, 14), |
||||
md: $size(18, 16), |
||||
lg: $size(20, 18), |
||||
xl: $size(22, 20), |
||||
xxl: $size(26, 24), |
||||
} |
||||
|
||||
export interface TxtProps extends TextProps { |
||||
children: any |
||||
style?: TextStyle | TextStyle[] |
||||
color?: string |
||||
mod?: keyof typeof sizes |
||||
hide?: Boolean |
||||
numberOfLines?: number |
||||
font?: Font |
||||
} |
||||
|
||||
export const Txt: FC<TxtProps> = ({ |
||||
children, |
||||
style = {}, |
||||
mod = 'es', |
||||
hide, |
||||
color, |
||||
font = Font.Roboto400, |
||||
...props |
||||
}) => { |
||||
if (hide === true) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
<Text |
||||
{...props} |
||||
style={[ |
||||
{ |
||||
color: color || colors.textPrimary, |
||||
fontFamily: font, |
||||
fontSize: sizes[mod], |
||||
lineHeight: lineHeights[mod], |
||||
}, |
||||
style, |
||||
]}> |
||||
{children} |
||||
</Text> |
||||
) |
||||
} |
||||
@ -0,0 +1,29 @@
@@ -0,0 +1,29 @@
|
||||
import { Events } from 'jet-tools' |
||||
import { ViewStyle } from 'react-native' |
||||
|
||||
export type AppEvents = { |
||||
event: { |
||||
data: string |
||||
} |
||||
|
||||
alert: { |
||||
title: string |
||||
subtitle: string |
||||
btnText?: string |
||||
bottomTxt?: string |
||||
onClose?: () => void |
||||
} |
||||
|
||||
confirm: { |
||||
cancelBtnText?: string |
||||
confirmBtnText?: string |
||||
title: string |
||||
subtitle: string |
||||
isRedButton?: boolean |
||||
buttons: { |
||||
onPress: () => void |
||||
}[] |
||||
} |
||||
} |
||||
|
||||
export const appEvents = new Events<AppEvents>() |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './app-events'; |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
import { Dimensions } from 'react-native' |
||||
|
||||
export const getDimensions = () => { |
||||
const { height, width } = Dimensions.get('screen') |
||||
return { height, width } |
||||
} |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
export * from './dimensions.helper'; |
||||
export * from './style.helper'; |
||||
|
||||
@ -0,0 +1,18 @@
@@ -0,0 +1,18 @@
|
||||
import { Dimensions } from 'react-native' |
||||
|
||||
const screenHeight = Dimensions.get('screen').height |
||||
const BASIC_HEIGHT = 812 |
||||
const coff = (screenHeight / BASIC_HEIGHT) * 100 |
||||
|
||||
const maxSize = (size: number) => size + (size / 100) * 20 |
||||
const prepareRes = (res: number, size: number) => Math.min(res, maxSize(size)) |
||||
|
||||
export const $size = (size: number, min?: number) => { |
||||
const res = size * (coff / 100) |
||||
|
||||
if (min) { |
||||
return Math.max(prepareRes(res, size), min) |
||||
} else { |
||||
return prepareRes(res, size) |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
export * from './use-nav.hook' |
||||
export * from './use-dispatch.hook' |
||||
export * from './use-events-listener.hook' |
||||
export * from './use-selector.hook' |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
import { useDispatch } from 'react-redux' |
||||
import { AppDispatch } from '../../../store/store' |
||||
|
||||
export const useAppDispatch = () => useDispatch<AppDispatch>() |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
import { useEffect } from 'react' |
||||
import { AppEvents, appEvents } from '../events' |
||||
|
||||
export const useEventsListener = <T extends keyof AppEvents>( |
||||
name: T, |
||||
action: (data: AppEvents[T]) => void, |
||||
dependencies: any[] = [], |
||||
) => { |
||||
useEffect(() => { |
||||
const fn = (data: AppEvents[T]) => { |
||||
try { |
||||
action(data) |
||||
} catch (e) { |
||||
console.log('error event', e) |
||||
} |
||||
} |
||||
appEvents.on(name, fn) |
||||
|
||||
return () => appEvents.off(name, fn) |
||||
}, dependencies) |
||||
} |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
import { useSelector } from 'react-redux' |
||||
import { TypedUseSelectorHook } from 'react-redux' |
||||
import { RootState } from '../../../store/store' |
||||
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
export * from './colors' |
||||
export * from './components' |
||||
export * from './typing' |
||||
export * from './helpers' |
||||
export * from './hooks' |
||||
export * from './events' |
||||
export * from './tools' |
||||
export * from './widgets' |
||||
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */ |
||||
const globalData: any = { |
||||
store: null, |
||||
internetConnect: true, |
||||
scrollY: 0, |
||||
} |
||||
|
||||
const set = (key: any, value: any) => { |
||||
globalData[key] = value |
||||
} |
||||
|
||||
const get = (key: string) => globalData[key] |
||||
|
||||
export const gcService = { |
||||
set, |
||||
get, |
||||
} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './global-container.tool' |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
export enum Font { |
||||
Roboto400 = 'Roboto-Regular', |
||||
Roboto700 = 'Roboto-Bold', |
||||
} |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
export * from './route-keys.enum' |
||||
export * from './fonts.enum' |
||||
export * from './storage-key.enum' |
||||
export * from './language.enum' |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
export enum Language { |
||||
EN = 'en', |
||||
UA = 'ua', |
||||
HI = 'hi', |
||||
} |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
export enum RouteKey { |
||||
Onboarding = 'Onboarding', |
||||
LanguageSelect = 'LanguageSelect', |
||||
Setting = 'Setting', |
||||
Game = 'Game', |
||||
Loading = 'Loading', |
||||
Package = 'Package', |
||||
Questions = 'Questions', |
||||
PrivacyPolicy = 'PrivacyPolicy', |
||||
} |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
export enum StorageKey { |
||||
OnBoarding = 'ONBOARDING_END', |
||||
Language = 'LANG_SELECTED', |
||||
} |
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './interfaces'; |
||||
export * from './enums'; |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
export * from './custom-pack' |
||||
export * from './dare' |
||||
export * from './game-item' |
||||
export * from './page-titles' |
||||
export * from './truth' |
||||
@ -0,0 +1,201 @@
@@ -0,0 +1,201 @@
|
||||
import React, { FC, useEffect, useRef, useState } from 'react' |
||||
import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native' |
||||
import _ from 'lodash' |
||||
import { ModalComponent, Txt } from '../../components' |
||||
import { Font } from '../../typing' |
||||
import { $size } from '../../helpers' |
||||
import { colors } from '../../colors' |
||||
import { AppEvents, appEvents } from '../../events' |
||||
import { useEventsListener } from '../../hooks' |
||||
|
||||
interface IContent { |
||||
title: string |
||||
subtitle: string |
||||
confirmBtnText?: string |
||||
cancelBtnText?: string |
||||
isRedButton?: boolean |
||||
buttons: IContentButton[] |
||||
} |
||||
|
||||
interface IContentButton { |
||||
btnText?: string |
||||
btnStyle?: ViewStyle | ViewStyle[] |
||||
txtColor?: string |
||||
onPress: () => void |
||||
} |
||||
|
||||
interface Params { |
||||
buttons: (() => void)[] |
||||
} |
||||
|
||||
const contentInitial: IContent = { |
||||
title: '', |
||||
subtitle: '', |
||||
cancelBtnText: 'Yes', |
||||
confirmBtnText: 'No', |
||||
buttons: [ |
||||
{ |
||||
onPress: _.noop, |
||||
}, |
||||
], |
||||
} |
||||
|
||||
export const AlertConfirmWidget: FC = () => { |
||||
const settingsConfirmRef = useRef<Params>() |
||||
const [content, setContent] = useState<IContent>(contentInitial) |
||||
const [isVisible, setVisible] = useState(false) |
||||
|
||||
useEventsListener( |
||||
'confirm', |
||||
data => { |
||||
settingsConfirmRef.current = { |
||||
buttons: data?.buttons.map(el => el.onPress), |
||||
} |
||||
setContent({ |
||||
title: data?.title, |
||||
subtitle: data?.subtitle, |
||||
buttons: data?.buttons, |
||||
isRedButton: data.isRedButton, |
||||
confirmBtnText: _.defaultTo(data?.confirmBtnText, 'Yes'), |
||||
cancelBtnText: _.defaultTo(data?.cancelBtnText, 'No'), |
||||
}) |
||||
}, |
||||
[setContent, settingsConfirmRef.current, content], |
||||
) |
||||
|
||||
useEffect(() => { |
||||
if (content?.title) { |
||||
setVisible(true) |
||||
} |
||||
}, [content, settingsConfirmRef.current]) |
||||
|
||||
const close = () => { |
||||
setVisible(false) |
||||
} |
||||
const onConfirm = (index: number) => { |
||||
settingsConfirmRef.current?.buttons[index]() |
||||
close() |
||||
} |
||||
|
||||
const buttonsConfig = (buttonsOnPress: { onPress: () => void }[]) => { |
||||
return [ |
||||
{ |
||||
btnText: content.cancelBtnText, |
||||
btnStyle: styles.button, |
||||
txtColor: colors.textPrimary, |
||||
onPress: buttonsOnPress[0].onPress, |
||||
}, |
||||
{ |
||||
btnText: content.confirmBtnText, |
||||
onPress: buttonsOnPress[1]?.onPress, |
||||
txtColor: colors.textPrimary, |
||||
btnStyle: { |
||||
...styles.button, |
||||
backgroundColor: content?.isRedButton |
||||
? colors.red |
||||
: colors.darkPurple, |
||||
}, |
||||
}, |
||||
] |
||||
} |
||||
|
||||
const buttons = buttonsConfig(content.buttons) |
||||
|
||||
return ( |
||||
<ModalComponent |
||||
coverScreen={false} |
||||
useNativeDriverForBackdrop={true} |
||||
backdropTransitionOutTiming={400} |
||||
hideModalContentWhileAnimating={true} |
||||
backdropColor={'rgba(0,0,0,0.7)'} |
||||
animationIn="pulse" |
||||
isVisible={Boolean(isVisible)} |
||||
onBackdropPress={close} |
||||
onClose={close} |
||||
style={{ alignItems: 'center', justifyContent: 'center' }}> |
||||
<ModalComponent.Container style={styles.container}> |
||||
<View style={styles.content}> |
||||
<Txt style={styles.title}>{content?.title}</Txt> |
||||
|
||||
<Txt style={styles.subtitle}>{content?.subtitle}</Txt> |
||||
</View> |
||||
<View style={styles.buttonsContainer}> |
||||
{buttons.map((el: IContentButton, index: number) => ( |
||||
<TouchableOpacity |
||||
key={index} |
||||
style={el.btnStyle} |
||||
onPress={() => onConfirm(index)}> |
||||
<Txt |
||||
mod="md" |
||||
font={Font.Roboto700} |
||||
color={el.txtColor}> |
||||
{el.btnText} |
||||
</Txt> |
||||
</TouchableOpacity> |
||||
))} |
||||
</View> |
||||
</ModalComponent.Container> |
||||
</ModalComponent> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
borderRadius: 16, |
||||
backgroundColor: colors.lightPurple, |
||||
paddingHorizontal: $size(24), |
||||
paddingVertical: $size(32), |
||||
width: '100%', |
||||
}, |
||||
|
||||
content: { |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
gap: $size(8), |
||||
marginBottom: $size(32), |
||||
}, |
||||
|
||||
title: { |
||||
fontSize: $size(24), |
||||
lineHeight: $size(34), |
||||
color: colors.turquoise, |
||||
textAlign: 'center', |
||||
fontWeight: '700', |
||||
}, |
||||
|
||||
subtitle: { |
||||
textAlign: 'center', |
||||
fontWeight: '700', |
||||
fontSize: $size(18), |
||||
lineHeight: $size(28), |
||||
}, |
||||
|
||||
buttonsContainer: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
columnGap: $size(11), |
||||
}, |
||||
|
||||
red: { |
||||
backgroundColor: colors.red, |
||||
}, |
||||
|
||||
button: { |
||||
width: $size(134), |
||||
height: $size(50), |
||||
paddingHorizontal: $size(16), |
||||
paddingVertical: $size(12), |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
backgroundColor: colors.darkPurple, |
||||
borderRadius: 50, |
||||
}, |
||||
}) |
||||
|
||||
export const Confirm = { |
||||
Component: AlertConfirmWidget, |
||||
Show: (params: AppEvents['confirm']) => { |
||||
appEvents.emit('confirm', params) |
||||
}, |
||||
} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './alert-confirm-widget.component' |
||||
@ -0,0 +1,138 @@
@@ -0,0 +1,138 @@
|
||||
import React, { useEffect, useRef, useState } from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
import _, { size } from 'lodash' |
||||
import { ButtonPrimary, ModalComponent, Txt } from '../../components' |
||||
import { $size } from '../../helpers' |
||||
import { colors } from '../../colors' |
||||
import { AppEvents, appEvents } from '../../events' |
||||
import { useEventsListener } from '../../hooks' |
||||
|
||||
interface IContent { |
||||
title: string |
||||
subtitle: string |
||||
btnText: string |
||||
bottomTxt?: string |
||||
} |
||||
|
||||
const contentInitial: IContent = { |
||||
title: '', |
||||
subtitle: '', |
||||
btnText: 'OK', |
||||
bottomTxt: '', |
||||
} |
||||
|
||||
export const AlertWidget = () => { |
||||
const settingsRef = useRef({ |
||||
onClose: _.noop, |
||||
}) |
||||
const [content, setContent] = useState<IContent>(contentInitial) |
||||
const [isVisible, setVisible] = useState(false) |
||||
|
||||
useEventsListener( |
||||
'alert', |
||||
data => { |
||||
settingsRef.current = { |
||||
onClose: () => data?.onClose, |
||||
} |
||||
setContent({ |
||||
title: data?.title, |
||||
subtitle: data?.subtitle, |
||||
bottomTxt: data?.bottomTxt, |
||||
btnText: _.defaultTo(data.btnText, contentInitial.btnText), |
||||
}) |
||||
}, |
||||
[setContent, settingsRef.current, content], |
||||
) |
||||
|
||||
useEffect(() => { |
||||
if (content?.title) { |
||||
setVisible(true) |
||||
} |
||||
}, [content, settingsRef.current]) |
||||
|
||||
const close = () => { |
||||
setVisible(false) |
||||
} |
||||
|
||||
const onConfirm = () => { |
||||
if (typeof settingsRef.current.onClose === 'function') { |
||||
settingsRef.current.onClose() |
||||
} |
||||
|
||||
close() |
||||
} |
||||
|
||||
return ( |
||||
<ModalComponent |
||||
coverScreen={false} |
||||
useNativeDriverForBackdrop={true} |
||||
backdropTransitionOutTiming={400} |
||||
hideModalContentWhileAnimating={true} |
||||
backdropColor={'#787878'} |
||||
animationIn="pulse" |
||||
isVisible={Boolean(isVisible)} |
||||
onBackdropPress={close} |
||||
onClose={close}> |
||||
<ModalComponent.Container style={styles.container}> |
||||
<View style={styles.content}> |
||||
<Txt style={styles.title}>{content?.title}</Txt> |
||||
|
||||
<Txt style={styles.subtitle}>{content?.subtitle}</Txt> |
||||
</View> |
||||
|
||||
<ButtonPrimary |
||||
onPress={onConfirm} |
||||
mb={content?.bottomTxt ? $size(20) : 0}> |
||||
{content.btnText} |
||||
</ButtonPrimary> |
||||
|
||||
<Txt style={styles.bottomTxt}>{content?.bottomTxt}</Txt> |
||||
</ModalComponent.Container> |
||||
</ModalComponent> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
borderRadius: 16, |
||||
backgroundColor: colors.lightPurple, |
||||
paddingHorizontal: $size(24), |
||||
paddingVertical: $size(32), |
||||
width: '100%', |
||||
}, |
||||
|
||||
content: { |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
gap: $size(8), |
||||
marginBottom: $size(32), |
||||
}, |
||||
|
||||
title: { |
||||
fontSize: $size(24), |
||||
lineHeight: $size(34), |
||||
color: colors.turquoise, |
||||
textAlign: 'center', |
||||
fontWeight: '700', |
||||
}, |
||||
|
||||
subtitle: { |
||||
textAlign: 'center', |
||||
fontWeight: '700', |
||||
fontSize: $size(18), |
||||
lineHeight: $size(28), |
||||
}, |
||||
|
||||
bottomTxt: { |
||||
fontSize: $size(16), |
||||
lineHeight: $size(24), |
||||
textAlign: 'center', |
||||
}, |
||||
}) |
||||
|
||||
export const Alert = { |
||||
Component: AlertWidget, |
||||
Show: (params: AppEvents['alert']) => { |
||||
appEvents.emit('alert', params) |
||||
}, |
||||
} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './alert-widget.component' |
||||
@ -0,0 +1,54 @@
@@ -0,0 +1,54 @@
|
||||
import _ from 'lodash' |
||||
import React, { FC } from 'react' |
||||
import { StyleSheet } from 'react-native' |
||||
import { TouchableOpacity } from 'react-native' |
||||
import { Icon } from '~modules/common' |
||||
import { Txt } from '~modules/common/components/typography' |
||||
import { $size } from '~modules/common/helpers' |
||||
|
||||
interface IProps { |
||||
iconName: string |
||||
onPress: () => void |
||||
label: string |
||||
showBottomBorder: boolean |
||||
} |
||||
export const ActionSheetButtonAtom: FC<IProps> = ({ |
||||
iconName, |
||||
onPress, |
||||
showBottomBorder, |
||||
label, |
||||
}) => { |
||||
const renderIcon = () => { |
||||
if (!iconName) { |
||||
return null |
||||
} |
||||
return <Icon name={iconName} size={$size(28)} color={'#007AFF'} /> |
||||
} |
||||
|
||||
return ( |
||||
<TouchableOpacity |
||||
onPress={onPress} |
||||
style={[ |
||||
styles.container, |
||||
{ borderBottomWidth: showBottomBorder ? 1 : 0 }, |
||||
]}> |
||||
{renderIcon()} |
||||
<Txt style={styles.label} color="#FFFFFF" mod="md"> |
||||
{label} |
||||
</Txt> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
backgroundColor: '#161616', |
||||
padding: $size(10), |
||||
borderBottomColor: 'rgba(212, 212, 212, 0.1)', |
||||
}, |
||||
label: { |
||||
marginLeft: $size(10), |
||||
}, |
||||
}) |
||||
@ -0,0 +1,77 @@
@@ -0,0 +1,77 @@
|
||||
import React, { FC } from 'react' |
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' |
||||
|
||||
import ActionSheet, { SheetProps } from 'react-native-actions-sheet' |
||||
import { Txt } from '~modules/common/components/typography' |
||||
import { SheetManager } from 'react-native-actions-sheet' |
||||
import { $size } from '~modules/common/helpers' |
||||
import { ActionSheetButtonAtom } from './action-sheet-button.atom' |
||||
import _ from 'lodash' |
||||
|
||||
interface IPayloadSheet { |
||||
iconName?: string |
||||
onPress: () => void |
||||
label: string |
||||
} |
||||
|
||||
export const BottomSheetView: FC<SheetProps<IPayloadSheet[]>> = ({ |
||||
sheetId, |
||||
payload, |
||||
}) => { |
||||
const close = () => SheetManager.hide('bottom-sheet') |
||||
|
||||
return ( |
||||
<ActionSheet |
||||
id={sheetId} |
||||
containerStyle={styles.container} |
||||
defaultOverlayOpacity={0.8} |
||||
statusBarTranslucent={true} |
||||
animated> |
||||
<View style={styles.actionContainer}> |
||||
{payload.map((it, index) => { |
||||
const showBottomBorder = payload.length - 1 !== index |
||||
return ( |
||||
<ActionSheetButtonAtom |
||||
key={it.label} |
||||
onPress={it.onPress} |
||||
iconName={it.iconName} |
||||
label={it.label} |
||||
showBottomBorder={showBottomBorder} |
||||
/> |
||||
) |
||||
})} |
||||
</View> |
||||
<TouchableOpacity style={styles.button} onPress={close}> |
||||
<Txt mod="md" style={styles.txtContent}> |
||||
Cancel |
||||
</Txt> |
||||
</TouchableOpacity> |
||||
</ActionSheet> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
button: { |
||||
paddingVertical: $size(18), |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
backgroundColor: '#161616', |
||||
borderRadius: 16, |
||||
}, |
||||
container: { |
||||
backgroundColor: 'rgba(0,0,0,0.1)', |
||||
paddingHorizontal: $size(12), |
||||
paddingBottom: $size(35), |
||||
}, |
||||
txtContent: { |
||||
color: '#FFFFFF', |
||||
fontWeight: '500', |
||||
}, |
||||
actionContainer: { |
||||
borderRadius: 16, |
||||
padding: $size(10), |
||||
backgroundColor: '#161616', |
||||
flexDirection: 'column', |
||||
marginBottom: $size(16), |
||||
}, |
||||
}) |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './bottom-sheet-view.atom' |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
import { registerSheet } from 'react-native-actions-sheet' |
||||
import { BottomSheetView } from './atoms' |
||||
|
||||
registerSheet('bottom-sheet', BottomSheetView) |
||||
|
||||
export {} |
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './alert' |
||||
export * from './alert-confirm' |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './question-block' |
||||
@ -0,0 +1,80 @@
@@ -0,0 +1,80 @@
|
||||
import { StyleSheet, View, Text } from 'react-native' |
||||
import { colors } from '../../common/colors' |
||||
import React, { useEffect, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { GameItem } from '../../common/typing/interfaces/game-item' |
||||
import { $size, Icon, Txt, useAppDispatch, useAppSelector } from '../../common' |
||||
import { |
||||
getShuffledDares, |
||||
getShuffledTruths, |
||||
getStep, |
||||
resetSteps, |
||||
selectShuffled, |
||||
shuffleItems, |
||||
} from '../../../store/slices' |
||||
|
||||
interface IProps { |
||||
isQuestions: boolean |
||||
} |
||||
|
||||
export const QuestionBlock: React.FC<IProps> = ({ isQuestions }) => { |
||||
const dispatch = useAppDispatch() |
||||
const { i18n } = useTranslation() |
||||
const lang = i18n.language |
||||
|
||||
const currentStep = useAppSelector(getStep) |
||||
|
||||
const shuffledTruths = useAppSelector(getShuffledTruths) |
||||
const shuffledDares = useAppSelector(getShuffledDares) |
||||
|
||||
const gameItems = useAppSelector(selectShuffled) |
||||
|
||||
const dares = gameItems.filter(dare => dare.isDare) |
||||
const questions = gameItems.filter(question => !question.isDare) |
||||
|
||||
console.log(dares) |
||||
|
||||
useEffect(() => { |
||||
if (currentStep >= questions.length) { |
||||
dispatch(resetSteps()) |
||||
dispatch(shuffleItems()) |
||||
} |
||||
if (currentStep >= dares.length) { |
||||
dispatch(resetSteps()) |
||||
dispatch(shuffleItems()) |
||||
} |
||||
}, [currentStep]) |
||||
|
||||
return ( |
||||
<View style={styles.container}> |
||||
<Icon name="magic-star" size={$size(24)} style={styles.starIcon} /> |
||||
<Txt style={styles.text}> |
||||
{currentStep < questions.length && |
||||
isQuestions && |
||||
questions[currentStep][lang as keyof GameItem]} |
||||
{currentStep < dares.length && |
||||
!isQuestions && |
||||
dares[currentStep][lang as keyof GameItem]} |
||||
</Txt> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
paddingHorizontal: $size(16), |
||||
paddingVertical: $size(32), |
||||
backgroundColor: colors.darkPurple, |
||||
borderRadius: 20, |
||||
alignItems: 'center', |
||||
}, |
||||
starIcon: { |
||||
marginBottom: $size(14), |
||||
}, |
||||
text: { |
||||
color: colors.purple, |
||||
fontSize: $size(22), |
||||
lineHeight: $size(32), |
||||
textAlign: 'center', |
||||
}, |
||||
}) |
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './screens' |
||||
export * from './components' |
||||
@ -1,60 +0,0 @@
@@ -1,60 +0,0 @@
|
||||
import React, {FC} from 'react'; |
||||
import { |
||||
colors, |
||||
defaultPackages, |
||||
Header, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
useNav, |
||||
} from '../../shared'; |
||||
import {ScrollView} from 'react-native-gesture-handler'; |
||||
import {StyleSheet, View} from 'react-native'; |
||||
import {CustomPackage} from '../../package/atoms/create-custom-package.atom'; |
||||
import {PackagesPageSeparator} from '../../package/atoms/packages-page-separator.atom'; |
||||
import {PackagesItem} from '../../package/components/packages-item.component'; |
||||
import {useTranslation} from 'react-i18next'; |
||||
|
||||
export const SelectPackages: FC = () => { |
||||
const nav = useNav(); |
||||
const {i18n} = useTranslation(); |
||||
const lang = i18n.language; |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
backgroundColor={colors.primaryColor} |
||||
backgroundStatusBar={colors.primaryColor} |
||||
headerComponent={ |
||||
<Header |
||||
rightIcon="setting" |
||||
onPressRight={() => nav.navigate(RouteKey.Setting)} |
||||
/> |
||||
}> |
||||
<ScrollView contentContainerStyle={styles.scrollView}> |
||||
<View style={styles.container}> |
||||
{defaultPackages.map((item: any, index) => ( |
||||
<PackagesItem |
||||
title={item.title[lang]} |
||||
description={item.description[lang]} |
||||
questions={item.questions} |
||||
actions={item.actions} |
||||
image={item.image} |
||||
key={index} |
||||
/> |
||||
))} |
||||
<PackagesPageSeparator /> |
||||
<CustomPackage /> |
||||
</View> |
||||
</ScrollView> |
||||
</ScreenLayout> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
}, |
||||
scrollView: { |
||||
paddingBottom: 30, |
||||
paddingHorizontal: 5, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,102 @@
@@ -0,0 +1,102 @@
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' |
||||
import { |
||||
$size, |
||||
ButtonPrimary, |
||||
ButtonWithIcon, |
||||
colors, |
||||
Header, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
Txt, |
||||
useNav, |
||||
} from '../../common' |
||||
import React, { FC } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { useRoute } from '@react-navigation/native' |
||||
|
||||
export const GameScreen: FC = () => { |
||||
const { t } = useTranslation() |
||||
const nav = useNav() |
||||
|
||||
const { params }: any = useRoute() |
||||
const packageName = params.packageName |
||||
|
||||
const goBack = () => { |
||||
nav.navigate(RouteKey.Package) |
||||
} |
||||
|
||||
const randomGame = () => { |
||||
const isQuestions = Math.random() < 0.5 |
||||
nav.navigate(RouteKey.Questions, { isQuestions, packageName }) |
||||
} |
||||
|
||||
const onChooseQuestion = () => { |
||||
nav.navigate(RouteKey.Questions, { isQuestions: true, packageName }) |
||||
} |
||||
|
||||
const onChooseDare = () => { |
||||
nav.navigate(RouteKey.Questions, { packageName }) |
||||
} |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
headerComponent={ |
||||
<Header |
||||
leftIcon="arrow" |
||||
onPressLeft={() => goBack()} |
||||
title={packageName} |
||||
gamer |
||||
/> |
||||
}> |
||||
<Txt mod="xxl" style={styles.playerName}> |
||||
Player |
||||
</Txt> |
||||
<View style={styles.wrapButtons}> |
||||
<ButtonPrimary |
||||
width={188} |
||||
style={styles.gameButton} |
||||
styleTxt={styles.styleTxtBtn} |
||||
onPress={onChooseQuestion}> |
||||
{t('buttonsTranslation.truth')} |
||||
</ButtonPrimary> |
||||
<TouchableOpacity onPress={randomGame}> |
||||
<Txt mod="lg">{t('buttonsTranslation.random')}</Txt> |
||||
</TouchableOpacity> |
||||
<ButtonPrimary |
||||
width={188} |
||||
styleTxt={styles.styleTxtBtn} |
||||
style={styles.gameButton} |
||||
onPress={onChooseDare}> |
||||
{t('buttonsTranslation.dare')} |
||||
</ButtonPrimary> |
||||
</View> |
||||
</ScreenLayout> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
playerName: { |
||||
fontWeight: '700', |
||||
textAlign: 'center', |
||||
marginBottom: $size(122), |
||||
}, |
||||
wrapButtons: { |
||||
alignItems: 'center', |
||||
justifyContent: 'space-between', |
||||
rowGap: $size(40), |
||||
}, |
||||
gameButton: { |
||||
height: $size(66), |
||||
width: 188, |
||||
borderRadius: 40, |
||||
backgroundColor: colors.primaryColor, |
||||
borderWidth: 1, |
||||
borderColor: colors.darkPurple, |
||||
}, |
||||
styleTxtBtn: { |
||||
color: colors.red, |
||||
fontWeight: '800', |
||||
fontSize: $size(36), |
||||
lineHeight: $size(46), |
||||
}, |
||||
}) |
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './game.screen' |
||||
export * from './questions.screen' |
||||
@ -0,0 +1,79 @@
@@ -0,0 +1,79 @@
|
||||
import React from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
import { useRoute } from '@react-navigation/native' |
||||
import { |
||||
$size, |
||||
ButtonWithIcon, |
||||
Header, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
Txt, |
||||
useAppDispatch, |
||||
useNav, |
||||
} from '../../common' |
||||
import { nextStep, resetSteps, shuffleItems } from '../../../store/slices' |
||||
import { QuestionBlock } from '../components' |
||||
|
||||
export const QuestionsScreen: React.FC = () => { |
||||
const nav = useNav() |
||||
const { params }: any = useRoute() |
||||
|
||||
const { packageName, isQuestions } = params |
||||
|
||||
const dispatch = useAppDispatch() |
||||
|
||||
const goBack = () => { |
||||
nav.navigate(RouteKey.Game, { packageName }) |
||||
} |
||||
|
||||
const goGameScreen = () => { |
||||
nav.navigate(RouteKey.Package) |
||||
dispatch(nextStep()) |
||||
} |
||||
|
||||
const refreshList = () => { |
||||
dispatch(shuffleItems()) |
||||
dispatch(resetSteps()) |
||||
} |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
headerComponent={ |
||||
<Header |
||||
leftIcon="arrow" |
||||
gamer |
||||
onPressLeft={() => goBack()} |
||||
title={packageName} |
||||
/> |
||||
}> |
||||
<View style={{ flex: 1 }}> |
||||
<Txt mod="xxl" style={styles.playerName}> |
||||
Player |
||||
</Txt> |
||||
|
||||
<QuestionBlock isQuestions={isQuestions} /> |
||||
|
||||
<View style={styles.buttons}> |
||||
<ButtonWithIcon iconName="union" onPress={refreshList} /> |
||||
<ButtonWithIcon iconName="play" onPress={goGameScreen} /> |
||||
<ButtonWithIcon iconName="add-plus" onPress={() => null} /> |
||||
</View> |
||||
</View> |
||||
</ScreenLayout> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
playerName: { |
||||
fontWeight: '700', |
||||
textAlign: 'center', |
||||
marginBottom: $size(88), |
||||
}, |
||||
buttons: { |
||||
alignItems: 'center', |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginBottom: $size(66), |
||||
marginTop: 'auto', |
||||
}, |
||||
}) |
||||
@ -1,58 +0,0 @@
@@ -1,58 +0,0 @@
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import React from 'react'; |
||||
import {useTranslation} from 'react-i18next'; |
||||
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native'; |
||||
import {colors, Icon} from '../../shared'; |
||||
|
||||
export const CustomPackage = () => { |
||||
const {t, i18n} = useTranslation(); |
||||
|
||||
|
||||
return ( |
||||
<TouchableOpacity style={style.container}> |
||||
<View style={{flexDirection: 'row'}}> |
||||
<View style={style.iconContainer}> |
||||
<Icon name="lock" size={22} color="white" /> |
||||
</View> |
||||
<View style={style.textContainer}> |
||||
<Text style={style.title}>{t('customPack.title')}</Text> |
||||
<Text style={style.description}> |
||||
{t('customPack.description')} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
</TouchableOpacity> |
||||
); |
||||
}; |
||||
const style = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: '#99EDCC', |
||||
borderRadius: 20, |
||||
padding: 16, |
||||
}, |
||||
textContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
fontSize: 22, |
||||
lineHeight: 32, |
||||
color: '#2C205C', |
||||
}, |
||||
description: { |
||||
fontWeight: '400', |
||||
fontSize: 16, |
||||
lineHeight: 24, |
||||
color: '#2C205C', |
||||
}, |
||||
iconContainer: { |
||||
backgroundColor: colors.primaryColor, |
||||
padding: 10, |
||||
width: 50, |
||||
height: 50, |
||||
borderRadius: 20, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
marginRight: 16, |
||||
}, |
||||
}); |
||||
@ -1,35 +0,0 @@
@@ -1,35 +0,0 @@
|
||||
import React from 'react'; |
||||
import {Image, StyleSheet, Text, View} from 'react-native'; |
||||
|
||||
export const PackagesPageSeparator = () => { |
||||
return ( |
||||
<View style={style.container}> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
<Text style={style.text}>OR</Text> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const style = StyleSheet.create({ |
||||
container: { |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
justifyContent: 'space-between', |
||||
marginBottom: 20, |
||||
}, |
||||
imageContainer: { |
||||
width: 140, |
||||
overflow: 'hidden', |
||||
}, |
||||
text: { |
||||
textAlign: 'center', |
||||
color: '#9AC4F8', |
||||
fontSize: 14, |
||||
}, |
||||
}); |
||||
@ -1,99 +0,0 @@
@@ -1,99 +0,0 @@
|
||||
import React, {FC} from 'react'; |
||||
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native'; |
||||
import {useAppDispatch} from '../../../store/hooks'; |
||||
import {resetSteps} from '../../services/current-step/current-step-slice'; |
||||
import {shuffleDares} from '../../services/dares/dares-slice'; |
||||
import {shuffleTruths} from '../../services/truths/truth-slice'; |
||||
import {Icon, RouteKey, useNav} from '../../shared'; |
||||
|
||||
interface IType { |
||||
[key: string]: string; |
||||
} |
||||
interface IPackage { |
||||
title: string; |
||||
description: string; |
||||
image: JSX.Element; |
||||
questions: IType[]; |
||||
actions: IType[]; |
||||
} |
||||
|
||||
export const PackagesItem: FC<IPackage> = ({title, description, image}) => { |
||||
const nav = useNav(); |
||||
const dispatch = useAppDispatch(); |
||||
|
||||
const play = () => { |
||||
nav.navigate(RouteKey.Game, {title}); |
||||
dispatch(resetSteps()); |
||||
dispatch(shuffleTruths()); |
||||
dispatch(shuffleDares()); |
||||
}; |
||||
|
||||
return ( |
||||
<View style={style.container}> |
||||
<View style={style.flex}> |
||||
<View style={style.imgContainer}>{image}</View> |
||||
<View style={style.textContainer}> |
||||
<Text style={style.title}>{title}</Text> |
||||
<Text style={style.description}>{description}</Text> |
||||
</View> |
||||
</View> |
||||
<TouchableOpacity style={style.play} onPress={play}> |
||||
<Icon name="play" size={20} color="white" /> |
||||
</TouchableOpacity> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const style = StyleSheet.create({ |
||||
play: { |
||||
flex: 0, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
backgroundColor: '#E36588', |
||||
borderRadius: 60, |
||||
width: 50, |
||||
height: 50, |
||||
position: 'absolute', |
||||
top: '50%', |
||||
right: -25, |
||||
transform: [{translateY: -10}], |
||||
}, |
||||
container: { |
||||
backgroundColor: '#2C205C', |
||||
borderRadius: 20, |
||||
paddingVertical: 16, |
||||
paddingLeft: 16, |
||||
position: 'relative', |
||||
width: '94%', |
||||
marginBottom: 16, |
||||
}, |
||||
flex: { |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
fontSize: 22, |
||||
lineHeight: 32, |
||||
color: '#9AC4F8', |
||||
textTransform: 'capitalize', |
||||
}, |
||||
description: { |
||||
fontWeight: '400', |
||||
fontSize: 16, |
||||
lineHeight: 24, |
||||
color: '#7669C2', |
||||
}, |
||||
textContainer: { |
||||
width: 220, |
||||
marginLeft: 12, |
||||
alignItems: 'flex-start', |
||||
}, |
||||
imgContainer: { |
||||
backgroundColor: '#37296B', |
||||
width: 50, |
||||
height: 50, |
||||
borderRadius: 10, |
||||
overflow: 'hidden', |
||||
}, |
||||
}); |
||||
@ -1 +0,0 @@
@@ -1 +0,0 @@
|
||||
export * from './components/packages-list'; |
||||
@ -0,0 +1,55 @@
@@ -0,0 +1,55 @@
|
||||
import React from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { StyleSheet, TouchableOpacity, View } from 'react-native' |
||||
import { $size, colors, Icon, Txt } from '../../common' |
||||
|
||||
export const CustomPackage = () => { |
||||
const { t } = useTranslation() |
||||
|
||||
return ( |
||||
<TouchableOpacity style={style.container}> |
||||
<View style={{ flexDirection: 'row' }}> |
||||
<View style={style.iconContainer}> |
||||
<Icon name="lock" size={$size(24)} color="white" /> |
||||
</View> |
||||
<View style={style.textContainer}> |
||||
<Txt style={style.title}>{t('customPack.title')}</Txt> |
||||
<Txt style={style.description}> |
||||
{t('customPack.description')} |
||||
</Txt> |
||||
</View> |
||||
</View> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
const style = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: '#99EDCC', |
||||
borderRadius: 20, |
||||
padding: $size(16), |
||||
}, |
||||
textContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
fontSize: $size(22), |
||||
lineHeight: $size(32), |
||||
color: colors.darkPurple, |
||||
}, |
||||
description: { |
||||
fontSize: $size(16), |
||||
lineHeight: $size(24), |
||||
color: colors.darkPurple, |
||||
}, |
||||
iconContainer: { |
||||
backgroundColor: colors.primaryColor, |
||||
padding: $size(10), |
||||
width: $size(50), |
||||
height: $size(50), |
||||
borderRadius: 20, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
marginRight: $size(16), |
||||
}, |
||||
}) |
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
export * from './create-custom-package.atom' |
||||
export * from './packages-page-separator.atom' |
||||
@ -0,0 +1,35 @@
@@ -0,0 +1,35 @@
|
||||
import React from 'react' |
||||
import { Image, StyleSheet, Text, View } from 'react-native' |
||||
import { $size, Txt, colors } from '../../common' |
||||
|
||||
export const PackagesPageSeparator = () => { |
||||
return ( |
||||
<View style={styles.container}> |
||||
<View style={styles.dashedLine}></View> |
||||
<Txt style={styles.text}>OR</Txt> |
||||
<View style={styles.dashedLine}></View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
marginBottom: $size(20), |
||||
}, |
||||
dashedLine: { |
||||
borderWidth: 1, |
||||
borderStyle: 'dashed', |
||||
borderColor: 'black', |
||||
flex: 1, |
||||
backgroundColor: colors.blue, |
||||
}, |
||||
text: { |
||||
textAlign: 'center', |
||||
color: colors.blue, |
||||
fontSize: $size(14), |
||||
fontWeight: '900', |
||||
marginHorizontal: 16, |
||||
}, |
||||
}) |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './packages-item.component' |
||||
@ -0,0 +1,102 @@
@@ -0,0 +1,102 @@
|
||||
import React, { FC } from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
import { |
||||
$size, |
||||
ButtonWithIcon, |
||||
RouteKey, |
||||
Txt, |
||||
colors, |
||||
useAppDispatch, |
||||
useNav, |
||||
} from '../../common' |
||||
import { resetSteps, shuffleDares, shuffleTruths } from '../../../store/slices' |
||||
|
||||
interface IType { |
||||
[key: string]: string |
||||
} |
||||
interface IPackage { |
||||
packageName: string |
||||
description: string |
||||
image: JSX.Element |
||||
questions: IType[] |
||||
actions: IType[] |
||||
} |
||||
|
||||
export const PackageItem: FC<IPackage> = ({ |
||||
packageName, |
||||
description, |
||||
image, |
||||
}) => { |
||||
const nav = useNav() |
||||
const dispatch = useAppDispatch() |
||||
|
||||
const play = () => { |
||||
nav.navigate(RouteKey.Game, { packageName }) |
||||
dispatch(resetSteps()) |
||||
dispatch(shuffleTruths()) |
||||
dispatch(shuffleDares()) |
||||
} |
||||
|
||||
return ( |
||||
<View style={styles.container}> |
||||
<View style={styles.flex}> |
||||
<View style={styles.imgContainer}>{image}</View> |
||||
<View style={styles.textContainer}> |
||||
<Txt mod="xxl" style={styles.title}> |
||||
{packageName} |
||||
</Txt> |
||||
<Txt style={styles.description}>{description}</Txt> |
||||
</View> |
||||
</View> |
||||
<ButtonWithIcon |
||||
iconName="play" |
||||
onPress={play} |
||||
styleBtn={styles.play} |
||||
/> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: '#2C205C', |
||||
borderRadius: 20, |
||||
padding: $size(16), |
||||
position: 'relative', |
||||
width: '94%', |
||||
marginBottom: $size(16), |
||||
}, |
||||
flex: { |
||||
flexDirection: 'row', |
||||
marginRight: 50, |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
color: colors.blue, |
||||
marginBottom: $size(5), |
||||
}, |
||||
description: { |
||||
marginBottom: $size(5), |
||||
color: colors.secondaryText, |
||||
fontSize: $size(16), |
||||
lineHeight: $size(24), |
||||
}, |
||||
textContainer: { |
||||
marginLeft: $size(12), |
||||
}, |
||||
imgContainer: { |
||||
backgroundColor: colors.primaryColor, |
||||
width: $size(40), |
||||
height: $size(40), |
||||
borderRadius: 10, |
||||
overflow: 'hidden', |
||||
}, |
||||
play: { |
||||
borderRadius: 60, |
||||
width: $size(50), |
||||
position: 'absolute', |
||||
top: '50%', |
||||
right: -25, |
||||
transform: [{ translateY: -10 }], |
||||
}, |
||||
}) |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue