Skip to content

Commit

Permalink
Merge pull request #89 from the-collab-lab/km-fix-forms
Browse files Browse the repository at this point in the history 
Added styling and darkmode for forms
  • Loading branch information
@MiliMade
MiliMade committed Apr 6, 2024
2 parents 44e7fb8 + 39b0760 commit a99ecc0
Show file tree
Hide file tree
Showing 2 changed files with 146 additions and 40 deletions.
54 changes: 40 additions & 14 deletions src/views/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,15 @@ export function Home({ data, setListPath, userEmail, userId }) {
onSubmit={handleSubmit}
sx={{
'& .MuiTextField-root': { m: 1, width: '25ch' },
padding: '20px',
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderColor: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderStyle: 'solid',
borderWidth: '1px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa',
}}
noValidate
autoComplete="off"
Expand All @@ -135,7 +144,13 @@ export function Home({ data, setListPath, userEmail, userId }) {
<InputLabel
htmlFor="shopping-list-name"
size="normal"
// className="centered-block"
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa',
fontSize: '2rem',
}}
>
Enter new list name:
</InputLabel>
Expand All @@ -147,24 +162,35 @@ export function Home({ data, setListPath, userEmail, userId }) {
value={shoppingListName}
placeholder="Add list"
className="input-button-common"
/>
<Button
sx={{
color: (theme) => {
return theme.palette.mode === 'dark'
? '#f8f9fa'
: '#003780';
input: {
fontSize: '1.5rem',
'&::placeholder': {
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
fontSize: '1.5rem',
opacity: '0.7',
},
},

border: (theme) => {
return theme.palette.mode === 'dark'
? '1px solid #f8f9fa'
: '1px solid #003780';
},
width: '80px',
}}
/>
<Button

type="submit"
disabled={shoppingListName.length === 0}
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderColor: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderStyle: 'solid',
borderWidth: '1px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa',
fontSize: '1.5rem',
margin: '10px',
}}

>
Submit
</Button>
Expand Down
132 changes: 106 additions & 26 deletions src/views/List.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,29 +129,69 @@ export function List({ data, listPath }) {
<form onSubmit={handleSubmit}>
{/* Add item form for larger screens */}
<Box
sx={{ width: '100%', display: { xs: 'none', md: 'block' }, mr: 1 }}
sx={{
width: '100%',
display: { xs: 'none', md: 'block' },
mr: 1,
borderColor: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderStyle: 'solid',
borderWidth: '1px',
padding: '20px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa',
}}
>
<Grid
container
alignItems="flex-end"
alignItems="center"
spacing={2}
justifyContent="center"
justifyContent="space-around"
>
<Grid item>
<Typography variant="h4">Add an item</Typography>
<Typography
variant="h4"
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
}}
>
Add an item:{' '}
</Typography>
</Grid>
<Grid item>
<FormControl
variant="standard"
sx={{ minWidth: { md: 140, lg: 210 } }}
>
<InputLabel htmlFor="itemName">Enter item name:</InputLabel>
<InputLabel
htmlFor="itemName"
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
fontSize: '1.5rem',
}}
>
Enter item name:
</InputLabel>
<Input
id="itemName"
placeholder="Item Name"
value={item.name}
name="name"
onChange={handleAddItemChange}
sx={{
input: {
'&::placeholder': {
color: (theme) =>
theme.palette.mode === 'dark'
? '#f8f9fa'
: '#003780',
fontSize: '1.5rem',
opacity: '0.7',
},
},
}}
/>
</FormControl>
</Grid>
Expand All @@ -162,7 +202,11 @@ export function List({ data, listPath }) {
>
<InputLabel
id="purchaseUrgencyInput"
sx={{ fontSize: '0.9rem' }}
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
fontSize: '1.3rem',
}}
>
How soon will you buy this item:
</InputLabel>
Expand All @@ -183,22 +227,22 @@ export function List({ data, listPath }) {
</Grid>
<Grid item>
<Button
sx={{
color: (theme) => {
return theme.palette.mode === 'dark'
? '#f8f9fa'
: '#003780';
},

border: (theme) => {
return theme.palette.mode === 'dark'
? '1px solid #f8f9fa'
: '1px solid #003780';
},
width: '80px',
}}
type="submit"
variant="outlined"
sx={{
color:
'(theme)=>theme.palette.mode ==="dark" ? "#f8f9fa": "#003780"',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa',
borderColor: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
borderStyle: 'solid',
borderWidth: '1px',
fontSize: '1.5rem',
margin: '10px',
}}

>
Submit
</Button>
Expand Down Expand Up @@ -304,8 +348,16 @@ export function List({ data, listPath }) {
// shown when list is empty
const renderAddFirstItemCTA = () => {
return (
<div>
<h2>{listName} List</h2>
<div style={{ width: '100%' }}>
<Typography
variant="h2"
sx={{
color:
'(theme)=>theme.palette.mode ==="dark" ? "#f8f9fa": "#003780"',
}}
>
{listName} List
</Typography>
<p>Your shopping list is empty!</p>
<p>Use the form below to add your first item!</p>
{addItemForm()}
Expand All @@ -315,7 +367,7 @@ export function List({ data, listPath }) {

const renderItemList = () => {
return (
<div>
<div style={{ width: '100%' }}>
<Box
sx={{
flexDirection: { xs: 'column', md: 'row' },
Expand All @@ -328,15 +380,42 @@ export function List({ data, listPath }) {
width: '100%',
}}
>
<h1>{listName} List</h1>
<Typography
variant="h2"
sx={{
color:
'(theme)=>theme.palette.mode ==="dark" ? "#f8f9fa": "#003780"',
}}
>
{listName} List
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<FormControl variant="standard" sx={{ width: '250px' }}>
<InputLabel htmlFor="itemSearch">Search for an item:</InputLabel>
<InputLabel
htmlFor="itemSearch"
sx={{
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
fontSize: '1.3rem',
}}
>
Search for an item:
</InputLabel>
<Input
id="itemSearch"
placeholder="Search items"
value={searchTerm}
onChange={handleChange}
sx={{
input: {
'&::placeholder': {
color: (theme) =>
theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780',
fontSize: '1.5rem',
opacity: '0.7',
},
},
}}
startAdornment={
<InputAdornment position="start">
<SearchIcon />
Expand Down Expand Up @@ -423,9 +502,10 @@ export function List({ data, listPath }) {
<Grid container spacing={2}>
{filteredData.map((item) => {
return (
<Grid key={item.id} item xs={12} md={6}>

<Grid item xs={12} md={6} key={item.id}>
<ListItem
// key={item.id}

daysUntilNextPurchase={item.daysUntilNextPurchase}
dateLastPurchased={item.dateLastPurchased}
itemId={item.id}
Expand Down

0 comments on commit a99ecc0

Please sign in to comment.