Worked on perfecting the checkOut screen and its elements

Author: MarjorieMaillee

package-lock.json

@@ -31,9 +31,8 @@ const OrderSummarySection = () => {
       Alert.alert('No code entered.');
     }
   };
-
   return (
-    <View style={{ paddingBottom: 46 }}>
+    <View>
       <Text22Normal600
         style={{
           fontSize: 24,
@@ -131,7 +130,6 @@ const OrderSummarySection = () => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          marginBottom: 26,
         }}
       >
         <ShopTextInput

src/components/shop/OrderSummarySection.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { Alert, Dimensions, TouchableOpacity, View } from 'react-native';
+import { Alert, TouchableOpacity, View } from 'react-native';
 
 import colors from '../../constants/colors';
 import { Text16Normal600 } from '../common/typography';
 
 const ShopBottomButton = () => {
-  const screenHeight = Dimensions.get('screen').height;
-
   return (
     <View
       style={{
-        height: screenHeight * 0.14,
+        flex: 1,
+        width: '100%',
+
         backgroundColor: colors.black,
         borderTopWidth: 1,
         borderTopColor: colors.darkGrey,
-        padding: 20,
+        paddingHorizontal: 20,
+        paddingTop: 14,
+        paddingBottom: 34,
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
       }}
     >
       <TouchableOpacity

src/components/shop/ShopBottomButton.tsx

@@ -26,6 +26,7 @@ const ShopCheckOutScreen = () => {
       <MagicScroll.ScrollView
         scollViewProps={{
           showsVerticalScrollIndicator: false,
+          contentContainerStyle: { paddingBottom: 120 },
           style: {
             paddingHorizontal: 20,
             paddingTop: 24,

src/components/shop/ShopCheckOutScreen.tsx

@@ -18,10 +18,16 @@ const SummmaryRow = ({
   totalLine?: boolean;
 }) => {
   return (
-    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+      }}
+    >
       <Text16Normal400
         style={{
-          marginBottom: 8,
           fontSize: totalLine ? 20 : 16,
           fontWeight: totalLine ? '600' : '400',
         }}