Skip to content

Commit 6630dff

Browse files
shuveksha-tuladharshuveksha-tuladhar
authored
Merge pull request #63 from the-collab-lab/st-tailwind
Issue #22: UI Enhancements and TailwindCSS Styling Adjustments
2 parents 3128583 + 0cf9888 commit 6630dff

22 files changed

+249
-390
lines changed

‎src/App.jsx‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Loading } from './components/Loading';
55
import { ProtectedRoute } from './components/ProtectedRoute';
66
import { useAuth, useShoppingListData, useShoppingLists } from './api';
77
import { useStateWithStorage } from './utils';
8+
import { ThemeProvider } from './context/ThemeContext';
89

910
export function App() {
1011
/**
@@ -41,42 +42,44 @@ export function App() {
4142
const data = useShoppingListData(listPath);
4243

4344
return (
44-
<Router>
45-
<Routes>
46-
<Route path="/" element={<Layout />}>
47-
<Route
48-
index
49-
element={
50-
<ProtectedRoute>
51-
<Home
52-
data={data}
53-
lists={lists}
54-
listPath={listPath}
55-
setListPath={setListPath}
56-
user={user}
57-
/>
58-
</ProtectedRoute>
59-
}
60-
/>
61-
<Route
62-
path="add-item"
63-
element={
64-
<ProtectedRoute>
65-
<AddItem listPath={listPath} user={user} data={data} />
66-
</ProtectedRoute>
67-
}
68-
/>
69-
<Route
70-
path="developers"
71-
element={
72-
<Suspense fallback={<Loading />}>
73-
<Team />
74-
</Suspense>
75-
}
76-
/>
77-
</Route>
78-
</Routes>
79-
</Router>
45+
<ThemeProvider>
46+
<Router>
47+
<Routes>
48+
<Route path="/" element={<Layout />}>
49+
<Route
50+
index
51+
element={
52+
<ProtectedRoute>
53+
<Home
54+
data={data}
55+
lists={lists}
56+
selectedListPath={listPath}
57+
setListPath={setListPath}
58+
user={user}
59+
/>
60+
</ProtectedRoute>
61+
}
62+
/>
63+
<Route
64+
path="add-item"
65+
element={
66+
<ProtectedRoute>
67+
<AddItem listPath={listPath} user={user} data={data} />
68+
</ProtectedRoute>
69+
}
70+
/>
71+
<Route
72+
path="developers"
73+
element={
74+
<Suspense fallback={<Loading />}>
75+
<Team />
76+
</Suspense>
77+
}
78+
/>
79+
</Route>
80+
</Routes>
81+
</Router>
82+
</ThemeProvider>
8083
);
8184
}
8285

‎src/components/IconButton.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '../views/Layout.css';
1+
// import '../views/Layout.css';
22

33
export function IconButton({
44
as: Component = 'button',
@@ -10,10 +10,10 @@ export function IconButton({
1010
{...props}
1111
className={`flex items-center justify-center px-4 py-4 rounded-md shadow-md transition duration-200 ease-in-out
1212
${props.className}
13-
${props.disabled ? 'bg-[#184E77] text-black cursor-not-allowed' : 'bg-[#184E77] text-white hover:bg-[#1E6091]'}`}
13+
${props.disabled ? 'bg-btnPrimary text-black cursor-not-allowed' : 'bg-btnPrimary text-white hover:bg-[#1E6091]'}`}
1414
disabled={props.disabled}
1515
>
16-
{IconComponent && <IconComponent className="mr-4 text-2xl" />}
16+
{IconComponent && <IconComponent className={`mr-2 ml-2 text-2xl `} />}
1717
{props.label && <span className="text-2xl">{props.label}</span>}
1818
</Component>
1919
);

‎src/components/ListItem.css‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/components/ListItem.jsx‎

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
22
import { useToggle } from '@uidotdev/usehooks';
33
import { Toggle } from './Toggle.jsx';
44
import { notify } from '../utils/notifications';
5-
import './ListItem.css';
65
import { updateItem, deleteItem } from '../api/firebase.js';
76
import { FaTrashAlt } from 'react-icons/fa';
87
import { IconButton } from './IconButton.jsx';
@@ -20,6 +19,17 @@ export function ListItem({
2019
const [purchased, setPurchased] = useToggle(false);
2120
const [isDisabled, setIsDisabled] = useState(false);
2221

22+
// const formatDateLastPurchased = (dateLastPurchased) => {
23+
// if (dateLastPurchased) {
24+
// const date = dateLastPurchased.toDate();
25+
// const year = date.getFullYear();
26+
// const month = date.getMonth() + 1;
27+
// const day = date.getDate();
28+
// return `${month}/${day}/${year}`;
29+
// }
30+
// return 'n/a';
31+
// };
32+
2333
useEffect(() => {
2434
if (dateLastPurchased) {
2535
const checkExpiration = () => {
@@ -79,29 +89,63 @@ export function ListItem({
7989
}
8090
};
8191

82-
const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, '');
92+
const urgencyMap = {
93+
'Due soon': {
94+
light: 'text-duesoon',
95+
dark: 'dark:text-duesoondark',
96+
},
97+
'Due kind of soon': {
98+
light: 'text-duekindofsoon',
99+
dark: 'dark:text-duekindofsoondark',
100+
},
101+
'Not due soon': {
102+
light: 'text-notduesoon',
103+
dark: 'dark:text-notduesoondark',
104+
},
105+
Overdue: {
106+
light: 'text-overdue',
107+
dark: 'dark:text-overduedark',
108+
},
109+
'No longer active': {
110+
light: 'text-nolongeractive',
111+
dark: 'dark:text-nolongeractivedark',
112+
},
113+
};
114+
115+
const mode = localStorage.getItem('theme');
83116

84117
return (
85118
<>
86-
<div className="ListItem">
87-
<Toggle
88-
toggle={handleToggle}
89-
on={purchased}
90-
name={name}
91-
isDisabled={isDisabled}
92-
dateLastPurchased={dateLastPurchased}
93-
/>
94-
{name}
95-
96-
<div className={urgencyClass}>{sortCriteria.tag}</div>
119+
<div className=" w-full relative flex text-2xl items-center p-[10px] mb-[10px] rounded-lg transition-colors duration-300 min-w-0 ">
120+
<div className="w-[30px]">
121+
<Toggle
122+
toggle={handleToggle}
123+
on={purchased}
124+
name={name}
125+
isDisabled={isDisabled}
126+
dateLastPurchased={dateLastPurchased}
127+
/>
128+
</div>
129+
<div className="flex items-center justify-between w-full">
130+
<div className=" grow mr-3">
131+
<div className="break-all font-semibold">{name}</div>
132+
</div>
97133

98-
<IconButton
99-
aria-label={`Delete ${name}`}
100-
as="button"
101-
className="p-1"
102-
IconComponent={FaTrashAlt}
103-
onClick={handleDelete}
104-
/>
134+
<div className="flex items-center gap-4">
135+
<div
136+
className={`${urgencyMap[sortCriteria.tag][mode]} text-2xl inline-flex items-center rounded-md p-2 text-2xl font-semibold ring-1 ring-inset mr-6`}
137+
>
138+
{sortCriteria.tag}{' '}
139+
</div>
140+
<IconButton
141+
aria-label={`Delete ${name}`}
142+
as="button"
143+
className="p-1 hover:scale-105 hover:shadow-md hover:shadow-black/20 transition-transform "
144+
IconComponent={FaTrashAlt}
145+
onClick={handleDelete}
146+
/>
147+
</div>
148+
</div>
105149
</div>
106150
</>
107151
);

‎src/components/ModalDialog.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export default function ModalDialog({ isOpen, onClose, children, title }) {
2424
<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
2525
<DialogTitle
2626
as="h3"
27-
className="text-2xl font-bold leading-6 text-gray-900"
27+
className="text-3xl m-1 py-1 font-bold leading-6 text-txtPrimary"
2828
>
2929
{title}
3030
</DialogTitle>
3131
<div className="mt-2">
32-
<p className="text-lg text-gray-500">{children}</p>
32+
<p className="text-xl text-gray-500">{children}</p>
3333
</div>
3434
</div>
3535
</div>

‎src/components/SingleList.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/SingleList.jsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/components/Toggle.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/Toggle.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useState } from 'react';
2-
import './Toggle.css';
32

43
export function Toggle({ on, toggle, name, isDisabled }) {
54
const [message, setMessage] = useState('');
@@ -23,20 +22,20 @@ export function Toggle({ on, toggle, name, isDisabled }) {
2322
}
2423
};
2524
return (
26-
<div className="Toggle">
27-
<label className="Toggle-label" htmlFor={name}>
25+
<div className="flex items-center mr-2">
26+
<label className="text-base" htmlFor={name}>
2827
<input
2928
type="checkbox"
3029
id={name}
3130
checked={on}
3231
onChange={handleToggle}
3332
onClick={handleClick}
34-
className="Toggle-checkbox"
33+
className="mr-2 cursor-pointer"
3534
disabled={isDisabled}
3635
aria-label={`Toggle purchase status for ${name}`}
3736
/>
3837
</label>
39-
{message && <p className="Toggle-message">{message}</p>}
38+
{message && <p className="ml-2">{message}</p>}
4039
</div>
4140
);
4241
}

‎src/components/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './ListItem';
2-
export * from './SingleList';

0 commit comments

Comments
 (0)