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`.
-->
<title>WheelShare</title>
<style>
::-webkit-scrollbar {
background-color: white;
width: 0.75rem;
}
::-webkit-scrollbar-thumb {
background-color: #e0e0e0;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<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 }} />
<UIButton
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'}
</UIButton>

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

@ -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;
}) {
return (
<input
style={baseStyle}
type="datetime-local"
disabled={disabled}
onChange={(e) => {
const onChange = useCallback(
(e) => {
const number = e.target.valueAsNumber;
if (!isNaN(number)) {
const date = new Date(number);
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;
children: ReactNode;
}) {
const computedStyle = useMemo(() => {
return !style ? baseStyle : { ...baseStyle, ...style };
}, [style]);
const computedStyle = useMemo(
() => (!style ? baseStyle : { ...baseStyle, ...style }),
[style]
);
return (
<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';
type Opts = Parameters<PlacesAutocomplete['props']['children']>['0'];
function SuggestionsList({
suggestions,
getSuggestionItemProps,
}: {
suggestions: readonly Suggestion[];
getSuggestionItemProps: Opts['getSuggestionItemProps'];
}) {
return (
<div
style={{
const style: CSSProperties = {
marginTop: '-1em',
paddingTop: '2em',
paddingBottom: '1em',
@ -23,8 +14,17 @@ function SuggestionsList({
backgroundColor: 'white',
maxWidth: '100%',
textAlign: 'left',
}}
>
};
function SuggestionsList({
suggestions,
getSuggestionItemProps,
}: {
suggestions: readonly Suggestion[];
getSuggestionItemProps: Opts['getSuggestionItemProps'];
}) {
return (
<div style={style}>
{suggestions.map((suggestion) => (
<div
{...getSuggestionItemProps(suggestion)}

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

@ -15,9 +15,10 @@ export default function UIPressable({
style?: CSSProperties;
children: ReactNode;
}) {
const computedStyle = useMemo(() => {
return !style ? baseStyle : { ...baseStyle, ...style };
}, [style]);
const computedStyle = useMemo(
() => (!style ? baseStyle : { ...baseStyle, ...style }),
[style]
);
return (
<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 }) {
return (
<h1
style={{
const style: CSSProperties = {
fontSize: '4rem',
marginTop: '0.25em',
marginBottom: '0.25em',
}}
>
{children}
</h1>
);
};
export default function UIPrimaryTitle({ children }: { children: ReactNode }) {
return <h1 style={style}>{children}</h1>;
}

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

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