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 @@ |
|||||||
module.exports = { |
module.exports = { |
||||||
bracketSpacing: false, |
bracketSpacing: true, |
||||||
jsxBracketSameLine: true, |
bracketSameLine: true, |
||||||
singleQuote: true, |
singleQuote: true, |
||||||
trailingComma: 'all', |
trailingComma: 'all', |
||||||
arrowParens: 'avoid', |
arrowParens: 'avoid', |
||||||
|
tabWidth: 4, |
||||||
|
useTabs: true, |
||||||
|
semi: false, |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,26 +1,32 @@ |
|||||||
import React, {useEffect} from 'react'; |
import React, { useEffect } from 'react' |
||||||
import SplashScreen from 'react-native-splash-screen'; |
import SplashScreen from 'react-native-splash-screen' |
||||||
import {Navigation} from './src/module/root'; |
import { Root } from './src/module/root' |
||||||
import './src/i18n/index'; |
import './src/i18n/index' |
||||||
import {Provider} from 'react-redux'; |
import { Provider } from 'react-redux' |
||||||
import {store} from './src/store/store'; |
import { store } from './src/store/store' |
||||||
import {GestureHandlerRootView} from 'react-native-gesture-handler'; |
import { GestureHandlerRootView } from 'react-native-gesture-handler' |
||||||
|
import { NavigationContainer } from '@react-navigation/native' |
||||||
if (__DEV__) { |
import { |
||||||
import('./ReactotronConfig').then(() => console.log('Reactotron Configured')); |
SafeAreaProvider, |
||||||
} |
initialWindowMetrics, |
||||||
|
} from 'react-native-safe-area-context' |
||||||
|
|
||||||
const App = () => { |
const App = () => { |
||||||
useEffect(() => { |
useEffect(() => { |
||||||
SplashScreen.hide(); |
SplashScreen.hide() |
||||||
}, []); |
}, []) |
||||||
return ( |
|
||||||
<GestureHandlerRootView style={{flex: 1}}> |
return ( |
||||||
<Provider store={store}> |
<GestureHandlerRootView style={{ flex: 1 }}> |
||||||
<Navigation /> |
<NavigationContainer> |
||||||
</Provider> |
<SafeAreaProvider initialMetrics={initialWindowMetrics}> |
||||||
</GestureHandlerRootView> |
<Provider store={store}> |
||||||
); |
<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 @@ |
|||||||
|
{ |
||||||
|
"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 @@ |
|||||||
|
{ |
||||||
|
"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 @@ |
|||||||
module.exports = { |
module.exports = { |
||||||
assets: ['./src/assets/resources/fonts'], |
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 @@ |
|||||||
|
{ |
||||||
|
"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,31 +1,26 @@ |
|||||||
import i18n from 'i18next'; |
import i18n from 'i18next' |
||||||
import {initReactI18next} from 'react-i18next'; |
import { initReactI18next } from 'react-i18next' |
||||||
import AsyncStoragePlugin from 'i18next-react-native-async-storage'; |
import AsyncStoragePlugin from 'i18next-react-native-async-storage' |
||||||
import * as locales from './locales'; |
import * as locales from './locales' |
||||||
export enum LangKeys { |
import { Language } from '../module/common' |
||||||
EN = 'en', |
|
||||||
UA = 'ua', |
|
||||||
HI = 'hi', |
|
||||||
} |
|
||||||
|
|
||||||
i18n |
i18n.use(initReactI18next) |
||||||
.use(initReactI18next) |
.use(AsyncStoragePlugin()) |
||||||
.use(AsyncStoragePlugin()) |
.init({ |
||||||
.init({ |
compatibilityJSON: 'v3', |
||||||
compatibilityJSON: 'v3', |
fallbackLng: 'en', |
||||||
fallbackLng: 'en', |
debug: false, |
||||||
debug: false, |
|
||||||
|
|
||||||
interpolation: { |
interpolation: { |
||||||
escapeValue: false, |
escapeValue: false, |
||||||
}, |
}, |
||||||
|
|
||||||
resources: { |
resources: { |
||||||
[LangKeys.EN]: {translation: locales.en}, |
[Language.EN]: { translation: locales.en }, |
||||||
[LangKeys.UA]: {translation: locales.ua}, |
[Language.UA]: { translation: locales.ua }, |
||||||
[LangKeys.HI]: {translation: locales.hi}, |
[Language.HI]: { translation: locales.hi }, |
||||||
}, |
}, |
||||||
react: { |
react: { |
||||||
useSuspense: false, |
useSuspense: false, |
||||||
}, |
}, |
||||||
}); |
}) |
||||||
|
|||||||
@ -1,12 +1,12 @@ |
|||||||
import { CustomPack } from '../../module/shared/interfaces/custom-pack'; |
import { CustomPack, PageTitles } from '../../module/common' |
||||||
import { PageTitles } from '../../module/shared/interfaces/page-titles'; |
import { Buttons } from './buttons.types' |
||||||
import { Buttons } from './buttons.types'; |
import { OnBoardingLocale } from './on-boarding.types' |
||||||
import {OnBoardingLocale} from './on-boarding.types'; |
import { SettingLocale } from './settings.types' |
||||||
import {SettingLocale} from './settings.types'; |
|
||||||
export interface MainLocaleModule { |
export interface MainLocaleModule { |
||||||
stepTranslation: OnBoardingLocale.OnboardingSteps; |
stepTranslation: OnBoardingLocale.OnboardingSteps |
||||||
settingTranslation: SettingLocale.Core; |
settingTranslation: SettingLocale.Core |
||||||
buttonsTranslation: Buttons; |
buttonsTranslation: Buttons |
||||||
customPack: CustomPack; |
customPack: CustomPack |
||||||
pageTitles: PageTitles; |
pageTitles: PageTitles |
||||||
} |
} |
||||||
|
|||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './go-back.component' |
||||||
|
export * from './button-primary.component' |
||||||
|
export * from './button-with-icon' |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './icon.component' |
||||||
@ -1,4 +1,7 @@ |
|||||||
export * from './Icon'; |
export * from './icon'; |
||||||
export * from './buttons'; |
export * from './buttons'; |
||||||
export * from './header'; |
export * from './header'; |
||||||
export * from './layout'; |
export * from './layout'; |
||||||
|
export * from './modal'; |
||||||
|
export * from './txt'; |
||||||
|
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export * from './screen-layout-content.component' |
||||||
|
export * from './screen-layout.component' |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './header-modal.atom' |
||||||
|
export * from './body-modal.atom' |
||||||
|
export * from './footer-modal.atom' |
||||||
|
export * from './container-modal.atom' |
||||||
@ -0,0 +1 @@ |
|||||||
|
export * from './modal' |
||||||
@ -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 @@ |
|||||||
|
export * from './txt.component' |
||||||
@ -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 @@ |
|||||||
|
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,6 @@ |
|||||||
|
import { Dimensions } from 'react-native' |
||||||
|
|
||||||
|
export const getDimensions = () => { |
||||||
|
const { height, width } = Dimensions.get('screen') |
||||||
|
return { height, width } |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export * from './dimensions.helper'; |
||||||
|
export * from './style.helper'; |
||||||
|
|
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { AppDispatch } from '../../../store/store' |
||||||
|
|
||||||
|
export const useAppDispatch = () => useDispatch<AppDispatch>() |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
/* 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 @@ |
|||||||
|
export * from './global-container.tool' |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export enum Font { |
||||||
|
Roboto400 = 'Roboto-Regular', |
||||||
|
Roboto700 = 'Roboto-Bold', |
||||||
|
} |
||||||
@ -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 @@ |
|||||||
|
export enum Language { |
||||||
|
EN = 'en', |
||||||
|
UA = 'ua', |
||||||
|
HI = 'hi', |
||||||
|
} |
||||||
@ -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 @@ |
|||||||
|
export enum StorageKey { |
||||||
|
OnBoarding = 'ONBOARDING_END', |
||||||
|
Language = 'LANG_SELECTED', |
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export * from './interfaces'; |
||||||
|
export * from './enums'; |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './alert-confirm-widget.component' |
||||||
@ -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 @@ |
|||||||
|
export * from './alert-widget.component' |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './bottom-sheet-view.atom' |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import { registerSheet } from 'react-native-actions-sheet' |
||||||
|
import { BottomSheetView } from './atoms' |
||||||
|
|
||||||
|
registerSheet('bottom-sheet', BottomSheetView) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export * from './alert' |
||||||
|
export * from './alert-confirm' |
||||||
@ -0,0 +1 @@ |
|||||||
|
export * from './question-block' |
||||||
@ -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 @@ |
|||||||
|
export * from './screens' |
||||||
|
export * from './components' |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from './game.screen' |
||||||
|
export * from './questions.screen' |
||||||
@ -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 @@ |
|||||||
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 @@ |
|||||||
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 @@ |
|||||||
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 @@ |
|||||||
export * from './components/packages-list'; |
|
||||||
@ -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 @@ |
|||||||
|
export * from './create-custom-package.atom' |
||||||
|
export * from './packages-page-separator.atom' |
||||||
@ -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 @@ |
|||||||
|
export * from './packages-item.component' |
||||||
@ -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