feat(modal): 💄 LoaderScreen components + rn-sm

#99

screens/LoaderScreen/components/atoms/Button.tsx

@@ -1,14 +1,15 @@
 import { Button, ButtonProps } from "components/atoms"
 import { StyleSheet } from "react-native"
+import { vs } from "react-native-size-matters"
 
 export default (props: ButtonProps) => (
 	<Button contentContainerStyle={styles.buttonContent} textStyle={styles.buttonText} {...props} />
 )
 
 const styles = StyleSheet.create({
 	buttonText: {
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: vs(16),
+		lineHeight: vs(20),
 	},
-	buttonContent: { paddingVertical: 17 },
+	buttonContent: { paddingVertical: vs(17) },
 })

screens/LoaderScreen/components/atoms/Caption.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, Text, TextStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 
 type Props = {
@@ -8,17 +9,17 @@ type Props = {
 }
 
 export default ({ children, text, style }: Props) => {
-	return <Text style={[styles.text,  style]}>{text || children}</Text>
+	return <Text style={[styles.text, style]}>{text || children}</Text>
 }
 
 const styles = StyleSheet.create({
 	text: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 		textAlign: "center",
-		color: COLOR.Marengo
+		color: COLOR.Marengo,
 	},
 })

screens/LoaderScreen/components/atoms/Title.tsx

@@ -1,5 +1,6 @@
 import { StyleProp, StyleSheet, Text, TextStyle } from "react-native"
 import { useTheme } from "hooks"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	text?: string
@@ -17,8 +18,8 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "700",
-		fontSize: 20,
-		lineHeight: 25,
+		fontSize: s(20),
+		lineHeight: s(25),
 		textAlign: "center",
 	},
 })

screens/LoaderScreen/components/organisms/StepLock.tsx

@@ -1,9 +1,10 @@
+import { useEffect, useState } from "react"
 import { Image, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
+import { observer } from "mobx-react-lite"
+import { s, vs } from "react-native-size-matters"
 import { TimerCountdown } from "classes"
 import { COLOR } from "utils"
 import { Title, Caption } from "../atoms"
-import { observer } from "mobx-react-lite"
-import { useEffect, useState } from "react"
 
 type Props = {
 	timer: TimerCountdown
@@ -13,10 +14,10 @@ type Props = {
 export default observer(({ timer, style }: Props) => {
 	const [showNumber, setShowNumber] = useState(false)
 
-	useEffect(() =>
-	{
-		if(timer.diffSec) setShowNumber(true)
+	useEffect(() => {
+		if (timer.diffSec) setShowNumber(true)
 	}, [timer.isActive])
+
 	return (
 		<View style={[styles.container, style]}>
 			<Image source={require("assets/images/lock.png")} style={styles.icon} />
@@ -33,32 +34,27 @@ export default observer(({ timer, style }: Props) => {
 const styles = StyleSheet.create({
 	container: { alignItems: "center" },
 	icon: {
-		marginBottom: 45,
-		width: 205,
-		height: 205,
-	},
-	title: {
-		marginBottom: 16,
-	},
-	caption: {
-		textAlign: "center",
+		marginBottom: vs(25),
+		width: vs(205),
+		height: vs(205),
 	},
+	title: { marginBottom: vs(8) },
+	caption: { textAlign: "center" },
 	timerContainer: {
-		marginTop: 50,
-		width: 187,
-		height: 177,
+		marginTop: vs(25),
+		width: vs(187),
+		height: vs(177),
 		backgroundColor: COLOR.Dark2,
-		borderRadius: 20,
+		borderRadius: s(20),
 		alignItems: "center",
 		justifyContent: "center",
 	},
-
 	timer: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 80,
-		lineHeight: 101,
+		fontSize: vs(80),
+		lineHeight: vs(101),
 		color: COLOR.White,
 	},
 })

screens/LoaderScreen/components/organisms/StepSuccess.tsx

@@ -1,4 +1,5 @@
 import { Image, StyleSheet, View } from "react-native"
+import { s, vs } from "react-native-size-matters"
 import { Caption, Title } from "../atoms"
 
 type Props = {
@@ -27,18 +28,18 @@ export default ({
 const styles = StyleSheet.create({
 	title: {
 		textAlign: "center",
-		marginBottom: 24,
+		marginBottom: vs(24),
 	},
 	caption: {
 		textAlign: "center",
 	},
 	iconContainer: {
-		height: 218,
+		height: s(218),
 		alignItems: "center",
 		justifyContent: "center",
 	},
 	icon: {
-		width: 205,
-		height: 205,
+		width: s(205),
+		height: s(205),
 	},
 })