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

make event better

Browse Source
This commit is contained in:
Michael Fatemi 2021-06-26 21:10:16 -04:00
parent a6077d7750
commit 36b9d47213
9 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -23,6 +23,16 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>WheelShare</title> <title>WheelShare</title>
<style>
::-webkit-scrollbar {
background-color: white;
width: 0.75rem;
}
::-webkit-scrollbar-thumb {
background-color: #e0e0e0;
border-radius: 0.5rem;
}
</style>
</head> </head>
<body> <body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script>

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

@ -116,7 +116,11 @@ export default function Event({
<Details {...{ startTime, endTime, formattedAddress }} /> <Details {...{ startTime, endTime, formattedAddress }} />
<UIButton <UIButton
onClick={() => setInterested((i) => !i)} onClick={() => setInterested((i) => !i)}
style={{ backgroundColor: '#e0e0e0' }} style={{
backgroundColor: interested ? green : lightgrey,
color: interested ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
}}
> >
{interested ? 'Interested' : 'Not interested'} {interested ? 'Interested' : 'Not interested'}
</UIButton> </UIButton>

20
src/components/NewUI/UIDatetimeInput.tsx
View File

@ -1,3 +1,5 @@
import { useCallback } from 'react';
const baseStyle = { const baseStyle = {
marginTop: '0.5em', marginTop: '0.5em',
padding: '0.5em', padding: '0.5em',
@ -14,18 +16,22 @@ export default function UIDatetimeInput({
onChangedDate: (date: Date | null) => void; onChangedDate: (date: Date | null) => void;
disabled?: boolean; disabled?: boolean;
}) { }) {
const onChange = useCallback(
(e) => {
const number = e.target.valueAsNumber;
if (!isNaN(number)) {
const date = new Date(number);
onChangedDate(date);
}
},
[onChangedDate]
);
return ( return (
<input <input
style={baseStyle} style={baseStyle}
type="datetime-local" type="datetime-local"
disabled={disabled} disabled={disabled}
onChange={(e) => { onChange={onChange}
const number = e.target.valueAsNumber;
if (!isNaN(number)) {
const date = new Date(number);
onChangedDate(date);
}
}}
/> />
); );
} }

7
src/components/NewUI/UILink.tsx
View File

@ -16,9 +16,10 @@ export default function UILink({
style?: CSSProperties; style?: CSSProperties;
children: ReactNode; children: ReactNode;
}) { }) {
const computedStyle = useMemo(() => { const computedStyle = useMemo(
return !style ? baseStyle : { ...baseStyle, ...style }; () => (!style ? baseStyle : { ...baseStyle, ...style }),
}, [style]); [style]
);
return ( return (
<Link to={href} style={computedStyle}> <Link to={href} style={computedStyle}>

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

@ -1,8 +1,21 @@
import { useRef, useState } from 'react'; import { CSSProperties, useRef, useState } from 'react';
import PlacesAutocomplete, { Suggestion } from 'react-places-autocomplete'; import PlacesAutocomplete, { Suggestion } from 'react-places-autocomplete';
type Opts = Parameters<PlacesAutocomplete['props']['children']>['0']; type Opts = Parameters<PlacesAutocomplete['props']['children']>['0'];
const style: CSSProperties = {
marginTop: '-1em',
paddingTop: '2em',
paddingBottom: '1em',
paddingLeft: '1em',
paddingRight: '1em',
borderBottomLeftRadius: '0.5em',
borderBottomRightRadius: '0.5em',
backgroundColor: 'white',
maxWidth: '100%',
textAlign: 'left',
};
function SuggestionsList({ function SuggestionsList({
suggestions, suggestions,
getSuggestionItemProps, getSuggestionItemProps,
@ -11,20 +24,7 @@ function SuggestionsList({
getSuggestionItemProps: Opts['getSuggestionItemProps']; getSuggestionItemProps: Opts['getSuggestionItemProps'];
}) { }) {
return ( return (
<div <div style={style}>
style={{
marginTop: '-1em',
paddingTop: '2em',
paddingBottom: '1em',
paddingLeft: '1em',
paddingRight: '1em',
borderBottomLeftRadius: '0.5em',
borderBottomRightRadius: '0.5em',
backgroundColor: 'white',
maxWidth: '100%',
textAlign: 'left',
}}
>
{suggestions.map((suggestion) => ( {suggestions.map((suggestion) => (
<div <div
{...getSuggestionItemProps(suggestion)} {...getSuggestionItemProps(suggestion)}

7
src/components/NewUI/UIPressable.tsx
View File

@ -15,9 +15,10 @@ export default function UIPressable({
style?: CSSProperties; style?: CSSProperties;
children: ReactNode; children: ReactNode;
}) { }) {
const computedStyle = useMemo(() => { const computedStyle = useMemo(
return !style ? baseStyle : { ...baseStyle, ...style }; () => (!style ? baseStyle : { ...baseStyle, ...style }),
}, [style]); [style]
);
return ( return (
<div onClick={onClick} style={computedStyle}> <div onClick={onClick} style={computedStyle}>

20
src/components/NewUI/UIPrimaryTitle.tsx
View File

@ -1,15 +1,11 @@
import { ReactNode } from 'react'; import { CSSProperties, ReactNode } from 'react';
const style: CSSProperties = {
fontSize: '4rem',
marginTop: '0.25em',
marginBottom: '0.25em',
};
export default function UIPrimaryTitle({ children }: { children: ReactNode }) { export default function UIPrimaryTitle({ children }: { children: ReactNode }) {
return ( return <h1 style={style}>{children}</h1>;
<h1
style={{
fontSize: '4rem',
marginTop: '0.25em',
marginBottom: '0.25em',
}}
>
{children}
</h1>
);
} }

8
src/components/NewUI/UITextInput.tsx
View File

@ -1,3 +1,5 @@
import { useCallback } from 'react';
const baseStyle = { const baseStyle = {
marginTop: '0.5em', marginTop: '0.5em',
padding: '0.5em', padding: '0.5em',
@ -16,12 +18,16 @@ export default function UITextInput({
disabled?: boolean; disabled?: boolean;
onChangeText: (text: string) => void; onChangeText: (text: string) => void;
}) { }) {
const onChange = useCallback(
(e) => onChangeText(e.target.value),
[onChangeText]
);
return ( return (
<input <input
style={baseStyle} style={baseStyle}
value={value} value={value}
disabled={disabled} disabled={disabled}
onChange={(e) => onChangeText(e.target.value)} onChange={onChange}
/> />
); );
} }

23
src/components/NewUI/WheelShare.tsx
View File

@ -1,20 +1,21 @@
import { CSSProperties } from 'react';
import Events from './Events'; import Events from './Events';
import Groups from './Groups'; import Groups from './Groups';
import UIPrimaryTitle from './UIPrimaryTitle'; import UIPrimaryTitle from './UIPrimaryTitle';
const style: CSSProperties = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '30rem',
maxWidth: '30rem',
marginLeft: 'auto',
marginRight: 'auto',
};
export default function WheelShare() { export default function WheelShare() {
return ( return (
<div <div style={style}>
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '30rem',
maxWidth: '30rem',
marginLeft: 'auto',
marginRight: 'auto',
}}
>
<UIPrimaryTitle>WheelShare</UIPrimaryTitle> <UIPrimaryTitle>WheelShare</UIPrimaryTitle>
<Groups /> <Groups />