replace wordmark with logo

global-setup.ts

@@ -24,6 +24,11 @@ vi.mock('@mui/x-date-pickers');
 vi.mock('./src/lib/api/getTimezones');
 vi.mock('./src/lib/api/getCheckoutSession');
 vi.mock('./src/lib/stripe');
+vi.mock('./src/lib/api/getTasks');
+vi.mock('./src/lib/api/getMe');
+vi.mock('./src/lib/api/updateTask');
+vi.mock('./src/lib/api/addTask');
+vi.mock('react-list');
 vi.mock('./src/lib/saveFeedback');
 
 global.scrollTo = vi.fn() as any;
@@ -46,6 +51,8 @@ beforeEach(() => {
 	fetchMock.resetMocks();
 	deleteAllCookies();
 	window.localStorage.clear();
+	vi.setSystemTime(new Date('2020-01-01T00:00:00.000Z'));
+
 	vi.mocked(getCheckoutSession).mockResolvedValue({
 		id: 'session',
 	});

src/App.spec.tsx

@@ -58,22 +58,6 @@ describe('App', () => {
 		);
 	});
 
-	it('re-scrolls tasks list when today icon clicked', async () => {
-		vi.setSystemTime(new Date('1/1/2020'));
-
-		loadTasksApiData({
-			tasks: [makeTask({ due: '1/1/2020, 11:59 PM', task: 'task 1' })],
-		});
-
-		renderPage();
-
-		await userEvent.click(await screen.findByLabelText('today'));
-
-		await waitFor(() => {
-			expect(__listRef.scrollTo).toHaveBeenCalledWith(0);
-		});
-	});
-
 	it('has filter entries', async () => {
 		renderPage();
 
@@ -188,25 +172,6 @@ describe('App', () => {
 		resolve();
 	});
 
-	it('scrolls to today', async () => {
-		vi.setSystemTime(new Date('1/7/2020'));
-
-		loadTasksApiData({
-			tasks: [
-				makeTask({ due: '1/1/2020, 11:59 PM', task: 'task 1' }),
-				makeTask({ due: '1/7/2020, 11:59 PM', task: 'task 1' }),
-			],
-		});
-
-		renderPage();
-
-		await userEvent.click(await screen.findByLabelText('today'));
-
-		await waitFor(() => {
-			expect(__listRef.scrollTo).toHaveBeenCalledWith(2);
-		});
-	});
-
 	it('prevents adding task with due date in the past', async () => {
 		vi.setSystemTime(new Date('1/1/2023'));
 
@@ -233,9 +198,7 @@ describe('App', () => {
 	});
 
 	it('allows user to create new task based on existing task', async () => {
-		// User should be able to select "Copy" from a task's context menu. This
-		// should open the "New Task" form, prefilling the form with the existing
-		// task's title, due date, and stakes.
+		vi.setSystemTime(new Date('1/29/2020'));
 
 		loadTasksApiData({
 			tasks: [makeTask({ task: 'the_task' })],
@@ -254,6 +217,8 @@ describe('App', () => {
 	});
 
 	it('copies task name into form when copying task', async () => {
+		vi.setSystemTime(new Date('1/29/2020'));
+
 		loadTasksApiData({
 			tasks: [makeTask({ task: 'the_task' })],
 		});
@@ -292,6 +257,8 @@ describe('App', () => {
 	});
 
 	it('copies task stakes into form when copying task', async () => {
+		vi.setSystemTime(new Date('1/29/2020'));
+
 		loadTasksApiData({
 			tasks: [makeTask({ cents: 100 })],
 		});
@@ -308,26 +275,9 @@ describe('App', () => {
 		expect(await screen.findByLabelText('Stakes *')).toHaveValue(1);
 	});
 
-	it('sets date input to one week in future when copying task with due date in past', async () => {
-		vi.setSystemTime('2/1/2020');
-
-		loadTasksApiData({
-			tasks: [makeTask({ due: '1/1/2020, 11:59 PM' })],
-		});
-
-		renderPage();
-
-		await screen.findByText('the_task');
-
-		await userEvent.click(await screen.findByLabelText('Menu'));
-		await userEvent.click(screen.getByText('Copy'));
-
-		expect(await screen.findByLabelText('Due Date *')).toHaveValue(
-			'02/08/2020'
-		);
-	});
-
 	it('closes menu when clicking copy', async () => {
+		vi.setSystemTime(new Date('1/29/2020'));
+
 		loadTasksApiData({
 			tasks: [makeTask({ task: 'the_task' })],
 		});

src/App.tsx

@@ -14,14 +14,14 @@ import 'react-toastify/dist/ReactToastify.css';
 import { IS_PRODUCTION } from './tr_constants';
 import { QueryClientProvider } from 'react-query';
 import NavBar from './components/organisms/NavBar';
-import browser from './lib/Browser';
 import { Box, Container, CssBaseline, Stack, Alert } from '@mui/material';
 import { H } from 'highlight.run';
 import getQueryClient from './lib/getQueryClient';
 import { ErrorBoundary } from '@highlight-run/react';
 import Account from './components/pages/Account';
 import Tasks from './components/pages/Tasks';
 import ga from './lib/ga';
+import Archive from './components/pages/Archive';
 
 toast.configure();
 
@@ -49,15 +49,11 @@ function usePageViews(): void {
 }
 
 export function App(): JSX.Element {
-	const [lastToday, setLastToday] = useState<Date>();
+	const [lastToday] = useState<Date>();
 	const ref = useRef<HTMLElement>();
 	const location = useLocation();
 	const queryClient = getQueryClient();
 
-	const handleTodayClick = () => {
-		setLastToday(browser.getNowDate());
-	};
-
 	useEffect(() => {
 		document.title = 'TaskRatchet';
 	}, []);
@@ -83,7 +79,7 @@ export function App(): JSX.Element {
 		<QueryClientProvider client={queryClient}>
 			<CssBaseline />
 			<Stack sx={{ height: '100vh' }}>
-				<NavBar onTodayClick={handleTodayClick} />
+				<NavBar />
 				<Box ref={ref} overflow={'scroll'} flexGrow={1}>
 					<Container
 						maxWidth={'sm'}
@@ -93,6 +89,17 @@ export function App(): JSX.Element {
 						}}
 					>
 						<Routes>
+							<Route path="/maybe" element={<>maybe</>} />
+
+							<Route
+								path="/archive"
+								element={
+									<Authenticated>
+										<Archive />
+									</Authenticated>
+								}
+							/>
+
 							<Route path={'/register'} element={<RegisterForm />} />
 
 							<Route
@@ -133,7 +140,7 @@ export function App(): JSX.Element {
 								path={'/'}
 								element={
 									<Authenticated>
-										<Tasks lastToday={lastToday} />
+										<Tasks />
 									</Authenticated>
 								}
 							/>

src/components/molecules/Task.tsx

@@ -37,13 +37,18 @@ const Task = ({ task }: TaskProps): JSX.Element => {
 			}`}
 			secondaryAction={<TaskMenu task={task} />}
 			disablePadding
+			disableGutters
 			sx={{
 				borderLeft: isDue ? 3 : 0,
 				borderColor: red[600],
 			}}
 			dense
 		>
-			<ListItemIcon>
+			<ListItemIcon
+				sx={{
+					minWidth: 0,
+				}}
+			>
 				{task.status === 'expired' ? (
 					<Box style={{ padding: 9 }}>
 						<EventBusyIcon />
@@ -74,7 +79,7 @@ const Task = ({ task }: TaskProps): JSX.Element => {
 						</Suspense>
 					</>
 				}
-				sx={{ mr: 7 }}
+				sx={{ mr: 5 }}
 			/>
 		</ListItem>
 	);

src/components/organisms/NavBar.spec.tsx

@@ -82,12 +82,6 @@ describe('NavBar', () => {
 		expect(screen.queryByText('Logout')).not.toBeInTheDocument();
 	});
 
-	it('has today button', async () => {
-		renderComponent();
-
-		await screen.findByLabelText('today');
-	});
-
 	it('closes drawer on navigate', async () => {
 		mockUseSession.mockReturnValue({
 			email: 'the_email',

src/components/organisms/NavBar.tsx

@@ -1,35 +1,27 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import NavDrawer from '../molecules/NavDrawer';
 import FilterButton from '../molecules/FilterButton';
 import {
 	AppBar,
 	Box,
 	Button,
 	IconButton,
+	Tab,
+	Tabs,
 	Toolbar,
 	Tooltip,
-	Typography,
 } from '@mui/material';
-import { Today, Menu } from '@mui/icons-material';
+import { Menu } from '@mui/icons-material';
 import LoadingIndicator from '../molecules/LoadingIndicator';
 import FeedbackIcon from '@mui/icons-material/Feedback';
 import { H } from 'highlight.run';
 
-interface NavBarProps {
-	onTodayClick?: () => void;
-}
-
-export default function NavBar({ onTodayClick }: NavBarProps): JSX.Element {
+export default function NavBar(): JSX.Element {
 	const location = useLocation();
-	const navigate = useNavigate();
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const toggleMenu = () => setIsOpen(!isOpen);
-	const handleTodayClick = () => {
-		onTodayClick && onTodayClick();
-		navigate('/');
-	};
 
 	useEffect(() => setIsOpen(false), [location]);
 
@@ -39,31 +31,61 @@ export default function NavBar({ onTodayClick }: NavBarProps): JSX.Element {
 				<LoadingIndicator />
 			</Box>
 
-			<Toolbar>
-				<Typography
-					className={'organism-navBar__title'}
-					variant="h6"
-					component="div"
-					sx={{ flexGrow: 1 }}
+			<Toolbar
+				sx={{
+					justifyContent: 'space-between',
+				}}
+				variant="dense"
+			>
+				<Link
+					to={'/'}
+					style={{
+						display: 'flex',
+					}}
 				>
-					<Button component={Link} to={'/'} color={'inherit'}>
-						TaskRatchet
-					</Button>
-				</Typography>
+					<img
+						src="/android-chrome-192x192.png"
+						height={32}
+						width={32}
+						alt="TaskRatchet"
+					/>
+				</Link>
 
-				<FilterButton />
+				<Tabs textColor="inherit" value={location.pathname}>
+					<Tab
+						label="Next"
+						value="/"
+						to={'/'}
+						component={Link}
+						sx={{
+							minWidth: 0,
+							p: 1,
+						}}
+					/>
+					<Tab
+						label="Maybe"
+						value="/maybe"
+						to={'/maybe'}
+						component={Link}
+						sx={{
+							minWidth: 0,
+							p: 1,
+						}}
+					/>
+					<Tab
+						label="Archive"
+						value="/archive"
+						to={'/archive'}
+						component={Link}
+						sx={{
+							minWidth: 0,
+							p: 1,
+						}}
+					/>
+				</Tabs>
 
-				<Tooltip title={'Jump to Today'}>
-					<IconButton
-						onClick={handleTodayClick}
-						edge="start"
-						color="inherit"
-						aria-label="today"
-						sx={{ m: 0.1 }}
-					>
-						<Today />
-					</IconButton>
-				</Tooltip>
+				<Box>
+					<FilterButton />
 
 				<Tooltip title={'Feedback'}>
 					<IconButton
@@ -88,6 +110,7 @@ export default function NavBar({ onTodayClick }: NavBarProps): JSX.Element {
 						<Menu />
 					</IconButton>
 				</Tooltip>
+        </Box>
 			</Toolbar>
 
 			<NavDrawer isOpen={isOpen} onClose={toggleMenu} />