From 32d0bb9e4524dae48083c9823d19fc6923c0e801 Mon Sep 17 00:00:00 2001 From: Dario Dumlijan Date: Tue, 19 Mar 2024 00:16:17 +0100 Subject: [PATCH] refactor: Font enum, fix keep rewards, fix some styling --- app/README.md | 4 +- .../blocks/errors/ErrorBoundary.tsx | 9 ++-- .../elements/inputs/TimeSignatureSelect.tsx | 42 ++++++++++--------- .../elements/misc/CountdownTimer.tsx | 2 +- app/components/screens/Guide.tsx | 17 ++++---- app/components/screens/Settings.tsx | 7 ++-- app/styles/bottom.ts | 5 ++- app/styles/guide.ts | 7 ++-- app/styles/home.ts | 3 +- app/styles/index.ts | 4 ++ app/styles/inputs.ts | 40 +++++++++--------- app/styles/main.ts | 3 +- app/styles/modals.ts | 9 ++-- app/styles/navigation.ts | 5 ++- app/styles/notifications.ts | 7 ++-- app/styles/rewarded.ts | 17 ++++---- app/styles/settings.ts | 5 ++- 17 files changed, 103 insertions(+), 83 deletions(-) create mode 100644 app/styles/index.ts diff --git a/app/README.md b/app/README.md index 2d0f0d6..608b415 100644 --- a/app/README.md +++ b/app/README.md @@ -55,8 +55,8 @@ Add `env.json` file to root directory "RELEASE_KEYSTORE_KEY_ALIAS": "" }, "CONFIG": { - "KEEP_REWARDS": 6, - "RESET_REWARDS": 24, + "KEEP_REWARDS": 6, // hours + "RESET_REWARDS": 24, // hours "ADS": true, "AD_IDS": { "BANNER": { diff --git a/app/components/blocks/errors/ErrorBoundary.tsx b/app/components/blocks/errors/ErrorBoundary.tsx index ad6bed3..1d9002a 100644 --- a/app/components/blocks/errors/ErrorBoundary.tsx +++ b/app/components/blocks/errors/ErrorBoundary.tsx @@ -6,6 +6,7 @@ import { import CodePush from 'react-native-code-push'; import AsyncStorage from '@react-native-async-storage/async-storage'; import Emoji from '../../../assets/icons/Emoji'; +import { Font } from '../../../styles'; import colors from '../../../styles/colors'; import { deviceInfo } from '../../../utils'; import LightBackground from '../../elements/backgrounds/LightBackground'; @@ -36,14 +37,14 @@ const styles = StyleSheet.create({ }, title: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 24, marginBottom: 10, textAlign: 'center', }, text: { color: colors.black, - fontFamily: 'Montserrat-Regular', + fontFamily: Font.regular, fontSize: 16, marginVertical: 16, textAlign: 'left', @@ -66,13 +67,13 @@ const styles = StyleSheet.create({ }, buttonText: { color: colors.white, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 16, textAlign: 'center', }, error: { color: colors.red, - fontFamily: 'Montserrat-Regular', + fontFamily: Font.regular, fontSize: 12, marginVertical: 12, textAlign: 'left', diff --git a/app/components/elements/inputs/TimeSignatureSelect.tsx b/app/components/elements/inputs/TimeSignatureSelect.tsx index 8a9d297..49a96dd 100644 --- a/app/components/elements/inputs/TimeSignatureSelect.tsx +++ b/app/components/elements/inputs/TimeSignatureSelect.tsx @@ -139,7 +139,7 @@ function TimeSignatureSelect(props: Props) { - {option.label} + • {option.label} {option.disabled && ( - {map(timeSignatures, (sig: TimeSig, key: number) => ( - handleSelect(option, sig)} - > - { + const active = isActive(option, sig); + + return ( + handleSelect(option, sig)} > - {sig.label} - - - ))} + + {sig.label} + + + ); + })} ))} diff --git a/app/components/elements/misc/CountdownTimer.tsx b/app/components/elements/misc/CountdownTimer.tsx index 4fc3e17..d8dc22d 100644 --- a/app/components/elements/misc/CountdownTimer.tsx +++ b/app/components/elements/misc/CountdownTimer.tsx @@ -6,7 +6,7 @@ import { floor } from 'lodash'; type Props = { style?: Object, countdownFrom: number | null, - onChange?: Function, + onChange?: (millisecondsLeft: number) => void, isHidden?: boolean, }; diff --git a/app/components/screens/Guide.tsx b/app/components/screens/Guide.tsx index b220e39..6d43205 100644 --- a/app/components/screens/Guide.tsx +++ b/app/components/screens/Guide.tsx @@ -18,6 +18,7 @@ import MidiFile from '../../assets/img/midiFile.png'; import MidiFileLogic from '../../assets/img/midiFile_Logic.png'; import useLocale from '../../locales'; import { actions } from '../../store/globalStore'; +import { Font } from '../../styles'; import bottomStyle from '../../styles/bottom'; import colors from '../../styles/colors'; import guideStyle from '../../styles/guide'; @@ -167,7 +168,7 @@ export function Guide() { {t('guide.section_2.paragraph_2')} {t('guide.section_3.title')} - + {t('guide.section_3.subsection_1.title')} {t('guide.section_3.subsection_1.paragraph_1')} @@ -196,7 +197,7 @@ export function Guide() { {t('guide.section_3.subsection_1.paragraph_2')} - + {t('guide.section_3.subsection_2.title')} {t('guide.section_3.subsection_2.paragraph_1')} - + {t('guide.section_3.subsection_3.title')} {t('guide.section_3.subsection_3.paragraph_1')} - + {t('guide.section_3.subsection_3.bold_1')} {t('guide.section_3.subsection_3.paragraph_2')} @@ -267,7 +268,7 @@ export function Guide() { {t('guide.section_4.title')} {t('guide.section_4.paragraph_1')} - + {t('guide.section_4.paragraph_2')} {t('guide.section_4.paragraph_3')} @@ -291,7 +292,7 @@ export function Guide() { {t('guide.section_5.paragraph_1')} @@ -119,7 +120,7 @@ function Settings() { }; const handleCountdown = (currentTime: number) => { - const isBelowThreshold = currentTime <= resetRewardsHours; + const isBelowThreshold = currentTime <= keepRewardsHours; if (isBelowThreshold && !rewardsAreRefreshable) setRewardsAreRefreshable(true); }; diff --git a/app/styles/bottom.ts b/app/styles/bottom.ts index 6e563d5..9c46f4c 100644 --- a/app/styles/bottom.ts +++ b/app/styles/bottom.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet } from '../utils'; @@ -43,7 +44,7 @@ const bottomStyle = StyleSheet.create({ }, presetText: { color: colors.white, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 18 : 14, lineHeight: isTablet ? 20 : 16, textAlign: 'center', @@ -74,7 +75,7 @@ const bottomStyle = StyleSheet.create({ }, btnPrimaryText: { color: colors.white, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 20 : 16, textAlign: 'center', }, diff --git a/app/styles/guide.ts b/app/styles/guide.ts index eba4bbb..3cd5f50 100644 --- a/app/styles/guide.ts +++ b/app/styles/guide.ts @@ -1,11 +1,12 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet, isiPhone } from '../utils'; const guideStyle = StyleSheet.create({ guideTitle: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 22, textAlign: 'center', }, @@ -18,7 +19,7 @@ const guideStyle = StyleSheet.create({ }, guideSub: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginBottom: 5, marginTop: 10, @@ -44,7 +45,7 @@ const guideStyle = StyleSheet.create({ }, guideTxt: { color: colors.primaryDark, - fontFamily: 'Montserrat-Regular', + fontFamily: Font.regular, fontSize: 16, textAlign: 'left', }, diff --git a/app/styles/home.ts b/app/styles/home.ts index 9a945a3..c7046fe 100644 --- a/app/styles/home.ts +++ b/app/styles/home.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet } from '../utils'; @@ -54,7 +55,7 @@ const homeStyle = StyleSheet.create({ }, appEnvironmentText: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 14 : 12, paddingHorizontal: 14, paddingVertical: 8, diff --git a/app/styles/index.ts b/app/styles/index.ts new file mode 100644 index 0000000..c54a3f1 --- /dev/null +++ b/app/styles/index.ts @@ -0,0 +1,4 @@ +export enum Font { + regular = 'Montserrat-Regular', + semiBold = 'Montserrat-SemiBold', +} diff --git a/app/styles/inputs.ts b/app/styles/inputs.ts index 9baa3ee..d4b92b1 100644 --- a/app/styles/inputs.ts +++ b/app/styles/inputs.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { deviceHeight, deviceWidth, isApple, isTablet, @@ -51,7 +52,7 @@ export const selectStyle = StyleSheet.create({ }, label: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginBottom: 10, marginRight: 10, @@ -78,7 +79,7 @@ export const selectStyle = StyleSheet.create({ }, inputText: { color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 20, marginRight: 10, textAlign: 'right', @@ -130,14 +131,14 @@ export const selectStyle = StyleSheet.create({ }, listText: { color: colors.black, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginVertical: 10, textAlign: 'center', }, listDisabledText: { color: colors.disabledList, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginVertical: 10, textAlign: 'center', @@ -153,7 +154,7 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, label: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginBottom: 10, marginRight: 10, @@ -177,7 +178,7 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, inputText: { color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 20, marginRight: 10, minWidth: 55, @@ -185,7 +186,7 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, inputTextLabel: { color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 16, marginRight: 10, textAlign: 'right', @@ -208,7 +209,7 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, listWrapper: { borderColor: colors.grayBlue, - borderRadius: 30, + borderRadius: 20, borderWidth: 2, marginHorizontal: isTablet ? '15%' : '5%', marginVertical: '30%', @@ -218,23 +219,22 @@ export const timeSignatureSelectStyle = StyleSheet.create({ zIndex: 2, }, list: { - backgroundColor: colors.gray, + backgroundColor: colors.white, flexGrow: 1, width: '100%', }, listLabelWrapper: { - backgroundColor: colors.grayBlue, alignItems: 'center', + backgroundColor: colors.grayBlue, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - paddingHorizontal: 20, - paddingVertical: 10, + padding: 10, }, listLabel: { color: colors.white, - fontFamily: 'Montserrat-SemiBold', - fontSize: 18, + fontFamily: Font.semiBold, + fontSize: 16, marginRight: 20, }, proWrapper: { @@ -246,7 +246,7 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, proText: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 12, paddingHorizontal: 10, paddingVertical: 5, @@ -263,8 +263,8 @@ export const timeSignatureSelectStyle = StyleSheet.create({ }, listText: { color: colors.black, - fontFamily: 'Montserrat-SemiBold', - fontSize: 18, + fontFamily: Font.regular, + fontSize: 16, marginVertical: 10, textAlign: 'center', }, @@ -301,7 +301,7 @@ export const sliderStyle = StyleSheet.create({ }, label: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 18 : 14, lineHeight: isTablet ? 20 : 16, }, @@ -321,7 +321,7 @@ export const radioStyle = StyleSheet.create({ }, text: { color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 20, marginRight: 14, textAlign: 'center', @@ -345,7 +345,7 @@ export const textInputStyle = StyleSheet.create({ backgroundColor: colors.grayLight, borderRadius: 15, color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 20, height: 40, padding: 0, diff --git a/app/styles/main.ts b/app/styles/main.ts index 5f23c69..81da95c 100755 --- a/app/styles/main.ts +++ b/app/styles/main.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { deviceHeight, isApple, isiPhone } from '../utils'; @@ -46,7 +47,7 @@ const mainStyle = StyleSheet.create({ }, alertText: { color: colors.black, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, textAlign: 'center', }, diff --git a/app/styles/modals.ts b/app/styles/modals.ts index 673754e..417389c 100644 --- a/app/styles/modals.ts +++ b/app/styles/modals.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { deviceHeight, deviceWidth, isTablet } from '../utils'; @@ -35,13 +36,13 @@ const modalsStyle = StyleSheet.create({ }, modalTxt: { color: colors.grayLight, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 18 : 14, textAlign: 'center', }, modalExp: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 20 : 12, marginBottom: isTablet ? 30 : 16, marginHorizontal: 10, @@ -65,7 +66,7 @@ const modalsStyle = StyleSheet.create({ }, modalBtnTxt: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: isTablet ? 20 : 16, textAlign: 'center', }, @@ -73,7 +74,7 @@ const modalsStyle = StyleSheet.create({ backgroundColor: colors.grayLight, borderRadius: 20, color: colors.grayBlue, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginVertical: 15, paddingHorizontal: 10, diff --git a/app/styles/navigation.ts b/app/styles/navigation.ts index b530f4e..ad7754a 100644 --- a/app/styles/navigation.ts +++ b/app/styles/navigation.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { deviceHeight, deviceWidth, isTablet } from '../utils'; @@ -58,7 +59,7 @@ const navigationStyle = StyleSheet.create({ }, tagline: { color: colors.grayLight, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 22, left: 0, position: 'absolute', @@ -96,7 +97,7 @@ const navigationStyle = StyleSheet.create({ }, label: { color: colors.grayLight, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, textAlign: 'left', }, diff --git a/app/styles/notifications.ts b/app/styles/notifications.ts index 3ada512..57082ef 100644 --- a/app/styles/notifications.ts +++ b/app/styles/notifications.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet } from '../utils'; @@ -19,14 +20,14 @@ const notificationsStyle = StyleSheet.create({ }, alertText: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 12, margin: 10, textAlign: 'center', }, alertTimerText: { - color: colors.green, - fontFamily: 'Montserrat-SemiBold', + color: colors.white, + fontFamily: Font.semiBold, fontSize: 18, marginTop: -5, marginBottom: 10, diff --git a/app/styles/rewarded.ts b/app/styles/rewarded.ts index 42cd287..abd2bd9 100644 --- a/app/styles/rewarded.ts +++ b/app/styles/rewarded.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet } from '../utils'; @@ -13,14 +14,14 @@ const rewardedStyle = StyleSheet.create({ }, countdownTimer: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 22, marginBottom: 5, textAlign: 'center', }, countdownTxt: { color: colors.grayLight, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 12, textAlign: 'center', }, @@ -38,21 +39,21 @@ const rewardedStyle = StyleSheet.create({ }, rewardedExpText: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 22, marginVertical: 2, textAlign: 'center', }, rewardedExp2Text: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 14, marginTop: '20%', textAlign: 'center', }, rewardedExp3Text: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginBottom: 20, marginTop: '10%', @@ -94,13 +95,13 @@ const rewardedStyle = StyleSheet.create({ }, rewardedStartText: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 20, textAlign: 'center', }, rewardedDisc: { color: colors.grayLight, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 12, textAlign: 'center', }, @@ -119,7 +120,7 @@ const rewardedStyle = StyleSheet.create({ }, listText: { color: colors.gray, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 14, }, }); diff --git a/app/styles/settings.ts b/app/styles/settings.ts index 88d6fa1..2596d89 100644 --- a/app/styles/settings.ts +++ b/app/styles/settings.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { Font } from '.'; import colors from './colors'; import { isTablet, isiPhone } from '../utils'; @@ -30,7 +31,7 @@ const settingsStyle = StyleSheet.create({ }, menuTitle: { color: colors.primaryDark, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, marginBottom: 10, marginRight: 10, @@ -63,7 +64,7 @@ const settingsStyle = StyleSheet.create({ }, btnRewardScreenText: { color: colors.white, - fontFamily: 'Montserrat-SemiBold', + fontFamily: Font.semiBold, fontSize: 18, textAlign: 'center', },