styles refactoring

src/components/hiveAuthModal/children/authInputContent.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { debounce } from 'lodash';
-import EStyleSheet from 'react-native-extended-stylesheet';
 import Animated, { FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 import styles from '../styles/hiveAuthModal.styles';
 import { lookupAccounts } from '../../../providers/hive/dhive';
@@ -56,11 +55,8 @@ export const AuthInputContent = ({ initUsername, handleAuthRequest }: AuthInputC
   };
 
   return (
-    <Animated.View
-      style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}
-      exiting={FadeOut}
-    >
-      <Animated.View style={{ width: '90%' }} layout={LinearTransition}>
+    <Animated.View style={styles.authInputContent} exiting={FadeOut}>
+      <Animated.View style={styles.authInputWrapper} layout={LinearTransition}>
         <FormInput
           rightIconName="at"
           leftIconName="close"
@@ -84,14 +80,8 @@ export const AuthInputContent = ({ initUsername, handleAuthRequest }: AuthInputC
         <Animated.View entering={ZoomIn} exiting={ZoomOut}>
           <MainButton
             text={intl.formatMessage({ id: 'login.signin_with_hiveauth' })}
-            textStyle={{ color: EStyleSheet.value('$primaryBlack') }}
-            style={{
-              backgroundColor: 'transparent',
-              marginTop: 12,
-              borderWidth: 1,
-              borderColor: EStyleSheet.value('$iconColor'),
-              height: 44,
-            }}
+            textStyle={styles.loginBtnText}
+            style={styles.loginBtnWrapper}
             onPress={onSignInPress}
             source={HIVE_AUTH_ICON}
           />

src/components/hiveAuthModal/children/statusContent.tsx

@@ -37,28 +37,19 @@ export const StatusContent = ({ status, statusText }: StatusContentProps) => {
       {status === HiveAuthStatus.ERROR && _renderResultIcon('closecircleo', '$primaryRed')}
 
       <Animated.View
-        style={{ flexDirection: 'row', alignItems: 'center' }}
+        style={styles.statusContent}
         layout={LinearTransition}
         entering={FadeInUp}
         exiting={FadeOutDown}
       >
         {status === HiveAuthStatus.PROCESSING && (
           <ActivityIndicator
-            style={{ marginRight: 16 }}
+            style={styles.activityIndicator}
             size="large"
             color={EStyleSheet.value('$primaryBlue')}
           />
         )}
-        <Text
-          style={{
-            color: EStyleSheet.value('$primaryDarkText'),
-            fontWeight: 300,
-            fontSize: 24,
-            textAlign: 'center',
-          }}
-        >
-          {statusText}
-        </Text>
+        <Text style={styles.statusText}>{statusText}</Text>
       </Animated.View>
     </>
   );

src/components/hiveAuthModal/container/hiveAuthModal.tsx

@@ -80,6 +80,7 @@ export const HiveAuthModal = forwardRef(({ onClose }: HiveAuthModalProps, ref) =
     return (
       <View style={styles.container}>
         <ModalHeader
+          modalHeaderContainerStyle={styles.modalHeader}
           title={intl.formatMessage({ id: 'hiveauth.title' })}
           isCloseButton={true}
           onClosePress={_closeModal}

src/components/hiveAuthModal/styles/hiveAuthModal.styles.ts

@@ -1,15 +1,15 @@
-import { ViewStyle } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   sheetContent: {
-    backgroundColor: '$primaryBackgroundColor',
+    backgroundColor: '$modalBackground',
   },
   indicator: {
     backgroundColor: '$iconColor',
   },
   container: {
-    height: 300,
+    height: 400,
   } as ViewStyle,
   content: {
     flex: 1,
@@ -18,9 +18,11 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  modalHeader: {
+    backgroundColor: '$modalBackground',
+  },
   input: {
     color: '$primaryDarkText',
-    // flexGrow: 1,
   },
   resultIcon: {
     marginBottom: 24,
@@ -34,4 +36,35 @@ export default EStyleSheet.create({
     paddingRight: 8,
     height: 56,
   } as ViewStyle,
+  authInputContent: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+  authInputWrapper: {
+    width: '90%',
+  } as ViewStyle,
+  loginBtnWrapper: {
+    backgroundColor: '$primaryBackgroundColor',
+    marginTop: 12,
+    borderWidth: 1,
+    borderColor: '$iconColor',
+    height: 44,
+  } as ViewStyle,
+  loginBtnText: {
+    color: '$primaryBlack',
+  } as TextStyle,
+  statusContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+  activityIndicator: {
+    marginRight: 16,
+  } as ViewStyle,
+  statusText: {
+    color: '$primaryDarkText',
+    fontWeight: '300',
+    fontSize: 24,
+    textAlign: 'center',
+  } as TextStyle,
 });