diff --git a/public/index.html b/public/index.html index 7f0b400..cb26951 100644 --- a/public/index.html +++ b/public/index.html @@ -23,6 +23,16 @@ Learn how to configure a non-root public URL by running `npm run build`. --> WheelShare + diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx index 67ad5be..bb08e7d 100644 --- a/src/components/NewUI/Event.tsx +++ b/src/components/NewUI/Event.tsx @@ -116,7 +116,11 @@ export default function Event({
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'} diff --git a/src/components/NewUI/UIDatetimeInput.tsx b/src/components/NewUI/UIDatetimeInput.tsx index 4303033..5ac4cac 100644 --- a/src/components/NewUI/UIDatetimeInput.tsx +++ b/src/components/NewUI/UIDatetimeInput.tsx @@ -1,3 +1,5 @@ +import { useCallback } from 'react'; + const baseStyle = { marginTop: '0.5em', padding: '0.5em', @@ -14,18 +16,22 @@ export default function UIDatetimeInput({ onChangedDate: (date: Date | null) => void; disabled?: boolean; }) { + const onChange = useCallback( + (e) => { + const number = e.target.valueAsNumber; + if (!isNaN(number)) { + const date = new Date(number); + onChangedDate(date); + } + }, + [onChangedDate] + ); return ( { - const number = e.target.valueAsNumber; - if (!isNaN(number)) { - const date = new Date(number); - onChangedDate(date); - } - }} + onChange={onChange} /> ); } diff --git a/src/components/NewUI/UILink.tsx b/src/components/NewUI/UILink.tsx index cc0cf22..324b36f 100644 --- a/src/components/NewUI/UILink.tsx +++ b/src/components/NewUI/UILink.tsx @@ -16,9 +16,10 @@ export default function UILink({ style?: CSSProperties; children: ReactNode; }) { - const computedStyle = useMemo(() => { - return !style ? baseStyle : { ...baseStyle, ...style }; - }, [style]); + const computedStyle = useMemo( + () => (!style ? baseStyle : { ...baseStyle, ...style }), + [style] + ); return ( diff --git a/src/components/NewUI/UIPlacesAutocomplete.tsx b/src/components/NewUI/UIPlacesAutocomplete.tsx index ae936af..d57fe20 100644 --- a/src/components/NewUI/UIPlacesAutocomplete.tsx +++ b/src/components/NewUI/UIPlacesAutocomplete.tsx @@ -1,8 +1,21 @@ -import { useRef, useState } from 'react'; +import { CSSProperties, useRef, useState } from 'react'; import PlacesAutocomplete, { Suggestion } from 'react-places-autocomplete'; type Opts = Parameters['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({ suggestions, getSuggestionItemProps, @@ -11,20 +24,7 @@ function SuggestionsList({ getSuggestionItemProps: Opts['getSuggestionItemProps']; }) { return ( -
+
{suggestions.map((suggestion) => (
{ - return !style ? baseStyle : { ...baseStyle, ...style }; - }, [style]); + const computedStyle = useMemo( + () => (!style ? baseStyle : { ...baseStyle, ...style }), + [style] + ); return (
diff --git a/src/components/NewUI/UIPrimaryTitle.tsx b/src/components/NewUI/UIPrimaryTitle.tsx index bcb5715..95fc9b7 100644 --- a/src/components/NewUI/UIPrimaryTitle.tsx +++ b/src/components/NewUI/UIPrimaryTitle.tsx @@ -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 }) { - return ( -

- {children} -

- ); + return

{children}

; } diff --git a/src/components/NewUI/UITextInput.tsx b/src/components/NewUI/UITextInput.tsx index bdf7d04..cdb9bff 100644 --- a/src/components/NewUI/UITextInput.tsx +++ b/src/components/NewUI/UITextInput.tsx @@ -1,3 +1,5 @@ +import { useCallback } from 'react'; + const baseStyle = { marginTop: '0.5em', padding: '0.5em', @@ -16,12 +18,16 @@ export default function UITextInput({ disabled?: boolean; onChangeText: (text: string) => void; }) { + const onChange = useCallback( + (e) => onChangeText(e.target.value), + [onChangeText] + ); return ( onChangeText(e.target.value)} + onChange={onChange} /> ); } diff --git a/src/components/NewUI/WheelShare.tsx b/src/components/NewUI/WheelShare.tsx index beb3508..5457d22 100644 --- a/src/components/NewUI/WheelShare.tsx +++ b/src/components/NewUI/WheelShare.tsx @@ -1,20 +1,21 @@ +import { CSSProperties } from 'react'; import Events from './Events'; import Groups from './Groups'; 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() { return ( -
+
WheelShare