diff --git a/public/index.html b/public/index.html index cb26951..26a8a0c 100644 --- a/public/index.html +++ b/public/index.html @@ -32,6 +32,9 @@ background-color: #e0e0e0; border-radius: 0.5rem; } + input:focus { + outline: none !important; + } diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx index bb08e7d..f2f7356 100644 --- a/src/components/NewUI/Event.tsx +++ b/src/components/NewUI/Event.tsx @@ -3,7 +3,6 @@ import UIButton from './UIButton'; import UIPlacesAutocomplete from './UIPlacesAutocomplete'; import UISecondaryBox from './UISecondaryBox'; import UISecondaryHeader from './UISecondaryHeader'; -import UITimeInput from './UITimeInput'; const green = '#60f760'; const lightgrey = '#e0e0e0'; @@ -102,11 +101,14 @@ export default function Event({ startTime, endTime, }: IEvent) { - const [needRideThere, setNeedRideThere] = useState(false); - const [needRideBack, setNeedRideBack] = useState(false); - const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState(''); - const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState(''); - const [confirmed, setConfirmed] = useState(false); + const [haveRideThere, setHaveRideThere] = useState(false); + const [haveRideBack, setHaveRideBack] = useState(false); + const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState( + null! + ); + const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState( + null! + ); const [interested, setInterested] = useState(false); return ( @@ -126,100 +128,64 @@ export default function Event({ {interested && ( <> + { + setRideTherePickupPlaceID(placeID); + }} + style={ + rideTherePickupPlaceID != null + ? { border: '2px solid ' + green } + : {} + } + /> + { + setRideBackDropoffPlaceID(placeID); + }} + style={ + rideBackDropoffPlaceID != null + ? { border: '2px solid ' + green } + : {} + } + /> +
{ - setNeedRideThere((needRideThere) => !needRideThere); + setHaveRideThere((haveRideThere) => !haveRideThere); }} > - I need a ride there + I have a ride there { - setNeedRideBack((needRideBack) => !needRideBack); + setHaveRideBack((haveRideBack) => !haveRideBack); }} > - I need a ride back + I have a ride back
- {needRideThere && ( - <> - - Ride There - - { - setRideTherePickupPlaceID(placeID); - setConfirmed(false); - }} - /> - - - )} - {needRideBack && ( - <> - - Ride Back - - { - setRideBackDropoffPlaceID(placeID); - setConfirmed(false); - }} - /> - - - )} - {(needRideThere || needRideBack) && - (rideTherePickupPlaceID || rideBackDropoffPlaceID) && ( - { - setConfirmed((confirmed) => !confirmed); - }} - > - {confirmed ? 'Confirmed' : 'Confirm'} - - )} )} diff --git a/src/components/NewUI/UIPlacesAutocomplete.tsx b/src/components/NewUI/UIPlacesAutocomplete.tsx index d57fe20..7a460bf 100644 --- a/src/components/NewUI/UIPlacesAutocomplete.tsx +++ b/src/components/NewUI/UIPlacesAutocomplete.tsx @@ -44,10 +44,12 @@ export default function UIPlacesAutocomplete({ onSelected, placeholder = 'Enter a location', disabled = false, + style, }: { onSelected?: (address: string, placeID: string) => void; placeholder?: string; disabled?: boolean; + style?: CSSProperties; }) { const [location, setLocation] = useState(''); const suggestionsRef = useRef([]); @@ -89,6 +91,7 @@ export default function UIPlacesAutocomplete({ borderRadius: '0.5em', border: '0px', zIndex: 1, + ...(style ?? {}), }, placeholder, })}