Nt/UI tweaks

src/components/bottomTabBar/view/bottomTabBarView.tsx

@@ -66,7 +66,7 @@ const BottomTabBarView = ({
 
     const _iconProps = {
       iconType: 'MaterialIcons',
-      style: { padding: 15 },
+      style: { paddingTop: 15 },
       name: route.params.iconName,
       color: iconColor,
       size: scalePx(26),

src/components/horizontalIconList/horizontalIconListStyles.js

@@ -42,10 +42,9 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBlue',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 2,
-    height: 12,
+    paddingHorizontal: 4,
     minWidth: 18,
-    borderRadius: 12 / 2,
+    borderRadius: 16,
   },
   badgeText: {
     fontSize: 8,

src/components/icon/view/iconStyles.js

@@ -10,7 +10,7 @@ export default EStyleSheet.create({
   },
   badgeWrapper: {
     position: 'absolute',
-    right: scalePx(15),
+    left: scalePx(15),
     top: scalePx(18),
     backgroundColor: '$primaryRed',
     borderWidth: 0,

src/screens/login/screen/loginScreen.js

@@ -123,12 +123,6 @@ const LoginScreen = ({
         }}
       />
 
-      <View
-        tabLabel={intl.formatMessage({
-          id: 'login.signin',
-        })}
-        style={styles.tabbarItem}
-      >
         <KeyboardAwareScrollView
           enableAutoAutomaticScroll={Platform.OS === 'ios'}
           contentContainerStyle={styles.formWrapper}
@@ -200,7 +194,7 @@ const LoginScreen = ({
             height={48}
             style={styles.hsLoginBtnStyle}
           />
-        </KeyboardAwareScrollView>
+
         <View style={styles.footerButtons}>
           <Text style={styles.noAccountText}>
             {intl.formatMessage({
@@ -213,7 +207,8 @@ const LoginScreen = ({
             })}
           </Text>
         </View>
-      </View>
+        </KeyboardAwareScrollView>
+
       <Modal
         isOpen={isModalOpen}
         isFullScreen

src/screens/login/screen/loginStyles.js

@@ -5,16 +5,6 @@ export default EStyleSheet.create({
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
   },
-  tabbar: {
-    alignSelf: 'center',
-    height: 40,
-    backgroundColor: '$primaryBackgroundColor',
-  },
-  tabbarItem: {
-    // flex: 1,
-    backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
-  },
   mainButtonWrapper: {
     position: 'absolute',
     right: 24,
@@ -28,8 +18,8 @@ export default EStyleSheet.create({
     alignItems: 'center',
   },
   formWrapper: {
-    marginHorizontal: 30,
-    marginVertical: 10,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
   },
   input: {
     color: '$primaryDarkText',
@@ -64,6 +54,7 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    marginVertical:8,
     paddingHorizontal: 24,
     backgroundColor: '$primaryBackgroundColor',
   },

src/screens/redeem/children/boostPlus.tsx

@@ -20,7 +20,7 @@ import { DropdownButton } from '../../../components/dropdownButton';
 import { Modal } from '../../../components/modal';
 
 // Styles
-import styles from './boostPlus.styles';
+import styles from '../styles/boostPlus.styles';
 import { OptionsModal } from '../../../components/atoms';
 import QUERIES from '../../../providers/queries/queryKeys';
 import RootNavigation from '../../../navigation/rootNavigation';

src/screens/redeem/screen/redeemScreen.js → src/screens/redeem/screen/redeemScreen.tsx

@@ -1,9 +1,12 @@
 import React, { PureComponent, Fragment } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { RedeemContainer, PointsContainer } from '../../../containers';
 
 import { Promote, PostBoost } from '../../../components';
 import BoostPlus from '../children/boostPlus';
+import styles from '../styles/redeemScreen.styles';
+import Animated, { Easing, SlideInDown, SlideInRight, SlideInUp } from 'react-native-reanimated';
 
 class RedeemScreen extends PureComponent {
   constructor(props) {
@@ -18,7 +21,7 @@ class RedeemScreen extends PureComponent {
   render() {
     const { route } = this.props;
     return (
-      <Fragment>
+      <View style={styles.container}>
         <PointsContainer route={route}>
           {({
             accounts,
@@ -30,10 +33,12 @@ class RedeemScreen extends PureComponent {
             user,
           }) => (
             <RedeemContainer>
-              {({ handleOnSubmit, SCPath, isSCModalOpen, handleOnSCModalClose, isLoading }) => (
-                <Fragment>
-                  {redeemType === 'promote' && (
-                    <Promote
+              {({ handleOnSubmit, SCPath, isSCModalOpen, handleOnSCModalClose, isLoading }) => {
+
+                let _retView = null;
+                switch (redeemType) {
+                  case 'promote':
+                    _retView = <Promote
                       isLoading={isLoading}
                       accounts={accounts}
                       currentAccountName={currentAccountName}
@@ -46,10 +51,9 @@ class RedeemScreen extends PureComponent {
                       SCPath={SCPath}
                       getESTMPrice={getESTMPrice}
                     />
-                  )}
-
-                  {redeemType === 'boost' && (
-                    <PostBoost
+                    break;
+                  case 'boost':
+                    _retView = <PostBoost
                       isLoading={isLoading}
                       accounts={accounts}
                       currentAccountName={currentAccountName}
@@ -63,10 +67,9 @@ class RedeemScreen extends PureComponent {
                       getESTMPrice={getESTMPrice}
                       user={user}
                     />
-                  )}
-
-                  {redeemType === 'boost_plus' && (
-                    <BoostPlus
+                    break;
+                  case 'boost_plus':
+                    _retView = <BoostPlus
                       isLoading={isLoading}
                       accounts={accounts}
                       currentAccountName={currentAccountName}
@@ -79,13 +82,19 @@ class RedeemScreen extends PureComponent {
                       SCPath={SCPath}
                       getESTMPrice={getESTMPrice}
                     />
-                  )}
-                </Fragment>
-              )}
+                    break;
+                }
+
+                return (
+                  <Animated.View style={StyleSheet.absoluteFill} entering={SlideInRight}>
+                    {_retView}
+                  </Animated.View>
+                )
+              }}
             </RedeemContainer>
           )}
         </PointsContainer>
-      </Fragment>
+      </View>
     );
   }
 }

src/screens/redeem/styles/redeemScreen.styles.ts

@@ -0,0 +1,8 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '$primaryBackgroundColor'
+    },
+})