fix responsiveness-related issues.

component/chargingPenalty.tsx

@@ -38,14 +38,15 @@ const WarningTriangleLogoSvg = () => (
 const IdlingGreyBox = () => {
     return (
         <View className="flex-1 ">
-            <View className="bg-[#5a5c7c] h-[44%] rounded-t-xl flex-row items-center px-[5%]">
+            <View className="bg-[#5a5c7c] h-[44%] rounded-t-xl flex-row items-center ">
                 <WarningTriangleLogoSvg />
                 <Text className="text-white font-black text-xl pl-4">
                     待機中..
                 </Text>
             </View>
-            <View className="bg-[#555776] h-[56%] rounded-b-xl px-[5%] py-2">
-                <View className="flex-1 flex-row items-center">
+
+            <View className="bg-[#555776]  rounded-b-xl p-6 space-y-1">
+                <View className="flex-row items-center">
                     <View className="w-[40%] ">
                         <Text className="text-base text-white">
                             剩餘待機時間:
@@ -56,7 +57,7 @@ const IdlingGreyBox = () => {
                     </View>
                 </View>
 
-                <View className="flex-1  flex-row items-center">
+                <View className="flex-row items-center ">
                     <View>
                         <Text className="text-sm text-white">
                             請於下方確認完成充電以免進入罰款時間
@@ -71,15 +72,15 @@ const IdlingGreyBox = () => {
 const PenaltyRedBox = () => {
     return (
         <>
-            <View className="bg-[#bb2d12] h-[35%] rounded-t-xl flex-row items-center px-[5%]">
+            <View className="bg-[#bb2d12] flex-1 p-4 rounded-t-xl flex-row items-center px-[5%]">
                 <WarningTriangleLogoSvg />
                 <Text className="text-white font-black text-xl pl-4">
                     罰款中
                 </Text>
             </View>
-            <View className="bg-[#b12a11] h-[65%] rounded-b-xl px-[5%] py-2">
-                <View className="flex-1 flex-row items-center">
-                    <View className="w-[40%] ">
+            <View className="bg-[#b12a11] flex-column  rounded-b-xl p-6">
+                <View className="flex-1 flex-row items-center pb-2">
+                    <View className="w-[40%]">
                         <Text style={styles.warningLightText}>
                             罰款時間歷時:
                         </Text>
@@ -88,7 +89,7 @@ const PenaltyRedBox = () => {
                         <Text style={styles.warningBoldText}>01:55</Text>
                     </View>
                 </View>
-                <View className="flex-1 flex-row items-center">
+                <View className="flex-1 flex-row items-center pb-2">
                     <View className="w-[40%]">
                         <Text style={styles.warningLightText}>累積:</Text>
                     </View>
@@ -96,7 +97,7 @@ const PenaltyRedBox = () => {
                         <Text style={styles.warningBoldText}>01:55</Text>
                     </View>
                 </View>
-                <View className="flex-1  flex-row items-center">
+                <View className="flex-1  flex-row items-center pb-2">
                     <View>
                         <Text style={styles.warningLightText}>
                             請於下方確認完成充電以解鎖
@@ -109,22 +110,22 @@ const PenaltyRedBox = () => {
 };
 
 const ChargingPenaltyPage = () => {
-    const [isIdling, setIsIdling] = React.useState<boolean>(true);
+    const [isIdling, setIsIdling] = React.useState<boolean>(false);
 
     return (
         <SafeAreaView
             className="flex-1 bg-white"
             edges={['top', 'left', 'right']}
         >
-            <ScrollView className="flex-1">
-                <View className="h-[100vh] mx-[5%] space-y-4 ">
-                    <View className="mt-8">
+            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+                <View className="mx-[5%]">
+                    <View className="my-4">
                         <Text className="text-xl" style={styles.greenColor}>
                             已完成充電
                         </Text>
                         <Text className="text-2xl">TESLA Model 3</Text>
                     </View>
-                    <View className="flex-row h-[16vh] items-center">
+                    <View className="flex-row items-center ">
                         <View className="w-[50%] items-center justify-center">
                             <Image
                                 source={require('../assets/car.png')}
@@ -182,22 +183,22 @@ const ChargingPenaltyPage = () => {
                         </View>
                     </View>
                     {isIdling ? (
-                        <View className="flex-column h-[16vh]">
+                        <View className=" flex-column py-2">
                             <IdlingGreyBox />
                         </View>
                     ) : (
-                        <View className="flex-column h-[22vh]">
+                        <View className="flex-column py-3">
                             <PenaltyRedBox />
                         </View>
                     )}
-                    <View className="w-full ">
+                    <View>
                         <NormalButton
                             onPress={() => {
                                 console.log('完成充電');
                             }}
                             title={
                                 <Text
-                                    className="text-xl text-white"
+                                    className="text-xl text-white "
                                     style={{ fontWeight: 900 }}
                                 >
                                     完成充電
@@ -206,10 +207,11 @@ const ChargingPenaltyPage = () => {
                         />
                     </View>
                     <ExpectedFeeBox
-                        extendedStyle={{ marginVertical: 16, height: '10%' }}
+                        extendedStyle={{ marginTop: 12, padding: 12 }}
+                    />
+                    <OtherInformationBox
+                        extendedStyle={{ marginTop: 12, padding: 12 }}
                     />
-
-                    <OtherInformationBox extendedStyle={{ height: '12%' }} />
                 </View>
             </ScrollView>
         </SafeAreaView>
@@ -230,7 +232,7 @@ const styles = StyleSheet.create({
     },
     warningLightText: {
         color: 'white',
-        fontSize: 18,
+        fontSize: 15,
         fontWeight: '400'
     },
     warningBoldText: {

component/global/expectedFeeBox.tsx

@@ -9,10 +9,10 @@ interface ExpectedFeeBoxProps {
 const ExpectedFeeBox: React.FC<ExpectedFeeBoxProps> = ({ extendedStyle }) => {
     return (
         <View
-            className="h-[8%] min-h-[20px] border-slate-300 rounded-2xl justify-center"
+            className=" min-h-[20px]  border-slate-300 rounded-2xl justify-center"
             style={[{ borderWidth: 1 }, extendedStyle]}
         >
-            <View className="mx-[5%] flex-row items-center justify-between">
+            <View className="flex-row items-center justify-between">
                 <View>
                     <Text className="text-lg">預計充電費用</Text>
                     <Text className="text-base color-[#888888]">

component/global/otherInformationBox.tsx

@@ -10,7 +10,7 @@ const OtherInformationBox: React.FC<OtherInformationBoxProps> = ({
 }) => {
     return (
         <View
-            className="h-[10%]  border-slate-300 rounded-2xl justify-center pl-4"
+            className="border-slate-300 rounded-2xl justify-center pl-4"
             style={[{ borderWidth: 1 }, extendedStyle]}
         >
             <Text className="text-lg pb-2">其他資訊</Text>