New favicon

This commit is contained in:
2020-08-12 20:19:41 +02:00
parent e4a4d3951d
commit 9d967a2b37
5 changed files with 192 additions and 146 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

View File

@@ -16,6 +16,7 @@ import StepLabel from "@material-ui/core/StepLabel";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Autocomplete from "@material-ui/lab/Autocomplete"; import Autocomplete from "@material-ui/lab/Autocomplete";
import InputAdornment from "@material-ui/core/InputAdornment"; import InputAdornment from "@material-ui/core/InputAdornment";
import validator from "validator";
// ICONS // ICONS
import FastfoodIcon from "@material-ui/icons/Fastfood"; import FastfoodIcon from "@material-ui/icons/Fastfood";
import LocationCityIcon from "@material-ui/icons/LocationCity"; import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -23,6 +24,9 @@ import PhoneIcon from "@material-ui/icons/Phone";
import FacebookIcon from "@material-ui/icons/Facebook"; import FacebookIcon from "@material-ui/icons/Facebook";
import TwitterIcon from "@material-ui/icons/Twitter"; import TwitterIcon from "@material-ui/icons/Twitter";
import LanguageIcon from "@material-ui/icons/Language"; import LanguageIcon from "@material-ui/icons/Language";
import ButtonPrimary from "../Input/ButtonPrimary";
// SETUP
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@@ -81,9 +85,15 @@ export default function NewRestaurant() {
const initialState = { const initialState = {
name: "", name: "",
city: "", city: "",
adress: "",
hoursFrom: "", hoursFrom: "",
hoursTo: "", hoursTo: "",
description: "", description: "",
tags: [],
phone: "",
facebook: "",
twitter: "",
www: "",
}; };
const steps = ["Informacje", "Zdjęcie", "Lokalizacja"]; const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
const [state, setState] = useState(initialState); const [state, setState] = useState(initialState);
@@ -101,6 +111,22 @@ export default function NewRestaurant() {
"Dowozimy", "Dowozimy",
]; ];
// HANDLERS
const handleNextButton = () => {
if (activeStep < 2) {
setActiveStep(activeStep + 1);
console.log(activeStep);
}
};
const handlePreviousButton = () => {
setActiveStep(activeStep - 1);
console.log(activeStep);
};
// COMPONENTS
return ( return (
<div> <div>
<Dialog <Dialog
@@ -125,154 +151,175 @@ export default function NewRestaurant() {
</Step> </Step>
))} ))}
</Stepper> </Stepper>
<Paper variant="outlined">
<div className="newRestaurant-content"> {activeStep === 0 && (
<TextField <Paper variant="outlined">
className={styles.textInput}
required
label="Nazwa lokalu"
variant="outlined"
onChange={(event) =>
(state.restaurantName = event.target.value)
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FastfoodIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
className={styles.textInput}
required
label="Miasto"
variant="outlined"
onChange={(event) =>
(state.restaurantName = event.target.value)
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocationCityIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
label="Otwarcie"
type="time"
defaultValue="07:00"
onChange={(event) => (state.hoursFrom = event.target.value)}
variant="outlined"
className={styles.timePicker}
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<TextField
label="Zamknięcie"
type="time"
defaultValue="22:00"
onChange={(event) => (state.hoursTo = event.target.value)}
variant="outlined"
className={styles.timePicker}
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<div className="newRestaurant-content-fullwidth"> <div className="newRestaurant-content-fullwidth">
<TextField <TextField
className={styles.textInputFullWidth} className={styles.textInputFullWidth}
fullWidth fullWidth
label="Opis" required
multiline label="Nazwa lokalu"
rows={3}
variant="outlined" variant="outlined"
/> onChange={(event) => (state.name = event.target.value)}
<Autocomplete InputProps={{
multiple startAdornment: (
options={availableTags} <InputAdornment position="start">
renderInput={(params) => ( <FastfoodIcon color="primary" />
<TextField </InputAdornment>
{...params} ),
className={styles.textInputFullWidth} }}
variant="outlined"
label="Tagi"
placeholder="Dodaj tagi"
/>
)}
/> />
</div> </div>
<TextField <div className="newRestaurant-content">
className={styles.textInput} <TextField
label="Telefon" className={styles.textInput}
variant="outlined" required
onChange={(event) => label="Miasto"
(state.restaurantName = event.target.value) variant="outlined"
} onChange={(event) => (state.city = event.target.value)}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<PhoneIcon color="primary" /> <LocationCityIcon color="primary" />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<TextField <TextField
className={styles.textInput} className={styles.textInput}
label="Facebook" required
variant="outlined" label="Adres"
onChange={(event) => variant="outlined"
(state.restaurantName = event.target.value) onChange={(event) => (state.adress = event.target.value)}
} InputProps={{
InputProps={{ startAdornment: (
startAdornment: ( <InputAdornment position="start">
<InputAdornment position="start"> <LocationCityIcon color="primary" />
<FacebookIcon color="primary" /> </InputAdornment>
</InputAdornment> ),
), }}
}} />
/> <TextField
<TextField label="Otwarcie"
className={styles.textInput} type="time"
label="Twitter" defaultValue="07:00"
variant="outlined" onChange={(event) => (state.hoursFrom = event.target.value)}
onChange={(event) => variant="outlined"
(state.restaurantName = event.target.value) className={styles.timePicker}
} InputLabelProps={{
InputProps={{ shrink: true,
startAdornment: ( }}
<InputAdornment position="start"> inputProps={{
<TwitterIcon color="primary" /> step: 300, // 5 min
</InputAdornment> }}
), />
}} <TextField
/> label="Zamknięcie"
<TextField type="time"
className={styles.textInput} defaultValue="22:00"
label="www" onChange={(event) => (state.hoursTo = event.target.value)}
variant="outlined" variant="outlined"
onChange={(event) => className={styles.timePicker}
(state.restaurantName = event.target.value) InputLabelProps={{
} shrink: true,
InputProps={{ }}
startAdornment: ( inputProps={{
<InputAdornment position="start"> step: 300, // 5 min
<LanguageIcon color="primary" /> }}
</InputAdornment> />
), <div className="newRestaurant-content-fullwidth">
}} <TextField
/> className={styles.textInputFullWidth}
</div> fullWidth
</Paper> label="Opis"
<ButtonSecondary text={activeStep === 2 ? "Dodaj lokal" : "Dalej"} /> onChange={(event) =>
(state.description = event.target.value)
}
multiline
rows={3}
variant="outlined"
/>
<Autocomplete
multiple
options={availableTags}
onChange={(event, values) =>
setState({ ...state, tags: values })
}
renderInput={(params) => (
<TextField
{...params}
className={styles.textInputFullWidth}
variant="outlined"
label="Tagi"
placeholder="Dodaj tagi"
/>
)}
/>
</div>
<TextField
className={styles.textInput}
label="Telefon"
type="tel"
variant="outlined"
onChange={(event) => (state.phone = event.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
className={styles.textInput}
label="Facebook"
variant="outlined"
onChange={(event) => (state.facebook = event.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FacebookIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
className={styles.textInput}
label="Twitter"
variant="outlined"
onChange={(event) => (state.twitter = event.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<TwitterIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
className={styles.textInput}
label="www"
variant="outlined"
onChange={(event) => (state.www = event.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LanguageIcon color="primary" />
</InputAdornment>
),
}}
/>
</div>
</Paper>
)}
{activeStep !== 0 && (
<ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
)}
<ButtonSecondary
onClick={handleNextButton}
text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
/>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div> </div>

View File

@@ -4,13 +4,12 @@ import Button from "@material-ui/core/Button";
const StyledButton = withStyles({ const StyledButton = withStyles({
root: { root: {
background: "none", backgroundColor: "#696969",
color: "white", color: "#262626",
border: "solid 1px white",
margin: "16px 16px 16px 0px", margin: "16px 16px 16px 0px",
padding: "8px 12px 8px 12px", padding: "8px 12px 8px 12px",
"&:hover": { "&:hover": {
color: "white", backgroundColor: "#808080",
}, },
}, },
label: { label: {
@@ -19,5 +18,5 @@ const StyledButton = withStyles({
})(Button); })(Button);
export default function ButtonPrimary(props) { export default function ButtonPrimary(props) {
return <StyledButton>{props.text}</StyledButton>; return <StyledButton onClick={props.onClick}>{props.text}</StyledButton>;
} }