Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ISSUE 14] - Add Material UI throughout app #75

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
4045552
fix: update exports from components folder, add ShareList
kweeuhree Oct 16, 2024
7e4e609
feat: update imports, add MUI Box component
kweeuhree Oct 16, 2024
978a24d
wq
kweeuhree Oct 16, 2024
7fa8bf1
feat: use MUI Button component for sign in and sign out buttons
kweeuhree Oct 16, 2024
e3d20e4
fix: update buttonStyle import
kweeuhree Oct 16, 2024
86fe281
fix: remove comments
kweeuhree Oct 16, 2024
9d8b167
feat: add MUI components and update labels to be more friendly
kweeuhree Oct 16, 2024
fe85941
feat: add MUI components and minor custom styling
kweeuhree Oct 16, 2024
7358af1
feat: use TextField component instead of input and use Typography com…
kweeuhree Oct 16, 2024
f0d4eb1
feat: ConfirmDialog exports typography style
kweeuhree Oct 16, 2024
76e3090
feat: add MUI components and minor custom styling
kweeuhree Oct 16, 2024
f41fd52
feat: add MUI components
kweeuhree Oct 16, 2024
13c9e46
feat: update SingleList component
kweeuhree Oct 16, 2024
4c88cf1
feat: update List component
kweeuhree Oct 16, 2024
8a6c5e1
feat: update ListItem imports and remove redundant console log
kweeuhree Oct 16, 2024
d9f5cfe
test: update labels in List test
kweeuhree Oct 16, 2024
2d12b86
test: update labels in ManageList test
kweeuhree Oct 16, 2024
a9d3373
Merge branch 'main' of https://github.com/the-collab-lab/tcl-75-smart…
kweeuhree Oct 17, 2024
560ba74
feat: introduce a collapsible box in List component that displays Add…
kweeuhree Oct 17, 2024
e8d4d27
test: add a data-testid for New Item button for testing purposes
kweeuhree Oct 17, 2024
8a90574
test: update List test to be able to click on a New Item button
kweeuhree Oct 17, 2024
f0a0a54
fix: update kindOfSoon to be "kind of soon" and notSoon to be "not soon"
kweeuhree Oct 17, 2024
78fe00e
feat: add paper component across the views, add variation of MUI prim…
kweeuhree Oct 17, 2024
d6e08d8
fix: import darkPaperStyle, lightPaperStyle from App
kweeuhree Oct 18, 2024
d5443d7
remove exported custom styles into a MUIStyles.js
kweeuhree Oct 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
…-shopping-list into nk-add-mui-throughout-app
kweeuhree committed Oct 17, 2024
commit a9d33731dd0fd91be8ef947c03b04b70a7db9012
42 changes: 31 additions & 11 deletions src/views/List.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import React, { useState } from 'react';
import { useEnsureListPath, useUrgency } from '../hooks';
import { getUrgency } from '../utils/urgencyUtils';
import { List as UnorderedList, Paper, Typography } from '@mui/material';
import {
List as UnorderedList,
Box,
Grid,
Paper,
Typography,
} from '@mui/material';
import { ListItem, AddItems, TextInputElement } from '../components';

const paperStyle = {
@@ -52,17 +58,31 @@ export const List = React.memo(function List({ data, listPath }) {
<Typography variant="h3" my="2rem">
{listName}
</Typography>
<Box sx={{ flexGrow: 1 }}>
<Grid
container
spacing={8}
columns={16}
justifyContent="space-between"
>
<Grid item size={{ xs: 2, sm: 4, md: 4 }}>
<AddItems items={data} />
</Grid>
<Grid item size={{ xs: 2, sm: 4, md: 4 }}>
<form onSubmit={(event) => event.preventDefault()}>
<TextInputElement
id="search-item"
type="search"
placeholder="Search item..."
required={true}
onChange={handleTextChange}
label="Search item:"
/>
</form>
</Grid>
</Grid>
</Box>

<form onSubmit={(event) => event.preventDefault()}>
<TextInputElement
id="search-item"
type="search"
placeholder="Search item..."
required={true}
onChange={handleTextChange}
label="Search item:"
/>
</form>
<UnorderedList>
{filteredItems.map((item) => {
const itemUrgencyStatus = getUrgency(item.name, urgencyObject);
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.