diff --git a/public/chimp_meditating.svg b/public/chimp_meditating.svg new file mode 100644 index 0000000..051aded --- /dev/null +++ b/public/chimp_meditating.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/chimp_relaxing.svg b/public/chimp_relaxing.svg new file mode 100644 index 0000000..6381460 --- /dev/null +++ b/public/chimp_relaxing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Router.tsx b/src/Router.tsx index 66338d0..1a392d6 100644 --- a/src/Router.tsx +++ b/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() { } /> } /> - + } /> {/* }> */} diff --git a/src/index.css b/src/index.css index 45ee270..7bace88 100644 --- a/src/index.css +++ b/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 { diff --git a/src/layouts/DefaultLayout/styles.ts b/src/layouts/DefaultLayout/styles.ts index a07c397..a492bc2 100644 --- a/src/layouts/DefaultLayout/styles.ts +++ b/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; diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx index a1ffb1c..4dcd6bb 100644 --- a/src/pages/History/index.tsx +++ b/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 ( -

History

- - - - - - - - - - - - - {cycles.map((cycle) => { - return ( - - - - - + + ) + })} + +
TaskDurationDateStatus
{cycle.task}{cycle.minutesAmount} minutes - {formatDistanceToNow(new Date(cycle.startDate), { - addSuffix: true, - locale: enUS, - })} - - {cycle.finishedDate && ( - Concluded - )} + {cycles.length === 0 ? ( + +

No Tasks in History

+ Coolest Chimp logo smiling to you +

+ "I will not lose my temper with this person who has not started any + tasks yet. I will not..." +

+ + + ) : ( + +

History

+ + + + + + + + + + + {cycles.map((cycle) => { + return ( + + + + + - - ) - })} - -
TaskDurationDateStatus
{cycle.task}{cycle.minutesAmount} minutes + {formatDistanceToNow(new Date(cycle.startDate), { + addSuffix: true, + locale: enUS, + })} + + {cycle.finishedDate && ( + Concluded + )} - {cycle.interruptedDate && ( - Interrupted - )} + {cycle.interruptedDate && ( + Interrupted + )} - {!cycle.finishedDate && !cycle.interruptedDate && ( - Ongoing - )} -
- + {!cycle.finishedDate && !cycle.interruptedDate && ( + Ongoing + )} +
+ + )} ) } diff --git a/src/pages/History/styles.ts b/src/pages/History/styles.ts index a9c437a..ffaa947 100644 --- a/src/pages/History/styles.ts +++ b/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; diff --git a/src/pages/Home/components/Countdown/styles.ts b/src/pages/Home/components/Countdown/styles.ts index d9e223b..1746672 100644 --- a/src/pages/Home/components/Countdown/styles.ts +++ b/src/pages/Home/components/Countdown/styles.ts @@ -9,7 +9,7 @@ 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; } @@ -17,7 +17,7 @@ export const CountdownContainer = styled.div` 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; diff --git a/src/pages/Home/components/NewCycleForm/styles.ts b/src/pages/Home/components/NewCycleForm/styles.ts index 9ee6aef..503284a 100644 --- a/src/pages/Home/components/NewCycleForm/styles.ts +++ b/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; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index d6fcddd..9803392 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -41,7 +41,7 @@ export function Home() { function handleCreateNewCycle(data: NewCycleFormData) { createNewCycle(data) - reset() + // reset() } const task = watch('task') diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx new file mode 100644 index 0000000..6ea2421 --- /dev/null +++ b/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 ( + +

404

+

There's a lot of fun here...

+ Coolest Chimp logo smiling to you +

...but none's for you. Go back to work!

+ + + ) +} diff --git a/src/pages/NotFoundPage/styles.ts b/src/pages/NotFoundPage/styles.ts new file mode 100644 index 0000000..35ddb4d --- /dev/null +++ b/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; + } + } +` diff --git a/src/styles/global.ts b/src/styles/global.ts index 31a886a..37615f0 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -5,6 +5,27 @@ export const GlobalStyle = createGlobalStyle` margin: 0; padding: 0; box-sizing: border-box; + +} + +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: ${(props) => props.theme['green-500']}; +} + +::selection { + color: white; + background-color: ${(props) => props.theme['green-500']}; } :focus { @@ -13,9 +34,11 @@ export const GlobalStyle = createGlobalStyle` } body { - background: ${(props) => props.theme['gray-900']}; - color: ${(props) => props.theme['gray-600']}; + background: ${(props) => props.theme['gray-100']}; + color: ${(props) => props.theme['brown-800']}; -webkit-font-smoothing: antialiased; + + } body, input, textarea, button { diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 775a867..a4cc6e1 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -1,16 +1,16 @@ export const defaultTheme = { white: '#FFF', - 'gray-100': '#E1E1E6', + 'gray-50': '#E9E9E9', + 'gray-100': '#DFDFDF', 'gray-300': '#C4C4CC', 'gray-400': '#8D8D99', 'gray-500': '#7C7C8A', - 'gray-600': '#323238', - 'gray-700': '#403B3B', - 'gray-800': '#E9E9E9', - 'gray-900': '#DFDFDF', - 'green-300': '#2DD4BF', + 'brown-700': '#403B3B', + 'brown-800': '#323238', + + 'green-300': '#44cd7b', 'green-500': '#55DC8B', 'green-700': '#0F766E',