[TMA-347] Adjusted Coming Soon Image to look nice on smaller screens (#107)

* Adjusted image and text to also look nice on iphone8

* Percentage

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

2 files changed, 25 insertions, 19 deletions

diff --git a/src/components/common/ComingSoon.tsx b/src/components/common/ComingSoon.tsx
index 5e1414e2..16b65b58 100644
--- a/src/components/common/ComingSoon.tsx
+++ b/src/components/common/ComingSoon.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {StyleSheet, View, Text, Image} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils';
 import {Background} from '../onboarding';
 
 const ComingSoon: React.FC = () => {
@@ -25,8 +26,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   image: {
-    width: 400,
-    height: 400,
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
   },
   textContainer: {
     marginTop: '30%',
@@ -44,7 +45,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
     textAlign: 'center',
-    marginBottom: '16%',
+    marginBottom: '5%',
     marginHorizontal: '10%',
   },
 });
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 668e600f..dfd7546f 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,22 +1,28 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import React, {useEffect, useState} from 'react';
-import {StatusBar, StyleSheet, ScrollView, Keyboard, Text, View, Image} from 'react-native';
 import {
+  Image,
+  Keyboard,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Animated, {Easing, timing} from 'react-native-reanimated';
+import {
+  RecentSearches,
   SearchBackground,
-  SearchHeader,
   SearchBar,
-  Explore,
-  SearchResultsBackground,
+  SearchHeader,
   SearchResults,
+  SearchResultsBackground,
   TabsGradient,
-  RecentSearches,
 } from '../../components';
-import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
-import Animated, {Easing, timing} from 'react-native-reanimated';
-import AsyncStorage from '@react-native-community/async-storage';
-import {ProfilePreviewType} from '../../types';
 import {SEARCH_ENDPOINT} from '../../constants';
 import {AuthContext} from '../../routes/authentication';
-import {UserType} from '../../types';
+import {ProfilePreviewType, UserType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -134,7 +140,8 @@ const SearchScreen: React.FC = () => {
           <View style={styles.textContainer}>
             <Text style={styles.headerText}>Coming Soon</Text>
             <Text style={styles.subtext}>
-              We are working on constructing our explore suggestions. You can still search users for now!
+              We are working on constructing our explore suggestions. You can
+              still search users for now!
             </Text>
           </View>
           <Image
@@ -164,10 +171,9 @@ const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
     paddingBottom: SCREEN_HEIGHT / 15,
-    paddingHorizontal: 15,
   },
   searchBar: {
-    marginBottom: 20,
+    paddingHorizontal: '3%',
   },
   header: {
     marginVertical: 20,
@@ -187,8 +193,8 @@ const styles = StyleSheet.create({
     color: '#698DD3',
   },
   image: {
-    width: 400,
-    height: 400,
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
   },
   textContainer: {
     marginTop: '10%',
@@ -206,7 +212,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
     textAlign: 'center',
-    marginBottom: '16%',
     marginHorizontal: '10%',
   },
 });