refactor: Font enum, fix keep rewards, fix some styling

Chimera-Studio · Mar 18, 2024 · 32d0bb9 · 32d0bb9
1 parent 8efeed2
commit 32d0bb9
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 83 deletions.
diff --git a/app/README.md b/app/README.md
@@ -55,8 +55,8 @@ Add `env.json` file to root directory
         "RELEASE_KEYSTORE_KEY_ALIAS": "<secret>"
     },
     "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
@@ -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
@@ -139,7 +139,7 @@ function TimeSignatureSelect(props: Props) {
               <React.Fragment key={option.value}>
                 <View style={timeSignatureSelectStyle.listLabelWrapper}>
                   <Text style={timeSignatureSelectStyle.listLabel}>
-                    {option.label}
+                    &bull; {option.label}
                   </Text>
                   {option.disabled && (
                     <TouchableHighlight
@@ -154,25 +154,29 @@ function TimeSignatureSelect(props: Props) {
                   )}
                 </View>
                 <View style={timeSignatureSelectStyle.listSection}>
-                  {map(timeSignatures, (sig: TimeSig, key: number) => (
-                    <TouchableOpacity
-                      key={key}
-                      activeOpacity={0.6}
-                      style={key === timeSignatures.length - 1 ? timeSignatureSelectStyle.listItemNoBorder : [timeSignatureSelectStyle.listItem, {
-                        borderBottomColor: colors.grayBlue + '80',
-                      }]}
-                      onPress={() => handleSelect(option, sig)}
-                    >
-                      <Text style={[timeSignatureSelectStyle.listText, {
-                        ...(isActive(option, sig) && {
-                          color: colors.primary,
-                        }),
-                      }]}
+                  {map(timeSignatures, (sig: TimeSig, key: number) => {
+                    const active = isActive(option, sig);
+
+                    return (
+                      <TouchableOpacity
+                        key={key}
+                        activeOpacity={0.6}
+                        style={[timeSignatureSelectStyle.listItem, {
+                          borderBottomColor: colors.grayBlue + '80',
+                          ...(active && { backgroundColor: colors.primary + '40' }),
+                        }]}
+                        onPress={() => handleSelect(option, sig)}
                       >
-                        {sig.label}
-                      </Text>
-                    </TouchableOpacity>
-                  ))}
+                        <Text style={[
+                          timeSignatureSelectStyle.listText,
+                          active ? { color: colors.black } : {}]
+                          }
+                        >
+                          {sig.label}
+                        </Text>
+                      </TouchableOpacity>
+                    );
+                  })}
                 </View>
               </React.Fragment>
             ))}

diff --git 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
@@ -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() {
         <Text style={guideStyle.guideTxt}>{t('guide.section_2.paragraph_2')}</Text>
         <Text style={guideStyle.guideSub}>{t('guide.section_3.title')}</Text>
         <Text style={guideStyle.guideTxt}>
-          <Text style={{ fontFamily: 'Montserrat-SemiBold' }}>
+          <Text style={{ fontFamily: Font.semiBold }}>
             {t('guide.section_3.subsection_1.title')}
           </Text>
           {t('guide.section_3.subsection_1.paragraph_1')}
@@ -196,7 +197,7 @@ export function Guide() {
             </TouchableHighlight>
             <Text
               style={{
-                fontFamily: 'Montserrat-Regular',
+                fontFamily: Font.regular,
                 fontSize: 12,
                 textAlign: 'center',
                 color: colors.primaryDark,
@@ -228,7 +229,7 @@ export function Guide() {
             </TouchableHighlight>
             <Text
               style={{
-                fontFamily: 'Montserrat-Regular',
+                fontFamily: Font.regular,
                 fontSize: 12,
                 textAlign: 'center',
                 color: colors.primaryDark,
@@ -240,15 +241,15 @@ export function Guide() {
         </View>
         <Text style={guideStyle.guideTxt}>
           {t('guide.section_3.subsection_1.paragraph_2')}
-          <Text style={{ fontFamily: 'Montserrat-SemiBold' }}>
+          <Text style={{ fontFamily: Font.semiBold }}>
             {t('guide.section_3.subsection_2.title')}
           </Text>
           {t('guide.section_3.subsection_2.paragraph_1')}
-          <Text style={{ fontFamily: 'Montserrat-SemiBold' }}>
+          <Text style={{ fontFamily: Font.semiBold }}>
             {t('guide.section_3.subsection_3.title')}
           </Text>
           {t('guide.section_3.subsection_3.paragraph_1')}
-          <Text style={{ fontFamily: 'Montserrat-SemiBold' }}>
+          <Text style={{ fontFamily: Font.semiBold }}>
             {t('guide.section_3.subsection_3.bold_1')}
           </Text>
           {t('guide.section_3.subsection_3.paragraph_2')}
@@ -267,7 +268,7 @@ export function Guide() {
         <Text style={guideStyle.guideSub}>{t('guide.section_4.title')}</Text>
         <Text style={guideStyle.guideTxt}>
           {t('guide.section_4.paragraph_1')}
-          <Text style={{ fontFamily: 'Montserrat-SemiBold' }}>
+          <Text style={{ fontFamily: Font.semiBold }}>
             {t('guide.section_4.paragraph_2')}
           </Text>
           {t('guide.section_4.paragraph_3')}
@@ -291,7 +292,7 @@ export function Guide() {
         <Text style={guideStyle.guideTxt}>{t('guide.section_5.paragraph_1')}</Text>
         <Text
           style={{
-            fontFamily: 'Montserrat-SemiBold',
+            fontFamily: Font.semiBold,
             textAlign: 'left',
             fontSize: 16,
             color: colors.primaryDark,

diff --git a/app/components/screens/Settings.tsx b/app/components/screens/Settings.tsx
@@ -39,8 +39,9 @@ function Settings() {
   const [openSoundSelect, setOpenSoundSelect] = useState(false);
   const hasAllRewards = isEmpty(lockedSamples);
   const [rewardsAreRefreshable, setRewardsAreRefreshable] = useState(false);
-  const { resetRewards } = config;
+  const { keepRewards, resetRewards } = config;
   const resetRewardsHours = hoursToMilliseconds(resetRewards);
+  const keepRewardsHours = hoursToMilliseconds(keepRewards);
   const shouldShowAlert = hasAllRewards && !rewardsAreRefreshable;
   const countdownFrom = global.rewardedAt?.samples ? global.rewardedAt.samples + resetRewardsHours : null;
 
@@ -100,7 +101,7 @@ function Settings() {
     }
 
     if (shouldShowAlert) {
-      const refreshAvailableIn = countdownFrom ? countdownFrom - resetRewardsHours : null;
+      const refreshAvailableIn = countdownFrom ? countdownFrom - keepRewardsHours : null;
 
       teleport(
         <Alert clearDelayMS={secondsToMilliseconds(5)}>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+export enum Font {
+  regular = 'Montserrat-Regular',
+  semiBold = 'Montserrat-SemiBold',
+}