fix: rides layout and accessibility
This commit is contained in:
committed by
GitHub
parent
20580c58df
commit
e9a4e892d9
@@ -13,10 +13,10 @@ const TabIcon = ({
|
|||||||
focused: boolean;
|
focused: boolean;
|
||||||
}) => (
|
}) => (
|
||||||
<View
|
<View
|
||||||
className={`flex flex-row justify-center items-center rounded-full ${focused ? "bg-general-300" : ""}`}
|
className={`flex flex-row justify-center items-center rounded-full ${focused && "bg-general-300"}`}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
className={`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-general-400" : ""}`}
|
className={`rounded-full w-12 h-12 items-center justify-center ${focused && "bg-general-400"}`}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
source={source}
|
source={source}
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ const BookRide = () => {
|
|||||||
<View className="flex flex-col w-full items-center justify-center mt-10">
|
<View className="flex flex-col w-full items-center justify-center mt-10">
|
||||||
<Image
|
<Image
|
||||||
source={{ uri: driverDetails?.profile_image_url }}
|
source={{ uri: driverDetails?.profile_image_url }}
|
||||||
|
alt="Driver Avatar"
|
||||||
className="w-28 h-28 rounded-full"
|
className="w-28 h-28 rounded-full"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -34,9 +35,11 @@ const BookRide = () => {
|
|||||||
<View className="flex flex-row items-center space-x-0.5">
|
<View className="flex flex-row items-center space-x-0.5">
|
||||||
<Image
|
<Image
|
||||||
source={icons.star}
|
source={icons.star}
|
||||||
|
alt="Star"
|
||||||
className="w-5 h-5"
|
className="w-5 h-5"
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular">
|
<Text className="text-lg font-JakartaRegular">
|
||||||
{driverDetails?.rating}
|
{driverDetails?.rating}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -47,6 +50,7 @@ const BookRide = () => {
|
|||||||
<View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
|
<View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
|
||||||
<View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
|
<View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
|
||||||
<Text className="text-lg font-JakartaRegular">Ride Price</Text>
|
<Text className="text-lg font-JakartaRegular">Ride Price</Text>
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular text-[#0CC25F]">
|
<Text className="text-lg font-JakartaRegular text-[#0CC25F]">
|
||||||
${driverDetails?.price}
|
${driverDetails?.price}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -54,6 +58,7 @@ const BookRide = () => {
|
|||||||
|
|
||||||
<View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
|
<View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
|
||||||
<Text className="text-lg font-JakartaRegular">Pickup Time</Text>
|
<Text className="text-lg font-JakartaRegular">Pickup Time</Text>
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular">
|
<Text className="text-lg font-JakartaRegular">
|
||||||
{formatTime(driverDetails?.time!)}
|
{formatTime(driverDetails?.time!)}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -61,6 +66,7 @@ const BookRide = () => {
|
|||||||
|
|
||||||
<View className="flex flex-row items-center justify-between w-full py-3">
|
<View className="flex flex-row items-center justify-between w-full py-3">
|
||||||
<Text className="text-lg font-JakartaRegular">Car Seats</Text>
|
<Text className="text-lg font-JakartaRegular">Car Seats</Text>
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular">
|
<Text className="text-lg font-JakartaRegular">
|
||||||
{driverDetails?.car_seats}
|
{driverDetails?.car_seats}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -70,6 +76,7 @@ const BookRide = () => {
|
|||||||
<View className="flex flex-col w-full items-start justify-center mt-5">
|
<View className="flex flex-col w-full items-start justify-center mt-5">
|
||||||
<View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
|
<View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
|
||||||
<Image source={icons.to} className="w-6 h-6" />
|
<Image source={icons.to} className="w-6 h-6" />
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular ml-2">
|
<Text className="text-lg font-JakartaRegular ml-2">
|
||||||
{userAddress}
|
{userAddress}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -77,6 +84,7 @@ const BookRide = () => {
|
|||||||
|
|
||||||
<View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
|
<View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
|
||||||
<Image source={icons.point} className="w-6 h-6" />
|
<Image source={icons.point} className="w-6 h-6" />
|
||||||
|
|
||||||
<Text className="text-lg font-JakartaRegular ml-2">
|
<Text className="text-lg font-JakartaRegular ml-2">
|
||||||
{destinationAddress}
|
{destinationAddress}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
|
import { router } from "expo-router";
|
||||||
import { FlatList, View } from "react-native";
|
import { FlatList, View } from "react-native";
|
||||||
|
|
||||||
|
import { CustomButton } from "@/components/custom-button";
|
||||||
import { DriverCard } from "@/components/driver-card";
|
import { DriverCard } from "@/components/driver-card";
|
||||||
import { RideLayout } from "@/components/ride-layout";
|
import { RideLayout } from "@/components/ride-layout";
|
||||||
import { CustomButton } from "@/components/custom-button";
|
|
||||||
import { router } from "expo-router";
|
|
||||||
import { useDriverStore } from "@/store";
|
import { useDriverStore } from "@/store";
|
||||||
|
|
||||||
const ConfirmRide = () => {
|
const ConfirmRide = () => {
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ export const RideLayout = ({
|
|||||||
<View className="w-10 h-10 bg-white rounded-full items-center justify-center">
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center">
|
||||||
<Image
|
<Image
|
||||||
source={icons.backArrow}
|
source={icons.backArrow}
|
||||||
|
alt="Back arrow"
|
||||||
resizeMode="contain"
|
resizeMode="contain"
|
||||||
className="w-6 h-6"
|
className="w-6 h-6"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user