adding not found and no tasks messages

src/Router.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom'
 import { DefaultLayout } from './layouts/DefaultLayout'
 import { History } from './pages/History'
 import { Home } from './pages/Home'
+import { NotFoundPage } from './pages/NotFoundPage/index'
 
 export function Router() {
   return (
@@ -10,7 +11,7 @@ export function Router() {
         <Route path="/" element={<Home />} />
         <Route path="/history" element={<History />} />
       </Route>
-
+      <Route path="*" element={<NotFoundPage />} />
       {/* <Route path="/admin" element={<AdminLayout />}>
         <Route path="/products" />
       </Route> */}

src/index.css

@@ -29,6 +29,27 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+
+}
+
+img {
+  user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+    }
+
+  ::-moz-selection {
+  /* Code for Firefox */
+  color: white;
+  background-color: green-300;
+}
+
+::selection {
+  color: white;
+  background-color: green-300;
 }
 
 h1 {

src/layouts/DefaultLayout/styles.ts

@@ -5,7 +5,7 @@ export const LayoutContainer = styled.div`
   height: calc(100vh - 10rem);
   margin: 5rem auto;
   padding: 2.5rem;
-  background: ${(props) => props.theme['gray-800']};
+  background: ${(props) => props.theme['gray-50']};
   border-radius: 8px;
   border: solid 1px #d2d2d2;
   display: flex;

src/pages/History/index.tsx

@@ -2,56 +2,79 @@ import { useContext } from 'react'
 import { formatDistanceToNow } from 'date-fns'
 import enUS from 'date-fns/locale/en-US'
 import { CyclesContext } from '../../contexts/CyclesContext'
-import { HistoryContainer, HistoryList, Status } from './styles'
+import {
+  HistoryContainer,
+  EmptyHistoryContainer,
+  HistoryList,
+  Status,
+} from './styles'
+import { useNavigate } from 'react-router-dom'
+import ChimpMeditating from '../../../public/chimp_meditating.svg'
 
 export function History() {
   const { cycles } = useContext(CyclesContext)
+  const navigate = useNavigate()
+
+  function handleGoToTimer() {
+    navigate('/')
+  }
 
   return (
     <HistoryContainer>
-      <h1>History</h1>
-
-      <HistoryList>
-        <table>
-          <thead>
-            <tr>
-              <th>Task</th>
-              <th>Duration</th>
-              <th>Date</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {cycles.map((cycle) => {
-              return (
-                <tr key={cycle.id}>
-                  <td className="task">{cycle.task}</td>
-                  <td>{cycle.minutesAmount} minutes</td>
-                  <td>
-                    {formatDistanceToNow(new Date(cycle.startDate), {
-                      addSuffix: true,
-                      locale: enUS,
-                    })}
-                  </td>
-                  <td>
-                    {cycle.finishedDate && (
-                      <Status statusColor="green">Concluded</Status>
-                    )}
+      {cycles.length === 0 ? (
+        <EmptyHistoryContainer>
+          <h1>No Tasks in History</h1>
+          <img src={ChimpMeditating} alt="Coolest Chimp logo smiling to you" />
+          <p>
+            "I will not lose my temper with this person who has not started any
+            tasks yet. I will not..."
+          </p>
+          <button onClick={handleGoToTimer}>Start a New Task</button>
+        </EmptyHistoryContainer>
+      ) : (
+        <HistoryList>
+          <h1>History</h1>
+          <table>
+            <thead>
+              <tr>
+                <th>Task</th>
+                <th>Duration</th>
+                <th>Date</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {cycles.map((cycle) => {
+                return (
+                  <tr key={cycle.id}>
+                    <td className="task">{cycle.task}</td>
+                    <td>{cycle.minutesAmount} minutes</td>
+                    <td>
+                      {formatDistanceToNow(new Date(cycle.startDate), {
+                        addSuffix: true,
+                        locale: enUS,
+                      })}
+                    </td>
+                    <td>
+                      {cycle.finishedDate && (
+                        <Status statusColor="green">Concluded</Status>
+                      )}
 
-                    {cycle.interruptedDate && (
-                      <Status statusColor="red">Interrupted</Status>
-                    )}
+                      {cycle.interruptedDate && (
+                        <Status statusColor="red">Interrupted</Status>
+                      )}
 
-                    {!cycle.finishedDate && !cycle.interruptedDate && (
-                      <Status statusColor="yellow">Ongoing</Status>
-                    )}
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </HistoryList>
+                      {!cycle.finishedDate && !cycle.interruptedDate && (
+                        <Status statusColor="yellow">Ongoing</Status>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </HistoryList>
+      )}
     </HistoryContainer>
   )
 }

src/pages/History/styles.ts

@@ -8,21 +8,69 @@ export const HistoryContainer = styled.div`
 
   h1 {
     font-size: 1.5rem;
-    color: ${(props) => props.theme['gray-600']};
+    color: ${(props) => props.theme['brown-800']};
   }
 `
+
+export const EmptyHistoryContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  justify-content: center;
+  gap: 3rem;
+
+  img {
+    height: 14rem;
+  }
+
+  p,
+  h1 {
+    max-width: 30rem;
+  }
+
+  p {
+    font-style: italic;
+  }
+
+  button {
+    border: 0;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 0.5rem;
+    font-weight: bold;
+
+    cursor: pointer;
+    color: ${(props) => props.theme.white};
+
+    background-color: ${(props) => props.theme['green-500']};
+    padding: 1rem 1.75rem;
+
+    :hover {
+      background-color: ${(props) => props.theme['green-300']};
+      cursor: pointer;
+    }
+  }
+`
+
 export const HistoryList = styled.div`
   flex: 1;
   overflow: auto;
-  margin-top: 2rem;
 
   table {
+    margin-top: 2rem;
     width: 100%;
     border-collapse: collapse; // one border between table elements
     min-width: 600px;
 
     th {
-      background-color: ${(props) => props.theme['gray-700']};
+      background-color: ${(props) => props.theme['brown-700']};
       padding: 1rem;
       text-align: left;
       color: ${(props) => props.theme.white};
@@ -40,8 +88,8 @@ export const HistoryList = styled.div`
     }
 
     td {
-      background-color: ${(props) => props.theme['gray-800']};
-      border-top: 4px solid ${(props) => props.theme['gray-800']};
+      background-color: ${(props) => props.theme['gray-50']};
+      border-top: 4px solid ${(props) => props.theme['gray-50']};
       padding: 1rem;
       font-size: 0.875 rem;
       line-height: 1.6;

src/pages/Home/components/Countdown/styles.ts

@@ -9,15 +9,15 @@ export const CountdownContainer = styled.div`
   gap: 1rem;
 
   span {
-    background: ${(props) => props.theme['gray-700']};
+    background: ${(props) => props.theme['brown-700']};
     padding: 2rem 1rem;
     border-radius: 8px;
   }
 `
 
 export const Separator = styled.div`
   padding: 2rem 0;
-  color: ${(props) => props.theme['gray-700']};
+  color: ${(props) => props.theme['brown-700']};
   width: 4rem;
   overflow: hidden;
   display: flex;

src/pages/Home/components/NewCycleForm/styles.ts

@@ -24,7 +24,7 @@ export const FormContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${(props) => props.theme['gray-600']};
+  color: ${(props) => props.theme['brown-800']};
   font-size: 1.25rem;
   font-weight: bold;
   flex-wrap: wrap;

src/pages/Home/index.tsx

@@ -41,7 +41,7 @@ export function Home() {
 
   function handleCreateNewCycle(data: NewCycleFormData) {
     createNewCycle(data)
-    reset()
+    // reset()
   }
 
   const task = watch('task')

src/pages/NotFoundPage/index.tsx

@@ -0,0 +1,20 @@
+import { NotFoundContainer } from './styles'
+import { useNavigate } from 'react-router-dom'
+import ChimpRelaxing from '../../../public/chimp_relaxing.svg'
+
+export function NotFoundPage() {
+  const navigate = useNavigate()
+
+  function handleGoToHome() {
+    navigate('/')
+  }
+  return (
+    <NotFoundContainer>
+      <h1>404</h1>
+      <h1>There's a lot of fun here... </h1>
+      <img src={ChimpRelaxing} alt="Coolest Chimp logo smiling to you" />
+      <h1>...but none's for you. Go back to work!</h1>
+      <button onClick={handleGoToHome}>Go to Tasks</button>
+    </NotFoundContainer>
+  )
+}

src/pages/NotFoundPage/styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+export const NotFoundContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  justify-content: center;
+  gap: 3rem;
+
+  button {
+    border: 0;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 0.5rem;
+    font-weight: bold;
+
+    cursor: pointer;
+    color: ${(props) => props.theme.white};
+
+    background-color: ${(props) => props.theme['green-500']};
+    padding: 1rem 1.75rem;
+
+    :hover {
+      background-color: ${(props) => props.theme['green-300']};
+      cursor: pointer;
+    }
+  }
+`