rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve event ui again

Browse Source
This commit is contained in:
Michael Fatemi 2021-06-26 21:19:49 -04:00
parent 36b9d47213
commit aa9e7fc5ab
3 changed files with 45 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -32,6 +32,9 @@
background-color: #e0e0e0; background-color: #e0e0e0;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
input:focus {
outline: none !important;
}
</style> </style>
</head> </head>
<body> <body>

112
src/components/NewUI/Event.tsx
View File

@ -3,7 +3,6 @@ import UIButton from './UIButton';
import UIPlacesAutocomplete from './UIPlacesAutocomplete'; import UIPlacesAutocomplete from './UIPlacesAutocomplete';
import UISecondaryBox from './UISecondaryBox'; import UISecondaryBox from './UISecondaryBox';
import UISecondaryHeader from './UISecondaryHeader'; import UISecondaryHeader from './UISecondaryHeader';
import UITimeInput from './UITimeInput';
const green = '#60f760'; const green = '#60f760';
const lightgrey = '#e0e0e0'; const lightgrey = '#e0e0e0';
@ -102,11 +101,14 @@ export default function Event({
startTime, startTime,
endTime, endTime,
}: IEvent) { }: IEvent) {
const [needRideThere, setNeedRideThere] = useState(false); const [haveRideThere, setHaveRideThere] = useState(false);
const [needRideBack, setNeedRideBack] = useState(false); const [haveRideBack, setHaveRideBack] = useState(false);
const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState(''); const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState<string>(
const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState(''); null!
const [confirmed, setConfirmed] = useState(false); );
const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState<string>(
null!
);
const [interested, setInterested] = useState(false); const [interested, setInterested] = useState(false);
return ( return (
@ -126,100 +128,64 @@ export default function Event({
</UIButton> </UIButton>
{interested && ( {interested && (
<> <>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
}}
style={
rideTherePickupPlaceID != null
? { border: '2px solid ' + green }
: {}
}
/>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
}}
style={
rideBackDropoffPlaceID != null
? { border: '2px solid ' + green }
: {}
}
/>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
justifyContent: 'center', justifyContent: 'center',
marginTop: '1rem',
}} }}
> >
<UIButton <UIButton
style={{ style={{
backgroundColor: needRideThere ? green : lightgrey, backgroundColor: haveRideThere ? green : lightgrey,
color: needRideThere ? 'white' : 'black', color: haveRideThere ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s', transition: 'color 0.2s, background-color 0.2s',
marginRight: '0.5em', marginRight: '0.5em',
}} }}
onClick={() => { onClick={() => {
setNeedRideThere((needRideThere) => !needRideThere); setHaveRideThere((haveRideThere) => !haveRideThere);
}} }}
> >
I need a ride there I have a ride there
</UIButton> </UIButton>
<UIButton <UIButton
style={{ style={{
backgroundColor: needRideBack ? green : lightgrey, backgroundColor: haveRideBack ? green : lightgrey,
color: needRideBack ? 'white' : 'black', color: haveRideBack ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s', transition: 'color 0.2s, background-color 0.2s',
marginLeft: '0.5em', marginLeft: '0.5em',
}} }}
onClick={() => { onClick={() => {
setNeedRideBack((needRideBack) => !needRideBack); setHaveRideBack((haveRideBack) => !haveRideBack);
}} }}
> >
I need a ride back I have a ride back
</UIButton> </UIButton>
</div> </div>
{needRideThere && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride There
</span>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{needRideBack && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride Back
</span>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{(needRideThere || needRideBack) &&
(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
<UIButton
style={{
backgroundColor: confirmed ? green : lightgrey,
color: confirmed ? 'white' : 'black',
}}
onClick={() => {
setConfirmed((confirmed) => !confirmed);
}}
>
{confirmed ? 'Confirmed' : 'Confirm'}
</UIButton>
)}
</> </>
)} )}
</UISecondaryBox> </UISecondaryBox>

3
src/components/NewUI/UIPlacesAutocomplete.tsx
View File

@ -44,10 +44,12 @@ export default function UIPlacesAutocomplete({
onSelected, onSelected,
placeholder = 'Enter a location', placeholder = 'Enter a location',
disabled = false, disabled = false,
style,
}: { }: {
onSelected?: (address: string, placeID: string) => void; onSelected?: (address: string, placeID: string) => void;
placeholder?: string; placeholder?: string;
disabled?: boolean; disabled?: boolean;
style?: CSSProperties;
}) { }) {
const [location, setLocation] = useState(''); const [location, setLocation] = useState('');
const suggestionsRef = useRef<readonly Suggestion[]>([]); const suggestionsRef = useRef<readonly Suggestion[]>([]);
@ -89,6 +91,7 @@ export default function UIPlacesAutocomplete({
borderRadius: '0.5em', borderRadius: '0.5em',
border: '0px', border: '0px',
zIndex: 1, zIndex: 1,
...(style ?? {}),
}, },
placeholder, placeholder,
})} })}