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;
}) { }) {
return ( const onChange = useCallback(
<input (e) => {
style={baseStyle}
type="datetime-local"
disabled={disabled}
onChange={(e) => {
const number = e.target.valueAsNumber; const number = e.target.valueAsNumber;
if (!isNaN(number)) { if (!isNaN(number)) {
const date = new Date(number); const date = new Date(number);
onChangedDate(date); onChangedDate(date);
} }
}} },
[onChangedDate]
);
return (
<input
style={baseStyle}
type="datetime-local"
disabled={disabled}
onChange={onChange}
/> />
); );
} }

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}>

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

@ -1,18 +1,9 @@
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'];
function SuggestionsList({ const style: CSSProperties = {
suggestions,
getSuggestionItemProps,
}: {
suggestions: readonly Suggestion[];
getSuggestionItemProps: Opts['getSuggestionItemProps'];
}) {
return (
<div
style={{
marginTop: '-1em', marginTop: '-1em',
paddingTop: '2em', paddingTop: '2em',
paddingBottom: '1em', paddingBottom: '1em',
@ -23,8 +14,17 @@ function SuggestionsList({
backgroundColor: 'white', backgroundColor: 'white',
maxWidth: '100%', maxWidth: '100%',
textAlign: 'left', textAlign: 'left',
}} };
>
function SuggestionsList({
suggestions,
getSuggestionItemProps,
}: {
suggestions: readonly Suggestion[];
getSuggestionItemProps: Opts['getSuggestionItemProps'];
}) {
return (
<div style={style}>
{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}>

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

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

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

@ -1,11 +1,9 @@
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';
export default function WheelShare() { const style: CSSProperties = {
return (
<div
style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
@ -13,8 +11,11 @@ export default function WheelShare() {
maxWidth: '30rem', maxWidth: '30rem',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} };
>
export default function WheelShare() {
return (
<div style={style}>
<UIPrimaryTitle>WheelShare</UIPrimaryTitle> <UIPrimaryTitle>WheelShare</UIPrimaryTitle>
<Groups /> <Groups />