From 663667446386e6e862c9d43bf512bc06a494b65c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Fri, 15 Dec 2023 17:19:20 -0300 Subject: [PATCH 01/13] new components, routes, login --- .firebase/hosting.ZGlzdA.cache | 20 +-- index.html | 8 +- public/chimp_profile.png | Bin 0 -> 1896 bytes public/chimptok_logo_2.svg | 1 + public/logos/google_logo.svg | 26 ++++ public/logotype_chimptok.svg | 30 +++++ src/Router.tsx | 18 ++- src/components/Header/index.tsx | 50 ++++++-- src/components/Header/styles.ts | 27 +++- src/layouts/DefaultLayout/index.tsx | 6 +- src/layouts/DefaultLayout/styles.ts | 14 +-- src/layouts/FullPageLayout/index.tsx | 10 ++ src/layouts/FullPageLayout/styles.ts | 6 + src/pages/Auth/Login/index.tsx | 30 +++++ src/pages/Auth/Login/styles.ts | 92 ++++++++++++++ src/pages/Auth/Register/index.tsx | 30 +++++ src/pages/Auth/Register/styles.ts | 92 ++++++++++++++ src/pages/Auth/index.tsx | 26 ++++ src/pages/Auth/styles.ts | 65 ++++++++++ src/pages/Goals/GoalCard/index.tsx | 68 ++++++++++ src/pages/Goals/GoalCard/styles.ts | 119 ++++++++++++++++++ src/pages/Goals/index.tsx | 24 ++++ src/pages/Goals/styles.ts | 57 +++++++++ src/pages/History/index.tsx | 4 +- src/pages/History/styles.ts | 14 +-- .../Home/components/ConsistencyDay/index.tsx | 15 +++ .../Home/components/ConsistencyDay/styles.ts | 22 ++++ .../components/ConsistencyOfTheWeek/index.tsx | 57 +++++++++ .../components/ConsistencyOfTheWeek/styles.ts | 25 ++++ src/pages/Home/components/Countdown/styles.ts | 9 +- .../Home/components/NewCycleForm/styles.ts | 2 +- .../components/ProgressOfTheDay/index.tsx | 19 +++ .../components/ProgressOfTheDay/styles.ts | 30 +++++ src/pages/Home/index.tsx | 30 ++--- src/pages/Home/styles.ts | 28 +++-- src/pages/Reports/Consistency/index.tsx | 15 +++ src/pages/Reports/Consistency/styles.ts | 26 ++++ src/pages/Reports/ConsistencyChart/index.tsx | 9 ++ src/pages/Reports/ConsistencyChart/styles.ts | 6 + .../Reports/ConsistencySummary/index.tsx | 20 +++ .../Reports/ConsistencySummary/styles.ts | 22 ++++ src/pages/Reports/GoalRanking/index.tsx | 32 +++++ src/pages/Reports/GoalRanking/styles.ts | 75 +++++++++++ src/pages/Reports/TaskHistory/index.tsx | 27 ++++ src/pages/Reports/TaskHistory/styles.ts | 43 +++++++ src/pages/Reports/index.tsx | 21 ++++ src/pages/Reports/styles.ts | 16 +++ .../components/AccountInfo/index.tsx | 10 ++ .../components/AccountInfo/styles.tsx | 37 ++++++ .../components/CancelAccount/index.tsx | 42 +++++++ .../components/CancelAccount/styles.tsx | 82 ++++++++++++ .../components/SocialMedia/index.tsx | 35 ++++++ .../components/SocialMedia/styles.tsx | 64 ++++++++++ .../UserSettings/components/Support/index.tsx | 16 +++ .../components/Support/styles.tsx | 50 ++++++++ .../components/profileInfo/index.tsx | 32 +++++ .../components/profileInfo/styles.tsx | 71 +++++++++++ src/pages/UserSettings/index.tsx | 20 +++ src/pages/UserSettings/styles.ts | 26 ++++ src/reducers/reducer.ts | 1 - src/styles/global.ts | 11 +- src/styles/themes/default.ts | 40 +++--- vite.config.ts.timestamp-1700851850145.mjs | 10 ++ vite.config.ts.timestamp-1701085633082.mjs | 10 ++ vite.config.ts.timestamp-1701429375927.mjs | 10 ++ vite.config.ts.timestamp-1701705735861.mjs | 10 ++ vite.config.ts.timestamp-1702569135856.mjs | 10 ++ vite.config.ts.timestamp-1702649078942.mjs | 10 ++ 68 files changed, 1881 insertions(+), 102 deletions(-) create mode 100644 public/chimp_profile.png create mode 100644 public/chimptok_logo_2.svg create mode 100644 public/logos/google_logo.svg create mode 100644 public/logotype_chimptok.svg create mode 100644 src/layouts/FullPageLayout/index.tsx create mode 100644 src/layouts/FullPageLayout/styles.ts create mode 100644 src/pages/Auth/Login/index.tsx create mode 100644 src/pages/Auth/Login/styles.ts create mode 100644 src/pages/Auth/Register/index.tsx create mode 100644 src/pages/Auth/Register/styles.ts create mode 100644 src/pages/Auth/index.tsx create mode 100644 src/pages/Auth/styles.ts create mode 100644 src/pages/Goals/GoalCard/index.tsx create mode 100644 src/pages/Goals/GoalCard/styles.ts create mode 100644 src/pages/Goals/index.tsx create mode 100644 src/pages/Goals/styles.ts create mode 100644 src/pages/Home/components/ConsistencyDay/index.tsx create mode 100644 src/pages/Home/components/ConsistencyDay/styles.ts create mode 100644 src/pages/Home/components/ConsistencyOfTheWeek/index.tsx create mode 100644 src/pages/Home/components/ConsistencyOfTheWeek/styles.ts create mode 100644 src/pages/Home/components/ProgressOfTheDay/index.tsx create mode 100644 src/pages/Home/components/ProgressOfTheDay/styles.ts create mode 100644 src/pages/Reports/Consistency/index.tsx create mode 100644 src/pages/Reports/Consistency/styles.ts create mode 100644 src/pages/Reports/ConsistencyChart/index.tsx create mode 100644 src/pages/Reports/ConsistencyChart/styles.ts create mode 100644 src/pages/Reports/ConsistencySummary/index.tsx create mode 100644 src/pages/Reports/ConsistencySummary/styles.ts create mode 100644 src/pages/Reports/GoalRanking/index.tsx create mode 100644 src/pages/Reports/GoalRanking/styles.ts create mode 100644 src/pages/Reports/TaskHistory/index.tsx create mode 100644 src/pages/Reports/TaskHistory/styles.ts create mode 100644 src/pages/Reports/index.tsx create mode 100644 src/pages/Reports/styles.ts create mode 100644 src/pages/UserSettings/components/AccountInfo/index.tsx create mode 100644 src/pages/UserSettings/components/AccountInfo/styles.tsx create mode 100644 src/pages/UserSettings/components/CancelAccount/index.tsx create mode 100644 src/pages/UserSettings/components/CancelAccount/styles.tsx create mode 100644 src/pages/UserSettings/components/SocialMedia/index.tsx create mode 100644 src/pages/UserSettings/components/SocialMedia/styles.tsx create mode 100644 src/pages/UserSettings/components/Support/index.tsx create mode 100644 src/pages/UserSettings/components/Support/styles.tsx create mode 100644 src/pages/UserSettings/components/profileInfo/index.tsx create mode 100644 src/pages/UserSettings/components/profileInfo/styles.tsx create mode 100644 src/pages/UserSettings/index.tsx create mode 100644 src/pages/UserSettings/styles.ts create mode 100644 vite.config.ts.timestamp-1700851850145.mjs create mode 100644 vite.config.ts.timestamp-1701085633082.mjs create mode 100644 vite.config.ts.timestamp-1701429375927.mjs create mode 100644 vite.config.ts.timestamp-1701705735861.mjs create mode 100644 vite.config.ts.timestamp-1702569135856.mjs create mode 100644 vite.config.ts.timestamp-1702649078942.mjs diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache index df213ff..3e5f880 100644 --- a/.firebase/hosting.ZGlzdA.cache +++ b/.firebase/hosting.ZGlzdA.cache @@ -1,14 +1,18 @@ -apple-touch-icon.png,1692741950000,6c2775039868c0880a0f0f7ea2f96d638fce974684a1c871f821cdd565655fe0 android-chrome-192x192.png,1692741950000,e3d1ebe94804b1d898f9d6d7ca08ae5095e0720cf213a5cfddc002402bc13f5a +android-chrome-512x512.png,1692741950000,e7254a1cc92b8b39c470a6446b7512341d14fe08ce18e776cdad2a77f5900a04 +apple-touch-icon.png,1692741950000,6c2775039868c0880a0f0f7ea2f96d638fce974684a1c871f821cdd565655fe0 chimptok_logo.svg,1692732849649,17d904d3b736e4d6f423d970c90e5535a8a6cf253b587e6bd73cb520f9f0575f chimptok_mascot.svg,1692733500711,91da2ce855be4a8acb1bc8e05fc6ce401971b0a6ad9358dc54fdc2889d861e12 favicon-16x16.png,1692741950000,5f7894deb6e0beaa92c0a72cd9351c8258157a15614b6442cb23666b4be26f8a -index.html,1692740441726,1df80141dbc3d223f495301a0a2378e6dedc635978415f9022d388f92a3c475b -favicon.ico,1692741950000,1738e0fef0ffc314183ba39e111394b9a13a5f4d645a8a4b31e58b52ee9a9023 -assets/chimptok_logo-4e703299.svg,1692740441727,17d904d3b736e4d6f423d970c90e5535a8a6cf253b587e6bd73cb520f9f0575f -assets/chimptok_mascot-35a368d2.svg,1692740441726,91da2ce855be4a8acb1bc8e05fc6ce401971b0a6ad9358dc54fdc2889d861e12 -android-chrome-512x512.png,1692741950000,e7254a1cc92b8b39c470a6446b7512341d14fe08ce18e776cdad2a77f5900a04 favicon-32x32.png,1692741950000,e3ca2bd8203682486b70449fffb2c906dfa1dba97d82d6019536b06b7b152b4e -site.webmanifest,1692741950000,378695d4af8bdaf357a5e2404faa02cc43fde62b92e2cb35f19e143dea1a1816 +favicon.ico,1692741950000,1738e0fef0ffc314183ba39e111394b9a13a5f4d645a8a4b31e58b52ee9a9023 icon.png,1692741950000,e3d1ebe94804b1d898f9d6d7ca08ae5095e0720cf213a5cfddc002402bc13f5a -assets/index-8cbd223c.js,1692740441727,1e5dd08ecfc7e5247532eff59c0bb8c1b25c303d4e711fdc1ed6d273f26a7984 +site.webmanifest,1692741950000,378695d4af8bdaf357a5e2404faa02cc43fde62b92e2cb35f19e143dea1a1816 +index.html,1693913361615,e86eba5e90e0a7f712edb4fb1f732db1935dc83c9443538c739a6e2a009c5d1a +assets/chimptok_mascot-35a368d2.svg,1693913361614,91da2ce855be4a8acb1bc8e05fc6ce401971b0a6ad9358dc54fdc2889d861e12 +assets/chimptok_logo-4e703299.svg,1693913361615,17d904d3b736e4d6f423d970c90e5535a8a6cf253b587e6bd73cb520f9f0575f +assets/chimp_meditating-23ddb957.svg,1693913361614,47d09af2a8faf27112a02e19426f3112d2403e95492bbd95c8c584af6771d5a8 +assets/chimp_relaxing-4bbce189.svg,1693913361615,597822eb8988d445222f6cfef74f0a1602cdc7c9f59ec85af569f037a711ad00 +chimp_relaxing.svg,1693256672795,597822eb8988d445222f6cfef74f0a1602cdc7c9f59ec85af569f037a711ad00 +chimp_meditating.svg,1693241652124,47d09af2a8faf27112a02e19426f3112d2403e95492bbd95c8c584af6771d5a8 +assets/index-3270dca5.js,1693913361615,ed305f879f812c2a3dde1f2300f571800e44d95f7d8d0c2d78cebd68b9309196 diff --git a/index.html b/index.html index 77a1e93..72bda35 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,10 @@ - + + + + ChimpTok diff --git a/public/chimp_profile.png b/public/chimp_profile.png new file mode 100644 index 0000000000000000000000000000000000000000..75895cd16534d9ba0e070e149f9e1a5ccd57f81b GIT binary patch literal 1896 zcmV-u2bcJXP);?&O(MH+@5=bkbfb0{n z!Nu4Gqhm;b1T-y3Y1WOoXlun*3HKtc)FjT%|A`$nshj%oTVC3q6#1ogZU24FdCqg} z#}NvdTrQX3$*7_zeUV5cQK?i$cvK&JGO?X%r$6 z3YeLh8Fl~u{UiJK?K{U8JI1RLjQB#ZMAbqH)#Q-wky zol2#2$zA0|f_t&`e8aON)OjFQot1SzDUnQpek6Z#omL?&lw*;)L?8<(p&W_SWdd0^ z7HUV4x>O(wM?xvh{)kqrivzrt|!M5(kZZ^&;e@(jt z&de`zMPbVBZ?+y&cE;k~B1Y zV#~?mVivW3_`)8M7Z$bq!cDCk)JSjdVS4?IH{FUQo)_|TT8ISGVv!v0jn)Xw^-gYp z?I7Z*Q>XdvR__5~46MhE3&CpfgS9$I7jWzw*T18|p%da}$zrIf1S#zXa%Jk3+I-Eo_QC*{&QsC~Xs} z;&jUcJw3Ioxs!2ovmJ{Bjvae}IvL#PUN<6{?;JYfc>hZsZB59yU7#!G>%WdcXVpsy zqE*;cBOIbjSrUNB;*NBRP$=xZdh#{V!F2;0krw3#a#1+mJHnBeGGeZd@yt!NrkAyT^JsnM^{U4EcdwDQ$un@3zz6=sB?UOmg1$6}iOI z12?`a8JI8nJk*}x<5MXw0s(JNC8_Fud=eMfqDHArVilfp;CwiXKJUl(-(0zy9cJ%2 zX^sNNxVg|j_yTdb>^f=JllOveB3Zx%d6HRJSU3~m+Dt4SA1iKb1ol!ByF0!jm|=0Q z`Ynz{U?0BQ%om@h&lyH#yh0J*zShMju9H!jGK!TepQh6q1xP3&Sxih!s82tooGBTV z(MW|x@XAkx$f=cS5vpV(3YVA5#;s32ONZ9+4pk&OzPxm)&rr&Vh(fAi)C;C4q*uzu iVqt@{bUNL#BH$DIi6~; \ No newline at end of file diff --git a/public/logos/google_logo.svg b/public/logos/google_logo.svg new file mode 100644 index 0000000..47a99cc --- /dev/null +++ b/public/logos/google_logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logotype_chimptok.svg b/public/logotype_chimptok.svg new file mode 100644 index 0000000..74a7d8a --- /dev/null +++ b/public/logotype_chimptok.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Router.tsx b/src/Router.tsx index 1a392d6..fdc0f34 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,15 +1,25 @@ -import { Routes, Route } from 'react-router-dom' +import { Routes, Route, Navigate } 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' +import { Reports } from './pages/Reports/index' +import { Goals } from './pages/Goals' +import { UserSettings } from './pages/UserSettings' +import { FullPageLayout } from './layouts/FullPageLayout' +import { Auth } from './pages/Auth' export function Router() { return ( + } /> }> - } /> - } /> + } /> + } /> + } /> + } /> + + }> + } /> } /> {/* }> diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 322f17f..0845175 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,21 +1,53 @@ -import { HeaderContainer } from './styles' -import logo from '../../../public/chimptok_logo.svg' -import { Scroll, Timer } from 'phosphor-react' -import { NavLink } from 'react-router-dom' +import { useEffect } from 'react' +import { useLocation, NavLink } from 'react-router-dom' +import { HeaderContainer, RouteTitle } from './styles' +import logotype from '../../../public/logotype_chimptok.svg' +import { Timer, ChartBar, FlagBanner, UserCircle } from 'phosphor-react' + export function Header() { + const location = useLocation() + + useEffect(() => { + const routeTitle = getRouteTitle(location.pathname) + + document.title = `${routeTitle} on Chimptok` + }, [location.pathname]) + + const getRouteTitle = (pathname: string) => { + switch (pathname) { + case '/timer': + return 'Timer' + case '/reports': + return 'Reports' + case '/goals': + return 'Goals and Tasks' + case '/user-settings': + return 'User Settings' + default: + return 'Your Default Title' + } + } + return ( Coolest Chimp logo smiling to you + {getRouteTitle(location.pathname)} diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 33e7067..25733be 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -3,13 +3,21 @@ import styled from 'styled-components' export const HeaderContainer = styled.header` display: flex; align-items: center; - justify-content: space-between; + justify-content: center; + gap: 10rem; + background-color: white; + width: 100%; + height: 5rem; + border-bottom: solid 1px ${(props) => props.theme['gray-300']}; + position: fixed; + // max-width: 900px; nav { display: flex; gap: 0.5rem; a { + border-radius: 6px; width: 3rem; height: 3rem; @@ -23,13 +31,24 @@ export const HeaderContainer = styled.header` border-bottom: 3px solid transparent; &:hover { - color: ${(props) => props.theme['green-500']}; + color: ${(props) => props.theme['dark-900']}; + background-color: ${(props) => props.theme['yellow-300']}; } &.active { - color: ${(props) => props.theme['green-500']}; - border-bottom: 3px solid ${(props) => props.theme['green-500']}; + color: ${(props) => props.theme['dark-900']}; + background-color: ${(props) => props.theme['yellow-500']}; } } } ` + +export const RouteTitle = styled.h3` + text-transform: uppercase; + width: 500px; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + letter-spacing: 0.05rem; +` diff --git a/src/layouts/DefaultLayout/index.tsx b/src/layouts/DefaultLayout/index.tsx index 5ada7a0..1f4bcca 100644 --- a/src/layouts/DefaultLayout/index.tsx +++ b/src/layouts/DefaultLayout/index.tsx @@ -1,14 +1,16 @@ import { Outlet } from 'react-router-dom' import { Header } from '../../components/Header' -import { LayoutContainer } from './styles' +import { LayoutContainer, RouterContainer } from './styles' export function DefaultLayout() { return ( {/* // monkey image must come here */}
- + + + ) } diff --git a/src/layouts/DefaultLayout/styles.ts b/src/layouts/DefaultLayout/styles.ts index af941d0..44056be 100644 --- a/src/layouts/DefaultLayout/styles.ts +++ b/src/layouts/DefaultLayout/styles.ts @@ -1,13 +1,11 @@ import styled from 'styled-components' export const LayoutContainer = styled.div` - max-width: 74rem; - min-height: 80vh; - margin: 5rem auto; - padding: 2.5rem; - background: ${(props) => props.theme['gray-50']}; - border-radius: 8px; - border: solid 1px #d2d2d2; display: flex; - flex-direction: column; + justify-content: center; +` +export const RouterContainer = styled.div` + margin-top: 5rem; + padding: 2.5rem; + width: 764px; ` diff --git a/src/layouts/FullPageLayout/index.tsx b/src/layouts/FullPageLayout/index.tsx new file mode 100644 index 0000000..4023bcc --- /dev/null +++ b/src/layouts/FullPageLayout/index.tsx @@ -0,0 +1,10 @@ +import { LayoutContainer } from './styles' +import { Outlet } from 'react-router-dom' + +export function FullPageLayout() { + return ( + + + + ) +} diff --git a/src/layouts/FullPageLayout/styles.ts b/src/layouts/FullPageLayout/styles.ts new file mode 100644 index 0000000..6050f9e --- /dev/null +++ b/src/layouts/FullPageLayout/styles.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components' + +export const LayoutContainer = styled.div` + width: 100%; + height: 100vh; +` diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx new file mode 100644 index 0000000..3069293 --- /dev/null +++ b/src/pages/Auth/Login/index.tsx @@ -0,0 +1,30 @@ +import { + AuthTitle, + AuthSubtitle, + CreateAccountButton, + ConnectWithGoogleButton, + LogInButton, + DividerWithText, +} from './styles' + +import GoogleLogo from './../../../../public/logos/google_logo.svg' + +export function Login() { + return ( + <> + Log in + Welcome back! + Login in + + Coolest Chimp logo smiling to you + Connect with Google + + No account yet? Create one! + Create Account + + ) +} diff --git a/src/pages/Auth/Login/styles.ts b/src/pages/Auth/Login/styles.ts new file mode 100644 index 0000000..701d201 --- /dev/null +++ b/src/pages/Auth/Login/styles.ts @@ -0,0 +1,92 @@ +import styled from 'styled-components' + +export const AuthTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; +` +export const AuthSubtitle = styled.h1` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; +` + +export const CreateAccountButton = styled.button` + border: solid 2px ${(props) => props.theme['yellow-500']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` +export const ConnectWithGoogleButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['dark-800']}; + cursor: pointer; + } +` +export const LogInButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: solid 2px ${(props) => props.theme['gray-700']}; + cursor: pointer; + } +` + +export const DividerWithText = styled.div` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + width: 100%; + display: flex; + align-items: center; + + ::before, + ::after { + flex: 1; + content: ''; + border: 1px solid ${(props) => props.theme['gray-300']}; + margin: 1rem 1rem 1rem 1rem; + } +` diff --git a/src/pages/Auth/Register/index.tsx b/src/pages/Auth/Register/index.tsx new file mode 100644 index 0000000..9a60c01 --- /dev/null +++ b/src/pages/Auth/Register/index.tsx @@ -0,0 +1,30 @@ +import { + AuthTitle, + AuthSubtitle, + CreateAccountButton, + ConnectWithGoogleButton, + LogInButton, + DividerWithText, +} from './styles' + +import GoogleLogo from './../../../../public/logos/google_logo.svg' + +export function RegisterNewAccount() { + return ( + <> + Create Account + Insert infos to start chasing your goals + Create Account + + Coolest Chimp logo smiling to you + Register with Google + + Already have an account? Log in + Log in + + ) +} diff --git a/src/pages/Auth/Register/styles.ts b/src/pages/Auth/Register/styles.ts new file mode 100644 index 0000000..701d201 --- /dev/null +++ b/src/pages/Auth/Register/styles.ts @@ -0,0 +1,92 @@ +import styled from 'styled-components' + +export const AuthTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; +` +export const AuthSubtitle = styled.h1` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; +` + +export const CreateAccountButton = styled.button` + border: solid 2px ${(props) => props.theme['yellow-500']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` +export const ConnectWithGoogleButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['dark-800']}; + cursor: pointer; + } +` +export const LogInButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: solid 2px ${(props) => props.theme['gray-700']}; + cursor: pointer; + } +` + +export const DividerWithText = styled.div` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + width: 100%; + display: flex; + align-items: center; + + ::before, + ::after { + flex: 1; + content: ''; + border: 1px solid ${(props) => props.theme['gray-300']}; + margin: 1rem 1rem 1rem 1rem; + } +` diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx new file mode 100644 index 0000000..d190d3c --- /dev/null +++ b/src/pages/Auth/index.tsx @@ -0,0 +1,26 @@ +import { Login } from './Login/index' +import { RegisterNewAccount } from './Register' +import { + Container, + AuthSecondaryContainer, + AuthCard, + ChimptokLogotype, + ContentContainer, +} from './styles' + +export function Auth() { + return ( + + +

Youre on the right track towards your goal!

+ + + + CHIMPTOK + + {/* */} + + + + ) +} diff --git a/src/pages/Auth/styles.ts b/src/pages/Auth/styles.ts new file mode 100644 index 0000000..306e8ad --- /dev/null +++ b/src/pages/Auth/styles.ts @@ -0,0 +1,65 @@ +import styled from 'styled-components' + +export const Container = styled.div` + width: 100%; + height: 100vh; + background-color: ${(props) => props.theme['yellow-500']}; + padding: 2rem; + display: flex; + flex-direction: row; + justify-content: center; + justify-items: center; + & > * { + flex: 1; + max-width: 50%; + } +` + +export const AuthSecondaryContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: end; + padding: 2rem; + + h1 { + font-size: 4rem; + text-transform: uppercase; + color: ${(props) => props.theme['dark-900']}; + text-shadow: 0 0px 2px ${(props) => props.theme['yellow-600']}; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-style: italic; + letter-spacing: 0.05rem; + line-height: 0.9; + } +` + +export const AuthCard = styled.div` + max-width: 800px; + background-color: white; + display: flex; + height: 100%; + align-items: center; + justify-content: center; + border: solid 2px ${(props) => props.theme['yellow-600']}; + border-radius: 20px; +` + +export const ContentContainer = styled.div` + max-width: 500px; + flex-grow: 1; + gap: 0.75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-basis: auto; +` +export const ChimptokLogotype = styled.h1` + font-size: 1.5rem; + text-transform: uppercase; + color: ${(props) => props.theme['dark-900']}; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + letter-spacing: 0.05rem; +` diff --git a/src/pages/Goals/GoalCard/index.tsx b/src/pages/Goals/GoalCard/index.tsx new file mode 100644 index 0000000..c2bff5b --- /dev/null +++ b/src/pages/Goals/GoalCard/index.tsx @@ -0,0 +1,68 @@ +import { + GoalContainer, + GoalIndex, + CardContainer, + LabelRow, + CardTitle, + ProgressBar, + TaskCounterContainer, + TaskListContainer, + TaskIndex, + Task, +} from './styles' +import { CaretRight } from 'phosphor-react' + +const goals = [ + { + name: 'Become Fluent in English', + tasks: [ + 'Do something', + 'Do something just like this', + 'Do something fnwoiefnwe foiwejfw oifjwe oijfwe ', + 'Do something foweijfwpoefpwoej', + 'Do something', + ], + }, + { + name: 'Become Fluent in English', + tasks: [ + 'Do something', + 'Do something', + 'Do something', + 'Do something', + 'Do something', + ], + }, +] + +export function GoalCard() { + return ( + + 1 + + +

2 hours per week

+

up to 20/06/2024

+ +
+ Become fluent in English + +
+ + + + {goals[1].tasks.length} tasks + + {goals[0].tasks.map((task, index) => { + return ( + + {index + 1} + {task} + + ) + })} + {/* */} + + + ) +} diff --git a/src/pages/Goals/GoalCard/styles.ts b/src/pages/Goals/GoalCard/styles.ts new file mode 100644 index 0000000..cc6dbe5 --- /dev/null +++ b/src/pages/Goals/GoalCard/styles.ts @@ -0,0 +1,119 @@ +import styled from 'styled-components' + +export const GoalContainer = styled.div` + width: 100%; + display: flex; + align-items: start; + gap: 2rem; + margin-top: 3rem; + + button { + width: 300px; + border: 0; + border-radius: 8px; + display: inline-block; + justify-content: center; + align-items: center; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 0.5rem 1.5rem; + + :hover { + background-color: ${(props) => props.theme['blue-500']}; + cursor: pointer; + } + } +` +export const GoalIndex = styled.h1` + text-align: right; + line-height: 80%; + font-size: 3rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-style: italic; + color: ${(props) => props.theme['dark-900']}; + font-weight: 900; +` +export const CardContainer = styled.div` + background-color: white; + width: 100%; + display: flex; + gap: 0.75rem; + flex-direction: column; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; + + hr { + border-top: 1px solid ${(props) => props.theme['gray-300']}; + width: 100%; + } +` +export const LabelRow = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + font-weight: 700; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; +` + +export const CardTitle = styled.h1` + color: ${(props) => props.theme['dark-900']}; + font-size: 1.05rem; + font-weight: 800; +` + +export const ProgressBar = styled.div` + height: 0.75rem; + background-color: ${(props) => props.theme['gray-200']}; + border-radius: 9px; + + div { + height: 100%; + border-radius: 9px; + width: 70%; + background-color: ${(props) => props.theme['blue-500']}; + } +` +export const TaskCounterContainer = styled.div` + display: flex; + gap: 0.5rem; + align-items: center; + font-weight: 700; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + &:hover { + cursor: pointer; + color: ${(props) => props.theme['gray-300']}; + } +` +export const TaskListContainer = styled.div` + width: 100%; + display: flex; + align-items: center; + padding-left: 2rem; + gap: 1rem; + display: none; +` +export const TaskIndex = styled.p` + font-family: 'Roboto Mono', monospace; + font-size: 0.85rem; + display: flex; + justify-content: center; + color: white; + background-color: ${(props) => props.theme['dark-900']}; + width: 1.75rem; + height: 1.75rem; + border-radius: 100%; + line-height: 200%; +` +export const Task = styled.p` + font-weight: 700; + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; +` diff --git a/src/pages/Goals/index.tsx b/src/pages/Goals/index.tsx new file mode 100644 index 0000000..5337a25 --- /dev/null +++ b/src/pages/Goals/index.tsx @@ -0,0 +1,24 @@ +import { NavLink } from 'react-router-dom' +import { GoalsContainer } from './styles' +import { GoalCard } from './GoalCard/index' + +export function Goals() { + return ( + <> + + + + + + ) +} diff --git a/src/pages/Goals/styles.ts b/src/pages/Goals/styles.ts new file mode 100644 index 0000000..e5fb652 --- /dev/null +++ b/src/pages/Goals/styles.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +export const GoalsContainer = styled.div` + display: flex; + flex-direction: column; + //align-items: center; + //justify-content: center; + width: 100%; + + nav { + display: flex; + gap: 0.5rem; + justify-content: space-between; + + div { + display: flex; + } + + a { + text-decoration: none; + padding: 1rem; + font-weight: 800; + font-size: 1rem; + display: flex; + justify-content: center; + align-items: center; + color: ${(props) => props.theme['gray-500']}; + + &:hover { + color: ${(props) => props.theme['dark-900']}; + } + + &.active { + color: ${(props) => props.theme['dark-900']}; + border-bottom: 0.25rem solid ${(props) => props.theme['yellow-600']}; + } + } + + button { + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 0.5rem 1.5rem; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } + } + } +` diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx index ecc8dd5..38b1b42 100644 --- a/src/pages/History/index.tsx +++ b/src/pages/History/index.tsx @@ -27,8 +27,8 @@ export function History() {

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..." + I will not lose my temper with this person who has not started any + tasks yet. I will not...

diff --git a/src/pages/History/styles.ts b/src/pages/History/styles.ts index fc897b7..50ad809 100644 --- a/src/pages/History/styles.ts +++ b/src/pages/History/styles.ts @@ -9,7 +9,7 @@ export const HistoryContainer = styled.div` overflow: hidden; h1 { font-size: 1.5rem; - color: ${(props) => props.theme['brown-800']}; + color: ${(props) => props.theme['dark-900']}; } ` @@ -27,12 +27,6 @@ export const EmptyHistoryContainer = styled.div` img { height: 14rem; } - - p, - h1 { - max-width: 30rem; - } - p { font-style: italic; } @@ -76,7 +70,7 @@ export const HistoryList = styled.div` th { position: sticky; top: 0; - background-color: ${(props) => props.theme['brown-700']}; + background-color: ${(props) => props.theme['dark-900']}; padding: 1rem; text-align: left; color: ${(props) => props.theme.white}; @@ -94,8 +88,8 @@ export const HistoryList = styled.div` } td { - background-color: ${(props) => props.theme['gray-50']}; - border-top: 4px solid ${(props) => props.theme['gray-50']}; + background-color: ${(props) => props.theme['gray-500']}; + border-top: 4px solid ${(props) => props.theme['gray-500']}; padding: 1rem; font-size: 0.875 rem; line-height: 1.6; diff --git a/src/pages/Home/components/ConsistencyDay/index.tsx b/src/pages/Home/components/ConsistencyDay/index.tsx new file mode 100644 index 0000000..8a36298 --- /dev/null +++ b/src/pages/Home/components/ConsistencyDay/index.tsx @@ -0,0 +1,15 @@ +import { ConsistencyBox, DayLabel, ConsistencyDayContainer } from './styles' + +export interface ConsistencyDayProps { + hours: number + day: string +} + +export function ConsistencyDay(consistencyDayProps: ConsistencyDayProps) { + return ( + + + {consistencyDayProps.day} + + ) +} diff --git a/src/pages/Home/components/ConsistencyDay/styles.ts b/src/pages/Home/components/ConsistencyDay/styles.ts new file mode 100644 index 0000000..cdc8168 --- /dev/null +++ b/src/pages/Home/components/ConsistencyDay/styles.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components' + +export const ConsistencyDayContainer = styled.div` + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + gap: 1rem; +` +export const ConsistencyBox = styled.div` + width: 3rem; + height: 3rem; + border: solid 2px ${(props) => props.theme['gray-500']}; + border-radius: 7px; + background-color: white; +` + +export const DayLabel = styled.h4` + color: ${(props) => props.theme['gray-500']}; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 600; +` diff --git a/src/pages/Home/components/ConsistencyOfTheWeek/index.tsx b/src/pages/Home/components/ConsistencyOfTheWeek/index.tsx new file mode 100644 index 0000000..63198af --- /dev/null +++ b/src/pages/Home/components/ConsistencyOfTheWeek/index.tsx @@ -0,0 +1,57 @@ +import { ConsistencyContainer, LabelRow, WeekContainer } from './styles' +import { ConsistencyDay } from '../ConsistencyDay' + +const weekConsistency = [ + { + hours: 2, + day: 'MONDAY', + }, + { + hours: 2, + day: 'TUESDAY', + }, + { + hours: 2, + day: 'WEDNESDAY', + }, + { + hours: 2, + day: 'THURSDAY', + }, + { + hours: 2, + day: 'FRIDAY', + }, + { + hours: 2, + day: 'SATURDAY', + }, + { + hours: 2, + day: 'SUNDAY', + }, +] + +export function ConsistencyOfTheWeek() { + return ( + + +

Week 2

+ + +

16th November

+

2023

+ + + + {weekConsistency.map((day, index) => { + return ( +
+ +
+ ) + })} + + + ) +} diff --git a/src/pages/Home/components/ConsistencyOfTheWeek/styles.ts b/src/pages/Home/components/ConsistencyOfTheWeek/styles.ts new file mode 100644 index 0000000..1c3592e --- /dev/null +++ b/src/pages/Home/components/ConsistencyOfTheWeek/styles.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components' + +export const ConsistencyContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 0.25rem; + + p { + font-size: 0.8rem; + color: ${(props) => props.theme['gray-500']}; + } +` +export const LabelRow = styled.div` + width: 100%; + display: flex; + justify-content: space-between; +` + +export const WeekContainer = styled.div` + margin-top: 1.5rem; + width: 100%; + display: flex; + justify-content: space-between; +` diff --git a/src/pages/Home/components/Countdown/styles.ts b/src/pages/Home/components/Countdown/styles.ts index 1746672..e990ed1 100644 --- a/src/pages/Home/components/Countdown/styles.ts +++ b/src/pages/Home/components/Countdown/styles.ts @@ -1,7 +1,6 @@ import styled from 'styled-components' export const CountdownContainer = styled.div` - font-family: 'Roboto Mono', monospace; font-size: 10rem; line-height: 8rem; color: ${(props) => props.theme['gray-100']}; @@ -9,15 +8,19 @@ export const CountdownContainer = styled.div` gap: 1rem; span { - background: ${(props) => props.theme['brown-700']}; + font-family: 'Roboto Mono', monospace; + font-weight: 700; + background: ${(props) => props.theme['dark-900']}; padding: 2rem 1rem; border-radius: 8px; } ` export const Separator = styled.div` + font-family: 'Roboto Mono', monospace; + font-weight: 700; padding: 2rem 0; - color: ${(props) => props.theme['brown-700']}; + color: ${(props) => props.theme['dark-900']}; 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 503284a..a08bcb3 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['brown-800']}; + color: ${(props) => props.theme['dark-900']}; font-size: 1.25rem; font-weight: bold; flex-wrap: wrap; diff --git a/src/pages/Home/components/ProgressOfTheDay/index.tsx b/src/pages/Home/components/ProgressOfTheDay/index.tsx new file mode 100644 index 0000000..6c74e47 --- /dev/null +++ b/src/pages/Home/components/ProgressOfTheDay/index.tsx @@ -0,0 +1,19 @@ +import { + ProgressBarContainer, + ProgressBar, + ProgressLabelContainer, +} from './styles' + +export function ProgressOfTheDay() { + return ( + + +

Goal of the day

+

2h

+ + +
+ + + ) +} diff --git a/src/pages/Home/components/ProgressOfTheDay/styles.ts b/src/pages/Home/components/ProgressOfTheDay/styles.ts new file mode 100644 index 0000000..1bca1a3 --- /dev/null +++ b/src/pages/Home/components/ProgressOfTheDay/styles.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +export const ProgressBarContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; +` + +export const ProgressLabelContainer = styled.div` + display: flex; + justify-content: space-between; + + p { + font-size: 0.8rem; + color: ${(props) => props.theme['gray-500']}; + } +` +export const ProgressBar = styled.div` + height: 0.75rem; + background-color: ${(props) => props.theme['gray-200']}; + border-radius: 9px; + + div { + height: 100%; + border-radius: 9px; + width: 0.75rem; + background-color: ${(props) => props.theme['blue-500']}; + } +` diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 9803392..fce8db0 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,19 +1,19 @@ -import { HandPalm, Play } from 'phosphor-react' +import { HandPalm } from 'phosphor-react' import { FormProvider, useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import * as zod from 'zod' import { useContext } from 'react' -import chimpMascot from '../../../public/chimptok_mascot.svg' import { HomeContainer, StartCountdownButton, StopCountdownButton, - Mascot, } from './styles' -import { NewCycleForm } from './components/NewCycleForm' +// import { NewCycleForm } from './components/NewCycleForm' import { Countdown } from './components/Countdown' import { CyclesContext } from '../../contexts/CyclesContext' +import { ProgressOfTheDay } from './components/ProgressOfTheDay/index' +import { ConsistencyOfTheWeek } from './components/ConsistencyOfTheWeek/index' const newCycleFormValidationSchema = zod.object({ task: zod.string().min(1, 'Write the task'), @@ -45,33 +45,29 @@ export function Home() { } const task = watch('task') - const isSubmitDisable = !task + const isSubmitDisabled = !task return (
- - - - + {/* */} + + +
+

Click the button to choose a task to work on

+ {activeCycle ? ( Interrupt ) : ( - - - Start + + Start a New Task )} -
) } diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts index e10b42c..1564fef 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Home/styles.ts @@ -14,40 +14,48 @@ export const HomeContainer = styled.main` align-items: center; gap: 3.5rem; } + + p { + font-weight: 600; + color: ${(props) => props.theme['gray-500']}; + } + + hr { + border-top: 1px solid ${(props) => props.theme['gray-300']}; + width: 100%; + } ` export const BaseCountdownButton = styled.button` + font-family: 'Plus Jakarta Sans', sans-serif; width: 100%; border: 0; - padding: 1rem; + padding: 1.25rem; border-radius: 8px; display: flex; justify-content: center; align-items: center; - gap: 0.5rem; - font-weight: bold; - + font-weight: 600; cursor: pointer; &:disabled { - opacity: 0.7; + //opacity: 0.7; cursor: not-allowed; } ` export const StartCountdownButton = styled(BaseCountdownButton)` - background: ${(props) => props.theme['green-500']}; - color: ${(props) => props.theme['gray-100']}; - + background: ${(props) => props.theme['blue-500']}; + color: white; + border-radius: 9px; &:not(:disabled):hover { - background: ${(props) => props.theme['green-700']}; + background: ${(props) => props.theme['blue-500']}; } ` export const StopCountdownButton = styled(BaseCountdownButton)` background: ${(props) => props.theme['red-500']}; color: ${(props) => props.theme['gray-100']}; - &:not(:disabled):hover { background: ${(props) => props.theme['red-700']}; } diff --git a/src/pages/Reports/Consistency/index.tsx b/src/pages/Reports/Consistency/index.tsx new file mode 100644 index 0000000..7b70dc7 --- /dev/null +++ b/src/pages/Reports/Consistency/index.tsx @@ -0,0 +1,15 @@ +import { ConsistencyContainer } from './styles' + +export function Consistency() { + return ( + +
+

Consistency

+ +
+ + ) +} diff --git a/src/pages/Reports/Consistency/styles.ts b/src/pages/Reports/Consistency/styles.ts new file mode 100644 index 0000000..1ecf1b9 --- /dev/null +++ b/src/pages/Reports/Consistency/styles.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components' + +export const ConsistencyContainer = styled.div` + display: flex; + flex-direction: column; + div { + display: flex; + flex-direction: row; + justify-content: space-between; + + h1 { + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + } + + select { + border-radius: 20px; + border: solid 1px ${(props) => props.theme['gray-300']}; + color: ${(props) => props.theme['gray-500']}; + padding: 0.5rem 1rem; + option { + } + } + } +` diff --git a/src/pages/Reports/ConsistencyChart/index.tsx b/src/pages/Reports/ConsistencyChart/index.tsx new file mode 100644 index 0000000..5ee0c5d --- /dev/null +++ b/src/pages/Reports/ConsistencyChart/index.tsx @@ -0,0 +1,9 @@ +import {} from './styles' + +export function ConsistencyChart() { + return ( + <> +

Consistency

+ + ) +} diff --git a/src/pages/Reports/ConsistencyChart/styles.ts b/src/pages/Reports/ConsistencyChart/styles.ts new file mode 100644 index 0000000..6cd14e9 --- /dev/null +++ b/src/pages/Reports/ConsistencyChart/styles.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components' + +export const ReportsContainer = styled.div` + display: flex; + flex-direction: column; +` diff --git a/src/pages/Reports/ConsistencySummary/index.tsx b/src/pages/Reports/ConsistencySummary/index.tsx new file mode 100644 index 0000000..cef38be --- /dev/null +++ b/src/pages/Reports/ConsistencySummary/index.tsx @@ -0,0 +1,20 @@ +import { ConsitencySummaryContainer } from './styles' + +export function ConsistencySummary() { + return ( + +
+

Best Strike

+

5 consecutive days

+
+
+

Best of Week

+

10 tasks on Tuesday

+
+
+

Best Strike

+

5 consecutive days

+
+ + ) +} diff --git a/src/pages/Reports/ConsistencySummary/styles.ts b/src/pages/Reports/ConsistencySummary/styles.ts new file mode 100644 index 0000000..86ca602 --- /dev/null +++ b/src/pages/Reports/ConsistencySummary/styles.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components' + +export const ConsitencySummaryContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + + div { + display: flex; + flex-direction: column; + p { + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 700; + } + h1 { + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + } + } +` diff --git a/src/pages/Reports/GoalRanking/index.tsx b/src/pages/Reports/GoalRanking/index.tsx new file mode 100644 index 0000000..ce09a1a --- /dev/null +++ b/src/pages/Reports/GoalRanking/index.tsx @@ -0,0 +1,32 @@ +import { + GoalRankingContainer, + GoalContainer, + ProgressBar, + InfoContainer, + LabelsContainer, + SessionTitle, + ListContainer, + RankingNumber +} from './styles' + +export function GoalRanking() { + return ( + + Goal Ranking + + + #1 + + +

Learn English

+

12 days left

+ + +
+ + + + + + ) +} diff --git a/src/pages/Reports/GoalRanking/styles.ts b/src/pages/Reports/GoalRanking/styles.ts new file mode 100644 index 0000000..3931d23 --- /dev/null +++ b/src/pages/Reports/GoalRanking/styles.ts @@ -0,0 +1,75 @@ +import styled from 'styled-components' + +export const GoalRankingContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; +` +export const SessionTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 2rem; +` + +export const GoalContainer = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` +export const RankingNumber = styled.div` + flex-grow: 0; + text-align: right; + font-size: 1.05rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-style: italic; + color: ${(props) => props.theme['gray-500']}; + font-weight: 700; +` + +export const LabelsContainer = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; + justify-content: space-between; + justify-items: end; + width: 100%; + + p { + line-height: 180%; + text-align: right; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 700; + } + h1 { + font-size: 1rem; + color: ${(props) => props.theme['gray-700']}; + font-weight: 800; + } +` +export const ListContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1.5rem; +` + +export const ProgressBar = styled.div` + height: 0.65rem; + background-color: ${(props) => props.theme['gray-200']}; + border-radius: 9px; + + div { + height: 100%; + border-radius: 9px; + width: 70%; + background-color: ${(props) => props.theme['blue-500']}; + } +` + +export const InfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; + flex-grow: 1; +` diff --git a/src/pages/Reports/TaskHistory/index.tsx b/src/pages/Reports/TaskHistory/index.tsx new file mode 100644 index 0000000..d9dd1e8 --- /dev/null +++ b/src/pages/Reports/TaskHistory/index.tsx @@ -0,0 +1,27 @@ +import { + TaskHistoryContainer, + IconContainer, + TaskDataContainer, + TaskContainer +} from './styles' +import { CheckCircle } from 'phosphor-react' + +export function TaskHistory() { + return ( + +

Task History

+ + + + + + 20 min ago +

Read a book in English

+ + 30 min + + {/* + */} + + ) +} diff --git a/src/pages/Reports/TaskHistory/styles.ts b/src/pages/Reports/TaskHistory/styles.ts new file mode 100644 index 0000000..31c0c01 --- /dev/null +++ b/src/pages/Reports/TaskHistory/styles.ts @@ -0,0 +1,43 @@ +import styled from 'styled-components' + +export const TaskHistoryContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + + h1 { + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 1.5rem; + } + + span { + line-height: 180%; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 700; + } +` + +export const IconContainer = styled.div` + flex-grow: 0; +` +export const TaskContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + + h1 { + font-size: 1rem; + color: ${(props) => props.theme['gray-700']}; + font-weight: 800; + } +` + +export const TaskDataContainer = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; +` diff --git a/src/pages/Reports/index.tsx b/src/pages/Reports/index.tsx new file mode 100644 index 0000000..9dfaef2 --- /dev/null +++ b/src/pages/Reports/index.tsx @@ -0,0 +1,21 @@ +import { Consistency } from './Consistency' +import { ConsistencyChart } from './ConsistencyChart' +import { ConsistencySummary } from './ConsistencySummary' +import { GoalRanking } from './GoalRanking' +import { TaskHistory } from './TaskHistory' +import { ReportsContainer, ListsContainer } from './styles' + +export function Reports() { + return ( + + + + + + +
+ + + + ) +} diff --git a/src/pages/Reports/styles.ts b/src/pages/Reports/styles.ts new file mode 100644 index 0000000..fae641e --- /dev/null +++ b/src/pages/Reports/styles.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components' + +export const ReportsContainer = styled.div` + display: flex; + flex-direction: column; + gap: 2.5rem; +` +export const ListsContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; + // *:not(hr) { + // flex-grow: 1; + // } +` diff --git a/src/pages/UserSettings/components/AccountInfo/index.tsx b/src/pages/UserSettings/components/AccountInfo/index.tsx new file mode 100644 index 0000000..b6eaf3c --- /dev/null +++ b/src/pages/UserSettings/components/AccountInfo/index.tsx @@ -0,0 +1,10 @@ +import { Card, CardTitle, SaveButton } from './styles' + +export function AccountInfo() { + return ( + + Account info + Save + + ) +} diff --git a/src/pages/UserSettings/components/AccountInfo/styles.tsx b/src/pages/UserSettings/components/AccountInfo/styles.tsx new file mode 100644 index 0000000..a63c359 --- /dev/null +++ b/src/pages/UserSettings/components/AccountInfo/styles.tsx @@ -0,0 +1,37 @@ +import styled from 'styled-components' + +export const Card = styled.div` + background-color: white; + width: 100%; + display: flex; + gap: 0.75rem; + flex-direction: column; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; +` +export const CardTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 2rem; +` + +export const SaveButton = styled.button` + align-self: flex-end; + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2.5rem; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` diff --git a/src/pages/UserSettings/components/CancelAccount/index.tsx b/src/pages/UserSettings/components/CancelAccount/index.tsx new file mode 100644 index 0000000..5de92f0 --- /dev/null +++ b/src/pages/UserSettings/components/CancelAccount/index.tsx @@ -0,0 +1,42 @@ +import { + Card, + CardTitle, + Subtitle, + ButtonsContainer, + DeleteAccountButton, + NeverMindButton, + Container, +} from './styles' + +export function CancelAccount() { + return ( +
+ + Cancel Account + + Tell Chimp why you don’t wanna stick with it. +

It does not help me

+

It does not help me

+

It does not help me

+

It does not help me

+ + + Vent your insatisfaction with Chimptok + + + + What will happen to your account? +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + support@chimptok.com enim ad minim veniam. +

+ + + Never Mind + Delete Account + + +
+ ) +} diff --git a/src/pages/UserSettings/components/CancelAccount/styles.tsx b/src/pages/UserSettings/components/CancelAccount/styles.tsx new file mode 100644 index 0000000..285c178 --- /dev/null +++ b/src/pages/UserSettings/components/CancelAccount/styles.tsx @@ -0,0 +1,82 @@ +import styled from 'styled-components' + +export const Card = styled.div` + background-color: white; + width: 100%; + display: flex; + gap: 0.75rem; + flex-direction: column; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; +` + +export const CardTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 1rem; +` +export const Container = styled.h1` + display: flex; + gap: 0.25rem; + flex-direction: column; + + p { + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + } +` +export const Subtitle = styled.h2` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 1rem; +` + +export const ButtonsContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: end; + gap: 1rem; + margin-top: 1rem; +` +export const DeleteAccountButton = styled.button` + align-self: flex-end; + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` +export const NeverMindButton = styled.button` + align-self: flex-end; + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['red-500']}; + color: ${(props) => props.theme['red-700']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['red-300']}; + cursor: pointer; + } +` diff --git a/src/pages/UserSettings/components/SocialMedia/index.tsx b/src/pages/UserSettings/components/SocialMedia/index.tsx new file mode 100644 index 0000000..6e99f6a --- /dev/null +++ b/src/pages/UserSettings/components/SocialMedia/index.tsx @@ -0,0 +1,35 @@ +import { CheckCircle, InstagramLogo } from 'phosphor-react' +import { + Card, + CardTitle, + WhyToFollowContainer, + SocialMediaContainer, + LinksContainer, + SocialMediaItem, +} from './styles' + +export function SocialMedia() { + return ( +
+ + Follow Chimp on Social Media + + + + + +

Instagram

+ + + +

Why should I follow?

+

+ ILorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + +
+ ) +} diff --git a/src/pages/UserSettings/components/SocialMedia/styles.tsx b/src/pages/UserSettings/components/SocialMedia/styles.tsx new file mode 100644 index 0000000..2483eef --- /dev/null +++ b/src/pages/UserSettings/components/SocialMedia/styles.tsx @@ -0,0 +1,64 @@ +import styled from 'styled-components' + +export const Card = styled.div` + background-color: white; + width: 100%; + display: flex; + gap: 0.75rem; + flex-direction: column; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; +` +export const CardTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + margin-bottom: 1rem; +` + +export const WhyToFollowContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; + + h1 { + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; + } + + p { + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + } +` + +export const SocialMediaContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; + & > * { + flex: 1; + max-width: 50%; + } +` +export const LinksContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +` +export const SocialMediaItem = styled.div` + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; + + p { + color: ${(props) => props.theme['dark-900']}; + font-size: 0.85rem; + font-weight: 700; + } +` diff --git a/src/pages/UserSettings/components/Support/index.tsx b/src/pages/UserSettings/components/Support/index.tsx new file mode 100644 index 0000000..4b89c9f --- /dev/null +++ b/src/pages/UserSettings/components/Support/index.tsx @@ -0,0 +1,16 @@ +import { Card, CardTitle, SupportContainer, SaveButton, SupportText } from './styles' + +export function Support() { + return ( + + Support + + + ILorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et. + + Report a problema + + + ) +} diff --git a/src/pages/UserSettings/components/Support/styles.tsx b/src/pages/UserSettings/components/Support/styles.tsx new file mode 100644 index 0000000..4db4e6d --- /dev/null +++ b/src/pages/UserSettings/components/Support/styles.tsx @@ -0,0 +1,50 @@ +import styled from 'styled-components' + +export const Card = styled.div` + background-color: white; + width: 100%; + display: flex; + flex-direction: column; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; + gap: 1rem; +` +export const CardTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; +` +export const SupportContainer = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + align-items: start; + gap: 2rem; +` + +export const SaveButton = styled.button` + align-self: flex-end; + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + color: ${(props) => props.theme.white}; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` + +export const SupportText = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; +` diff --git a/src/pages/UserSettings/components/profileInfo/index.tsx b/src/pages/UserSettings/components/profileInfo/index.tsx new file mode 100644 index 0000000..09efefb --- /dev/null +++ b/src/pages/UserSettings/components/profileInfo/index.tsx @@ -0,0 +1,32 @@ +import { + Container, + InfosContainer, + ContactContainer, + Name, + Email, + MembershipDataContainer, + SignUpDate, + MembershipCount, +} from './styles' +import ChimpUser from '../../../../../public/chimp_profile.png' + +export function ProfileInfo() { + return ( + + + + Coolest Chimp logo smiling to you + + LETTY + leticiagoncalves.tech@gmail.com + + + since 24th november 2023 + + 266Days Chasing Your Goals + + + + + ) +} diff --git a/src/pages/UserSettings/components/profileInfo/styles.tsx b/src/pages/UserSettings/components/profileInfo/styles.tsx new file mode 100644 index 0000000..d310cfe --- /dev/null +++ b/src/pages/UserSettings/components/profileInfo/styles.tsx @@ -0,0 +1,71 @@ +import styled from 'styled-components' + +export const Card = styled.div` + background-color: white; + width: 100%; + display: flex; + gap: 0.75rem; + flex-direction: row; + padding: 2rem; + border: solid 2px ${(props) => props.theme['gray-300']}; + border-radius: 9px; +` +export const Container = styled.div` + display: flex; +` + +export const InfosContainer = styled.div` + display: flex; + img { + width: 5rem; + height: 5rem; + border-radius: 100%; + } + gap: 1rem; + width: 100%; +` + +export const ContactContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +` + +export const Name = styled.h1` + line-height: 80%; + font-size: 1.5rem; + font-family: 'Barlow Semi Condensed', sans-serif; + color: ${(props) => props.theme['dark-900']}; + font-weight: 900; +` +export const Email = styled.span` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; +` + +export const MembershipDataContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; + text-align: right; + width: 100%; +` +export const SignUpDate = styled.div` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; +` +export const MembershipCount = styled.div` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + + span { + margin-right: 0.25rem; + font-weight: 800; + color: ${(props) => props.theme['dark-900']}; + } +` diff --git a/src/pages/UserSettings/index.tsx b/src/pages/UserSettings/index.tsx new file mode 100644 index 0000000..6fe7da0 --- /dev/null +++ b/src/pages/UserSettings/index.tsx @@ -0,0 +1,20 @@ +import { AccountInfo } from './components/AccountInfo' +import { CancelAccount } from './components/CancelAccount' +import { ProfileInfo } from './components/profileInfo' +import { SocialMedia } from './components/SocialMedia/index' +import { Support } from './components/Support' + +import { MainContainer, DeleteAccountButton } from './styles' + +export function UserSettings() { + return ( + + + + + + + Delete Account + + ) +} diff --git a/src/pages/UserSettings/styles.ts b/src/pages/UserSettings/styles.ts new file mode 100644 index 0000000..9c87a6e --- /dev/null +++ b/src/pages/UserSettings/styles.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components' + +export const MainContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +` +export const DeleteAccountButton = styled.button` + align-self: flex-end; + border: 0; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 800; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: transparent; + color: ${(props) => props.theme['red-500']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['red-500']}; + color: white; + cursor: pointer; + } +` diff --git a/src/reducers/reducer.ts b/src/reducers/reducer.ts index 80ce431..f873dfa 100644 --- a/src/reducers/reducer.ts +++ b/src/reducers/reducer.ts @@ -3,7 +3,6 @@ import { produce } from 'immer' import { ActionTypes } from './actions' export interface Cycle { - [x: string]: string | number | Date id: string task: string minutesAmount: number diff --git a/src/styles/global.ts b/src/styles/global.ts index 0df1af4..f7b91f3 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -5,6 +5,7 @@ export const GlobalStyle = createGlobalStyle` margin: 0; padding: 0; box-sizing: border-box; + font-family: 'Plus Jakarta Sans', sans-serif; } img { @@ -19,12 +20,12 @@ img { ::-moz-selection { /* Code for Firefox */ color: white; - background-color: ${(props) => props.theme['green-500']}; + background-color: ${(props) => props.theme['yellow-500']}; } ::selection { - color: white; - background-color: ${(props) => props.theme['green-500']}; + color: ${(props) => props.theme['dark-900']}; + background-color: ${(props) => props.theme['yellow-500']}; } :focus { @@ -34,7 +35,7 @@ img { body { background: ${(props) => props.theme['gray-100']}; - color: ${(props) => props.theme['brown-800']}; + color: ${(props) => props.theme['yellow-500']}; -webkit-font-smoothing: antialiased; } @@ -60,6 +61,6 @@ body, input, textarea, button { } ::-webkit-scrollbar-thumb:hover { - background-color: #a8bbbf; + background-color: ${(props) => props.theme['gray-500']}; } ` diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index a4cc6e1..45b09a3 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -1,21 +1,33 @@ export const defaultTheme = { - white: '#FFF', + white: '#FFFFFF', - 'gray-50': '#E9E9E9', - 'gray-100': '#DFDFDF', - 'gray-300': '#C4C4CC', - 'gray-400': '#8D8D99', - 'gray-500': '#7C7C8A', + // 'gray-50': '#E9E9E9', + // 'gray-300': '#C4C4CC', + // 'gray-400': '#8D8D99', - 'brown-700': '#403B3B', - 'brown-800': '#323238', + 'gray-100': '#F9F9F9', + 'gray-200': '#E7E7E7', + 'gray-300': '#D9D9D9', + 'gray-500': '#ABABAB', + 'gray-700': '#5C5B5B', - 'green-300': '#44cd7b', - 'green-500': '#55DC8B', - 'green-700': '#0F766E', + // 'brown-700': '#403B3B', + // 'brown-800': '#323238', - 'red-500': '#AB222E', - 'red-700': '#7A1921', + // 'green-300': '#44cd7b', - 'yellow-500': '#FBA94C', + // 'green-700': '#0F766E', + + 'red-300': '#f17171', + 'red-500': '#F16363', + 'red-700': '#4f090e', + + 'yellow-300': '#fff2c6', + 'yellow-500': '#FADE7E', + 'yellow-600': '#FBD862', + 'blue-500': '#65A3FF', + 'green-500': '#87D96C', + 'orange-500': '#FEC167', + 'dark-800': '#403B3B', + 'dark-900': '#302D27', } diff --git a/vite.config.ts.timestamp-1700851850145.mjs b/vite.config.ts.timestamp-1700851850145.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1700851850145.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701085633082.mjs b/vite.config.ts.timestamp-1701085633082.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1701085633082.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701429375927.mjs b/vite.config.ts.timestamp-1701429375927.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1701429375927.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701705735861.mjs b/vite.config.ts.timestamp-1701705735861.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1701705735861.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1702569135856.mjs b/vite.config.ts.timestamp-1702569135856.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1702569135856.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1702649078942.mjs b/vite.config.ts.timestamp-1702649078942.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1702649078942.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From 7c2a9f47de1a13f7e8d7fe88a12a6f230bdbc94a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Tue, 19 Dec 2023 22:13:51 -0300 Subject: [PATCH 02/13] creating button, input, and auth components --- src/components/Button.styles.ts | 29 ---- src/components/Button.tsx | 9 -- src/components/Button/index.tsx | 29 ++++ src/components/Button/styles.ts | 57 +++++++ src/components/Input/index.tsx | 23 +++ src/components/Input/styles.ts | 57 +++++++ src/pages/Auth/ForgotPassword/index.tsx | 35 +++++ src/pages/Auth/ForgotPassword/styles.ts | 121 +++++++++++++++ src/pages/Auth/Login/index.tsx | 29 ++-- src/pages/Auth/Login/styles.ts | 31 +++- src/pages/Auth/Register/index.tsx | 48 ++++-- src/pages/Auth/Register/styles.ts | 40 ++++- src/pages/Auth/Reset Password/index.tsx | 48 ++++++ src/pages/Auth/Reset Password/styles.ts | 142 ++++++++++++++++++ src/pages/Auth/index.tsx | 10 +- src/pages/Auth/styles.ts | 6 +- src/styles/global.ts | 10 +- src/styles/themes/default.ts | 5 +- ....timestamp-1703034532697-1a372c0a63822.mjs | 10 ++ 19 files changed, 670 insertions(+), 69 deletions(-) delete mode 100644 src/components/Button.styles.ts delete mode 100644 src/components/Button.tsx create mode 100644 src/components/Button/index.tsx create mode 100644 src/components/Button/styles.ts create mode 100644 src/components/Input/index.tsx create mode 100644 src/components/Input/styles.ts create mode 100644 src/pages/Auth/ForgotPassword/index.tsx create mode 100644 src/pages/Auth/ForgotPassword/styles.ts create mode 100644 src/pages/Auth/Reset Password/index.tsx create mode 100644 src/pages/Auth/Reset Password/styles.ts create mode 100644 vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs diff --git a/src/components/Button.styles.ts b/src/components/Button.styles.ts deleted file mode 100644 index 5960f91..0000000 --- a/src/components/Button.styles.ts +++ /dev/null @@ -1,29 +0,0 @@ -import styled, { css } from 'styled-components' - -export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' - -interface ButtonContainerProps { - variant: ButtonVariant -} - -const ButtonVariants = { - primary: 'purple', - secondary: 'orange', - danger: 'red', - success: 'green', -} - -export const ButtonContainer = styled.button` - width: 100px; - height: 40px; - border-radius: 4px; - border: 0; - margin: 8px; - - background-color: ${(props) => props.theme.white}; - color: ${(props) => props.theme.white}; - /* ${(props) => - css` - background-color: ${ButtonVariants[props.variant]}; - `} */ -` diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 645abd8..0000000 --- a/src/components/Button.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { ButtonContainer, ButtonVariant } from './Button.styles' - -interface ButtonProps { - variant?: ButtonVariant -} - -export function Button({ variant = 'primary' }: ButtonProps) { - return Enviar -} diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx new file mode 100644 index 0000000..d94a7d7 --- /dev/null +++ b/src/components/Button/index.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { ButtonWrapper } from './styles' + +interface ButtonProps { + onClick?: () => void + children: React.ReactNode + disabled?: boolean + color?: 'yellow' | 'blue' | 'dark' + buttonType?: 'filled' | 'border' | 'flat' +} + +export function Button({ + onClick, + children, + disabled = false, + color = 'yellow', + buttonType = 'filled', +}: ButtonProps) { + return ( + + {children} + + ) +} diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts new file mode 100644 index 0000000..32930df --- /dev/null +++ b/src/components/Button/styles.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +interface ButtonWrapperProps { + color: 'yellow' | 'blue' | 'dark' + buttonType: 'filled' | 'border' | 'flat' +} + +export const ButtonWrapper = styled.button` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 1rem; + border: ${(props) => + props.buttonType === 'border' + ? `solid 2px ${props.theme['yellow-500']}` + : 'none'}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; + background-color: ${(props) => + props.buttonType === 'flat' + ? 'transparent' + : props.color === 'yellow' + ? props.theme[`${props.color}-500`] || props.theme['yellow-500'] + : props.color === 'blue' + ? props.theme[`${props.color}-500`] || props.theme['blue-500'] + : props.color === 'dark' + ? props.theme['dark-900'] + : props.theme[ + 'yellow-500' + ]}; // You can set a default color or handle other cases as needed + color: ${(props) => + props.color === 'dark' ? 'white' : props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => + props.buttonType === 'flat' + ? 'transparent' + : props.color === 'yellow' + ? props.theme[`${props.color}-400`] || props.theme['yellow-400'] + : props.color === 'blue' + ? props.theme[`${props.color}-400`] || props.theme['blue-400'] + : props.color === 'dark' + ? props.theme['dark-800'] + : props.theme['yellow-400']}; // Adjust the tint level as needed + } + + :disabled { + opacity: 0.5; + } +` diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx new file mode 100644 index 0000000..c7ffe39 --- /dev/null +++ b/src/components/Input/index.tsx @@ -0,0 +1,23 @@ +import { InputWrapper, StyledInput, IconWrapper, ErrorMessage } from './styles' +import { InputHTMLAttributes, ReactNode } from 'react' + +interface InputProps extends InputHTMLAttributes { + placeholder: string + icon?: ReactNode + errorMessage?: string +} + +export function Input({ + placeholder, + icon, + errorMessage, + ...props +}: InputProps) { + return ( + + + {icon && {icon}} + {errorMessage && {errorMessage}} + + ) +} diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts new file mode 100644 index 0000000..fffc5bf --- /dev/null +++ b/src/components/Input/styles.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +export const InputWrapper = styled.div` + width: 100%; + position: relative; +` + +export const StyledInput = styled.input` + background-color: ${(props) => props.theme['gray-100']}; + padding: 1rem; + padding-left: 3rem; + font-size: 0.85rem; + width: 100%; + border: 2px solid ${(props) => props.theme['gray-300']}; + border-radius: 8px; + box-sizing: border-box; + transition: border 0.3s ease; /* Add transition for border property */ + font-weight: 600; + /* border: ${(props) => + props.hasError + ? `2px solid ${props.theme['gray-300']}` + : `2px solid ${props.theme['red-300']}`}; */ + + &:focus, + &:focus-within { + outline: none; + border: 2px solid ${(props) => props.theme['yellow-500']}; + } +` + +export const IconWrapper = styled.div` + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: ${(props) => props.theme['gray-500']}; + transition: color 0.3s ease; /* Add transition for color property */ + + ${InputWrapper}:focus-within & { + color: ${(props) => props.theme['dark-900']}; + } +` + +export const ErrorMessage = styled.div` + color: ${(props) => props.theme['red-500']}; + background-color: ${(props) => props.theme['gray-100']}; + font-size: 0.75rem; + text-align: right; + position: absolute; + padding-left: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + bottom: 20%; + right: 1rem; + font-weight: 600; + transition: color 0.3s ease; /* Add transition for color property */ +` diff --git a/src/pages/Auth/ForgotPassword/index.tsx b/src/pages/Auth/ForgotPassword/index.tsx new file mode 100644 index 0000000..f52eeec --- /dev/null +++ b/src/pages/Auth/ForgotPassword/index.tsx @@ -0,0 +1,35 @@ +import { + AuthTitle, + AuthSubtitle, + ForgotPasswordLink, + MinorText, +} from './styles' + +import { Input } from '../../../components/Input' +import { At, Keyhole, ArrowLeft } from 'phosphor-react' +import GoogleLogo from './../../../../public/logos/google_logo.svg' +import { Button } from '../../../components/Button' + +export function ForgotPassword() { + return ( + <> + Forgot Password + + No problem! Just type your e-mail to recover it. + + + } + /> + + + + Dont have an account yet? Lets create one + + + ) +} diff --git a/src/pages/Auth/ForgotPassword/styles.ts b/src/pages/Auth/ForgotPassword/styles.ts new file mode 100644 index 0000000..682391a --- /dev/null +++ b/src/pages/Auth/ForgotPassword/styles.ts @@ -0,0 +1,121 @@ +import styled from 'styled-components' + +export const AuthTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; +` +export const AuthSubtitle = styled.h1` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-bottom: 2rem; +` + +export const CreateAccountButton = styled.button` + border: solid 2px ${(props) => props.theme['yellow-500']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` +export const ConnectWithGoogleButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['dark-800']}; + cursor: pointer; + } +` +export const LogInButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: solid 2px ${(props) => props.theme['gray-700']}; + cursor: pointer; + } +` + +export const DividerWithText = styled.div` + margin-top: 4rem; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + width: 100%; + display: flex; + align-items: center; + + ::before, + ::after { + flex: 1; + content: ''; + border: 1px solid ${(props) => props.theme['gray-300']}; + margin: 1rem 1rem 1rem 1rem; + } +` + +export const ForgotPasswordLink = styled.span` + align-self: end; + font-size: 0.75rem; + margin-bottom: 0.5rem; + color: ${(props) => props.theme['gray-500']}; + :hover { + color: ${(props) => props.theme['yellow-500']}; + cursor: pointer; + } +` + +export const MinorText = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-top: 4rem; + + span { + text-decoration: underline; + + :hover { + color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } + } +` diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index 3069293..8f6155c 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -1,30 +1,39 @@ import { AuthTitle, AuthSubtitle, - CreateAccountButton, - ConnectWithGoogleButton, - LogInButton, - DividerWithText, + ForgotPasswordLink, + MinorText, } from './styles' +import { Input } from '../../../components/Input' +import { At, Keyhole } from 'phosphor-react' import GoogleLogo from './../../../../public/logos/google_logo.svg' +import { Button } from '../../../components/Button' export function Login() { return ( <> Log in Welcome back! - Login in - + + } /> + } + /> + Forgot passoword? + + + + Don't have an account yet? Let's log in + ) } diff --git a/src/pages/Auth/Login/styles.ts b/src/pages/Auth/Login/styles.ts index 701d201..682391a 100644 --- a/src/pages/Auth/Login/styles.ts +++ b/src/pages/Auth/Login/styles.ts @@ -7,8 +7,9 @@ export const AuthTitle = styled.h1` ` export const AuthSubtitle = styled.h1` font-size: 0.85rem; - color: ${(props) => props.theme['gray-500']}; + color: ${(props) => props.theme['dark-900']}; font-weight: 600; + margin-bottom: 2rem; ` export const CreateAccountButton = styled.button` @@ -75,6 +76,7 @@ export const LogInButton = styled.button` ` export const DividerWithText = styled.div` + margin-top: 4rem; font-size: 0.85rem; color: ${(props) => props.theme['gray-500']}; font-weight: 600; @@ -90,3 +92,30 @@ export const DividerWithText = styled.div` margin: 1rem 1rem 1rem 1rem; } ` + +export const ForgotPasswordLink = styled.span` + align-self: end; + font-size: 0.75rem; + margin-bottom: 0.5rem; + color: ${(props) => props.theme['gray-500']}; + :hover { + color: ${(props) => props.theme['yellow-500']}; + cursor: pointer; + } +` + +export const MinorText = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-top: 4rem; + + span { + text-decoration: underline; + + :hover { + color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } + } +` diff --git a/src/pages/Auth/Register/index.tsx b/src/pages/Auth/Register/index.tsx index 9a60c01..2273c62 100644 --- a/src/pages/Auth/Register/index.tsx +++ b/src/pages/Auth/Register/index.tsx @@ -1,30 +1,56 @@ import { AuthTitle, AuthSubtitle, - CreateAccountButton, - ConnectWithGoogleButton, - LogInButton, - DividerWithText, + PasswordValidations, + ValidationsListWrapper, + MinorText, } from './styles' - +import { Input } from '../../../components/Input' +import { At, IdentificationBadge, Keyhole, CheckCircle } from 'phosphor-react' import GoogleLogo from './../../../../public/logos/google_logo.svg' +import { Button } from '../../../components/Button' export function RegisterNewAccount() { return ( <> Create Account Insert infos to start chasing your goals - Create Account - + } /> + } + /> + } + /> + + + +

At least 6 characters

+ + + +

At lest one uppercase and one lowercase

+ + + +

At lest one number or special character

+ + + + {/* Or */} + + + Already have an account? Just log in + ) } diff --git a/src/pages/Auth/Register/styles.ts b/src/pages/Auth/Register/styles.ts index 701d201..a1a6813 100644 --- a/src/pages/Auth/Register/styles.ts +++ b/src/pages/Auth/Register/styles.ts @@ -7,7 +7,7 @@ export const AuthTitle = styled.h1` ` export const AuthSubtitle = styled.h1` font-size: 0.85rem; - color: ${(props) => props.theme['gray-500']}; + color: ${(props) => props.theme['dark-900']}; font-weight: 600; ` @@ -75,6 +75,7 @@ export const LogInButton = styled.button` ` export const DividerWithText = styled.div` + margin-top: 2rem; font-size: 0.85rem; color: ${(props) => props.theme['gray-500']}; font-weight: 600; @@ -90,3 +91,40 @@ export const DividerWithText = styled.div` margin: 1rem 1rem 1rem 1rem; } ` + +export const PasswordValidations = styled.div` + padding-left: 2rem; + display: flex; + gap: 0.5rem; + justify-items: start; + align-items: center; + width: 100%; + font-size: 0.85rem; + font-weight: 600; + color: ${(props) => props.theme['gray-500']}; +` + +export const ValidationsListWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; +` + +export const MinorText = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-top: 4rem; + + span { + text-decoration: underline; + + :hover { + color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } + } +` diff --git a/src/pages/Auth/Reset Password/index.tsx b/src/pages/Auth/Reset Password/index.tsx new file mode 100644 index 0000000..0b46f5a --- /dev/null +++ b/src/pages/Auth/Reset Password/index.tsx @@ -0,0 +1,48 @@ +import { + AuthTitle, + AuthSubtitle, + MinorText, + PasswordValidations, + ValidationsListWrapper, +} from './styles' + +import { Input } from '../../../components/Input' +import { Keyhole, CheckCircle } from 'phosphor-react' +import { Button } from '../../../components/Button' + +export function ResetPassword() { + return ( + <> + Reset Password + Create a new and good password. + + } + /> + } + /> + + + +

At least 6 characters

+ + + +

At lest one uppercase and one lowercase

+ + + +

At lest one number or special character

+ + + + + + Dont have an account yet? Lets create one + + + ) +} diff --git a/src/pages/Auth/Reset Password/styles.ts b/src/pages/Auth/Reset Password/styles.ts new file mode 100644 index 0000000..e4ab9b9 --- /dev/null +++ b/src/pages/Auth/Reset Password/styles.ts @@ -0,0 +1,142 @@ +import styled from 'styled-components' + +export const AuthTitle = styled.h1` + font-size: 1rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 800; +` +export const AuthSubtitle = styled.h1` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-bottom: 2rem; +` + +export const CreateAccountButton = styled.button` + border: solid 2px ${(props) => props.theme['yellow-500']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } +` +export const ConnectWithGoogleButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: ${(props) => props.theme['dark-800']}; + cursor: pointer; + } +` +export const LogInButton = styled.button` + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + border: solid 2px ${(props) => props.theme['dark-900']}; + width: 100%; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; + background-color: ${(props) => props.theme['dark-900']}; + color: white; + padding: 1rem 2rem; + white-space: nowrap; + + :hover { + background-color: solid 2px ${(props) => props.theme['gray-700']}; + cursor: pointer; + } +` + +export const DividerWithText = styled.div` + margin-top: 4rem; + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + width: 100%; + display: flex; + align-items: center; + + ::before, + ::after { + flex: 1; + content: ''; + border: 1px solid ${(props) => props.theme['gray-300']}; + margin: 1rem 1rem 1rem 1rem; + } +` + +export const ForgotPasswordLink = styled.span` + align-self: end; + font-size: 0.75rem; + margin-bottom: 0.5rem; + color: ${(props) => props.theme['gray-500']}; + :hover { + color: ${(props) => props.theme['yellow-500']}; + cursor: pointer; + } +` + +export const MinorText = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; + margin-top: 4rem; + + span { + text-decoration: underline; + + :hover { + color: ${(props) => props.theme['yellow-600']}; + cursor: pointer; + } + } +` + +export const PasswordValidations = styled.div` + padding-left: 2rem; + display: flex; + gap: 0.5rem; + justify-items: start; + align-items: center; + width: 100%; + font-size: 0.85rem; + font-weight: 600; + color: ${(props) => props.theme['gray-500']}; +` + +export const ValidationsListWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; +` diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx index d190d3c..cacfd45 100644 --- a/src/pages/Auth/index.tsx +++ b/src/pages/Auth/index.tsx @@ -1,5 +1,6 @@ import { Login } from './Login/index' import { RegisterNewAccount } from './Register' +import { FlagBanner } from 'phosphor-react' import { Container, AuthSecondaryContainer, @@ -7,6 +8,8 @@ import { ChimptokLogotype, ContentContainer, } from './styles' +import { ForgotPassword } from './ForgotPassword' +import { ResetPassword } from './Reset Password/index'; export function Auth() { return ( @@ -16,9 +19,12 @@ export function Auth() { + CHIMPTOK - - {/* */} + + {/* */} + {/* */} + {/* */} diff --git a/src/pages/Auth/styles.ts b/src/pages/Auth/styles.ts index 306e8ad..43b5f44 100644 --- a/src/pages/Auth/styles.ts +++ b/src/pages/Auth/styles.ts @@ -35,7 +35,8 @@ export const AuthSecondaryContainer = styled.div` ` export const AuthCard = styled.div` - max-width: 800px; + padding: 2rem; + max-width: 600px; background-color: white; display: flex; height: 100%; @@ -46,7 +47,7 @@ export const AuthCard = styled.div` ` export const ContentContainer = styled.div` - max-width: 500px; + max-width: 450px; flex-grow: 1; gap: 0.75rem; display: flex; @@ -58,6 +59,7 @@ export const ContentContainer = styled.div` export const ChimptokLogotype = styled.h1` font-size: 1.5rem; text-transform: uppercase; + font-style: italic; color: ${(props) => props.theme['dark-900']}; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 900; diff --git a/src/styles/global.ts b/src/styles/global.ts index f7b91f3..30beced 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -35,13 +35,17 @@ img { body { background: ${(props) => props.theme['gray-100']}; - color: ${(props) => props.theme['yellow-500']}; + color: ${(props) => props.theme['dark-900']}; -webkit-font-smoothing: antialiased; + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; } body, input, textarea, button { - font-family: 'Montserrat', sans-serif; - font-size: 1rem; + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + font-weight: 600; } diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 45b09a3..66c7d8a 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -6,7 +6,8 @@ export const defaultTheme = { // 'gray-400': '#8D8D99', 'gray-100': '#F9F9F9', - 'gray-200': '#E7E7E7', + 'gray-150': '#F3F3F3', + 'gray-200': '#E9E9E9', 'gray-300': '#D9D9D9', 'gray-500': '#ABABAB', 'gray-700': '#5C5B5B', @@ -23,8 +24,10 @@ export const defaultTheme = { 'red-700': '#4f090e', 'yellow-300': '#fff2c6', + 'yellow-400': '#f3db88', 'yellow-500': '#FADE7E', 'yellow-600': '#FBD862', + 'blue-400': '#85BEFF', 'blue-500': '#65A3FF', 'green-500': '#87D96C', 'orange-500': '#FEC167', diff --git a/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs b/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From 9211d58d67377a9d5188f0c3c3f43509826d254b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Thu, 21 Dec 2023 19:09:43 -0300 Subject: [PATCH 03/13] adding new components for onboarding, cards inside app, consistency new styles --- public/Timer.png | Bin 0 -> 34131 bytes src/Router.tsx | 8 +- src/components/Button/styles.ts | 4 +- src/components/Card/index.tsx | 8 ++ src/components/Card/styles.ts | 8 ++ src/components/Header/styles.ts | 1 + src/layouts/DefaultLayout/styles.ts | 2 +- src/pages/Goals/GoalCard/styles.ts | 2 +- src/pages/Goals/index.tsx | 17 +-- src/pages/Goals/styles.ts | 1 - src/pages/Onboarding/StepOne/index.tsx | 70 ++++++++++ src/pages/Onboarding/StepOne/styles.ts | 50 +++++++ src/pages/Onboarding/StepThree/index.tsx | 38 ++++++ src/pages/Onboarding/StepThree/styles.ts | 125 ++++++++++++++++++ src/pages/Onboarding/StepTwo/index.tsx | 36 +++++ src/pages/Onboarding/StepTwo/styles.ts | 67 ++++++++++ src/pages/Onboarding/index.tsx | 31 +++++ src/pages/Onboarding/styles.ts | 74 +++++++++++ src/pages/Reports/Consistency/index.tsx | 38 ++++-- src/pages/Reports/Consistency/styles.ts | 64 ++++++--- src/pages/Reports/index.tsx | 23 ++-- .../components/ConsistencyDay/index.tsx | 0 .../components/ConsistencyDay/styles.ts | 1 + .../components/ConsistencyOfTheWeek/index.tsx | 0 .../components/ConsistencyOfTheWeek/styles.ts | 2 +- .../components/Countdown/index.tsx | 0 .../components/Countdown/styles.ts | 3 +- .../components/NewCycleForm/index.tsx | 0 .../components/NewCycleForm/styles.ts | 0 .../components/ProgressOfTheDay/index.tsx | 0 .../components/ProgressOfTheDay/styles.ts | 0 src/pages/{Home => Timer}/index.tsx | 46 +++---- src/pages/{Home => Timer}/styles.ts | 23 ++-- src/pages/Welcome/index.tsx | 24 ++++ src/pages/Welcome/styles.ts | 49 +++++++ 35 files changed, 724 insertions(+), 91 deletions(-) create mode 100644 public/Timer.png create mode 100644 src/components/Card/index.tsx create mode 100644 src/components/Card/styles.ts create mode 100644 src/pages/Onboarding/StepOne/index.tsx create mode 100644 src/pages/Onboarding/StepOne/styles.ts create mode 100644 src/pages/Onboarding/StepThree/index.tsx create mode 100644 src/pages/Onboarding/StepThree/styles.ts create mode 100644 src/pages/Onboarding/StepTwo/index.tsx create mode 100644 src/pages/Onboarding/StepTwo/styles.ts create mode 100644 src/pages/Onboarding/index.tsx create mode 100644 src/pages/Onboarding/styles.ts rename src/pages/{Home => Timer}/components/ConsistencyDay/index.tsx (100%) rename src/pages/{Home => Timer}/components/ConsistencyDay/styles.ts (92%) rename src/pages/{Home => Timer}/components/ConsistencyOfTheWeek/index.tsx (100%) rename src/pages/{Home => Timer}/components/ConsistencyOfTheWeek/styles.ts (90%) rename src/pages/{Home => Timer}/components/Countdown/index.tsx (100%) rename src/pages/{Home => Timer}/components/Countdown/styles.ts (88%) rename src/pages/{Home => Timer}/components/NewCycleForm/index.tsx (100%) rename src/pages/{Home => Timer}/components/NewCycleForm/styles.ts (100%) rename src/pages/{Home => Timer}/components/ProgressOfTheDay/index.tsx (100%) rename src/pages/{Home => Timer}/components/ProgressOfTheDay/styles.ts (100%) rename src/pages/{Home => Timer}/index.tsx (61%) rename src/pages/{Home => Timer}/styles.ts (84%) create mode 100644 src/pages/Welcome/index.tsx create mode 100644 src/pages/Welcome/styles.ts diff --git a/public/Timer.png b/public/Timer.png new file mode 100644 index 0000000000000000000000000000000000000000..c5f964c9533252e72ee9041fbbc692fb32105a68 GIT binary patch literal 34131 zcmd?Rc~p|^*DsEiS(@6@prsiNPic+~4ymaPkC~N2nVO)YnK=SZXgOh-S(#dynmOP+ zqd9>in3ksIte_&`tcZ#eq9E|2=lh;@{(aY3>#X&z-}!@e!_77BYv0%P*?WKX{noX03j}YK%>QTW>A-@O4 zHvpyG$7zBeyIrrFUIzfmLDn2*tnqf=+wfbaH4REi^M4t| zI8uIT8msNvmDTjy``8ybKWZhFZNJV zyTvCj3vZhp8L#qJ@fm`>WY?8cktPoh|>F0 zhU>%UvWm}!4B$dJX8m7Q{JjGY;s!2KWdno-|7IXH>Yj9`>L_cpzvZP{&;xy2dTdG_ zO-LGSIsQ8bycTTi3(t#+)97HC-2E7#iG|M)RAy+(U|HLmkrC3I|O8x!pPjmZk z_0Ok;VY`3)_#u9{$$T(r@lV;K$3?tD>vvM8QAa{r&I)c^c+~Zmg7MmsB*FJ<*LHgg zE+r@{ROp; zO7&sG4OJzE_=&q0IRh7PypOlGtUCi`f0%nOQ>G1cV9fh8zSyE6ZnZT>Gq@O>dUd%f z-rU186SwM$twkBGTw`+vqzuQ>c77l7g>dTR;CGS`?DGm(&?sv2^O>zNDFUhS;dB?9(;0C-MU>F%qsb^Xd?20z6?i z!T%5;<@@jC>|W7iTPz5MJKpU2mo=cDsKl|&tyxvt7igrTh>M65xs23}B!R~~A)60a z%S2R)!=vY1Q|ZS`j{rcSX>DP}c=az=y4ObzQ*B^uhw43rv8RY%0A9zr(JHIF>EP+YEI zmFmr#MqXPTOp|C9GufJ9+BIT+cws20)S3}*eg)^9ws_;WUw4Rm(5Z8RR$F%oUCs1H zPn;x@2lsZ#Mxe{d%AdxAyAUx1`c#}j(UQ&_o~a63&7x(V5gVj`MbDQ#>k}V1zyMD~ zy4l+mTCaBEx%hbL4Pw_Lpyw%@t>wWRg3*TewH)~T>UEOh$>Jm6mU|^Xx3{uwu%J>D zAysH*+EojL#s_kl%jG$moYyGsZ~LvDq`b-mxA$A`p4bw}-p;bE%ym|KXr1B!QZ;7P zU}|G7PbTbXTa@SiTF|fR6PA`S;=0V1)bT%Zc>$p0d{gB;j3B&Qit;7%*JK)-(81Gx zv84FE?z*$!sfMMnn0=_P-n79NY#nbt*U$C34tF{pJk`SW4jt%$ne&P5;jf#9rT%O* zj#uxM*j7IEnCVC`Gn|hFwP|krK>hqNtZiHBxT7WL@1UGE>>l#yE(7tjX2ksqf=BS$ z*wL4Nwz~g=y@?{qZtZNtdihK_rc%TKfP%cm;j)lk8qSR6oHvi(x4u@4pMupbVK!KT z=kQf9kq#jS@HL4L1`f%^*IqUYhOy)4F!jVbWgJ)jkDAfb1Aa_ImNEMb`F8_H+ZAeU z8s;O>BwQfZydOp7G6RPuJ?Tr0gD#-}K-2inR%^}xDbA2xpz&xf z6uMIv1vG16`4q=_h*S9+)n)aD^(#O-^-?@-)_PnZt)tR2sl}z-7kV1|e$O>5<}QbG zlk%N76b|q<121^+b6Lect262$FH*i*?5V3j;G0=YZOWqA^VxkguHL5uVNRF*mEVJ> za%WUj4b|a471`3>X+LSk3BOrevt90IEnQZ@C5UrwN6b};Z3+`(1*fTBUeSN*M%)9{ zNev_UW5k_VR(wau){!MZAvpe{p#{`&SMf?-go6X`m%W=<AIZfR5V@sX=D`=_cbU(KWoc38H zHHT75ivqp4>E2ah8>K7dUP^`le3|y}jx)i7YR6ERaR>=E8Zyt%t7evajoJ1$3pntaW+mb#pQ+GTK+YreSdbp1*yPR8!-= zPVld4sxv-ea{0aQoxZ){Uk)_+xxL3Ir3zz}GON|*L_DZMoh |BI%8S|sRic*}yg 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 JRcJhq{9hJR)F=P| literal 0 HcmV?d00001 diff --git a/src/Router.tsx b/src/Router.tsx index fdc0f34..3aab86f 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,25 +1,29 @@ import { Routes, Route, Navigate } from 'react-router-dom' import { DefaultLayout } from './layouts/DefaultLayout' -import { Home } from './pages/Home' +import { Timer } from './pages/Timer' import { NotFoundPage } from './pages/NotFoundPage/index' import { Reports } from './pages/Reports/index' import { Goals } from './pages/Goals' import { UserSettings } from './pages/UserSettings' import { FullPageLayout } from './layouts/FullPageLayout' import { Auth } from './pages/Auth' +import { Welcome } from './pages/Welcome/index' +import { Onboarding } from './pages/Onboarding/index' export function Router() { return ( } /> }> - } /> + } /> } /> } /> } /> }> } /> + } /> + } /> } /> {/* }> diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 32930df..91f4736 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -34,7 +34,9 @@ export const ButtonWrapper = styled.button` 'yellow-500' ]}; // You can set a default color or handle other cases as needed color: ${(props) => - props.color === 'dark' ? 'white' : props.theme['dark-900']}; + props.color === 'dark' || props.color === 'blue' + ? 'white' + : props.theme['dark-900']}; padding: 1rem 2rem; white-space: nowrap; diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..b7fd47a --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,8 @@ +import { CardWrapper } from './styles' + +interface CardProps { + children: React.ReactNode +} +export function Card({ children }: CardProps) { + return {children} +} diff --git a/src/components/Card/styles.ts b/src/components/Card/styles.ts new file mode 100644 index 0000000..c40f60e --- /dev/null +++ b/src/components/Card/styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const CardWrapper = styled.div` + background-color: white; + border: 1px solid ${(props) => props.theme['gray-300']}; + border-radius: 9px; + padding: 3rem; +` diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 25733be..f950cd4 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' export const HeaderContainer = styled.header` + z-index: 99; display: flex; align-items: center; justify-content: center; diff --git a/src/layouts/DefaultLayout/styles.ts b/src/layouts/DefaultLayout/styles.ts index 44056be..631bff6 100644 --- a/src/layouts/DefaultLayout/styles.ts +++ b/src/layouts/DefaultLayout/styles.ts @@ -7,5 +7,5 @@ export const LayoutContainer = styled.div` export const RouterContainer = styled.div` margin-top: 5rem; padding: 2.5rem; - width: 764px; + width: 769px; ` diff --git a/src/pages/Goals/GoalCard/styles.ts b/src/pages/Goals/GoalCard/styles.ts index cc6dbe5..777f7ad 100644 --- a/src/pages/Goals/GoalCard/styles.ts +++ b/src/pages/Goals/GoalCard/styles.ts @@ -44,7 +44,7 @@ export const CardContainer = styled.div` display: flex; gap: 0.75rem; flex-direction: column; - padding: 2rem; + padding: 1.5rem; border: solid 2px ${(props) => props.theme['gray-300']}; border-radius: 9px; diff --git a/src/pages/Goals/index.tsx b/src/pages/Goals/index.tsx index 5337a25..149deb6 100644 --- a/src/pages/Goals/index.tsx +++ b/src/pages/Goals/index.tsx @@ -1,24 +1,25 @@ import { NavLink } from 'react-router-dom' import { GoalsContainer } from './styles' import { GoalCard } from './GoalCard/index' +import { Card } from '../../components/Card' export function Goals() { return ( <> - - - - + + + + + ) } diff --git a/src/pages/Goals/styles.ts b/src/pages/Goals/styles.ts index e5fb652..05fc0d5 100644 --- a/src/pages/Goals/styles.ts +++ b/src/pages/Goals/styles.ts @@ -10,7 +10,6 @@ export const GoalsContainer = styled.div` nav { display: flex; gap: 0.5rem; - justify-content: space-between; div { display: flex; diff --git a/src/pages/Onboarding/StepOne/index.tsx b/src/pages/Onboarding/StepOne/index.tsx new file mode 100644 index 0000000..7553225 --- /dev/null +++ b/src/pages/Onboarding/StepOne/index.tsx @@ -0,0 +1,70 @@ +import { Button } from '../../../components/Button' +import { Input } from '../../../components/Input' +import { + SuperHeader, + Subtitle, + SessionLabel, + SectionWrapper, + DetailsWrapper, + Skip, +} from './styles' + +import { + FlagBanner, + Calendar, + Clock, + CheckSquareOffset, + Plus, +} from 'phosphor-react' + +export function StepOne() { + return ( + <> + SET THE GOAL + First, set a goal you want to achieve + + + Set the goal and its details + (you’ll be able to set more goals later) + + } + /> + + } + /> + } + /> + + + + + Now, add tasks that’ll make you achieve the goal. + + } + /> + } + /> + } + /> + + + Skip + + + ) +} diff --git a/src/pages/Onboarding/StepOne/styles.ts b/src/pages/Onboarding/StepOne/styles.ts new file mode 100644 index 0000000..e598df2 --- /dev/null +++ b/src/pages/Onboarding/StepOne/styles.ts @@ -0,0 +1,50 @@ +import styled from 'styled-components' + +export const SuperHeader = styled.h1` + text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 2rem; + margin-top: 2rem; +` +export const Subtitle = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + margin: 0.5rem 0rem; +` + +export const SessionLabel = styled.p` + text-align: left; + font-weight: 700; + span { + margin-left: 0.25rem; + color: ${(props) => props.theme['gray-500']}; + } +` +export const SectionWrapper = styled.p` + width: 100%; + color: ${(props) => props.theme['dark-900']}; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +` +export const DetailsWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` + +export const Skip = styled.p` + margin: 1rem 0; + text-align: center; + font-weight: 700; + :hover { + cursor: pointer; + text-decoration: underline; + color: ${(props) => props.theme['yellow-600']}; + } +` diff --git a/src/pages/Onboarding/StepThree/index.tsx b/src/pages/Onboarding/StepThree/index.tsx new file mode 100644 index 0000000..a671137 --- /dev/null +++ b/src/pages/Onboarding/StepThree/index.tsx @@ -0,0 +1,38 @@ +import { Button } from '../../../components/Button' +import { + SuperHeader, + Subtitle, + SectionWrapper, + LinksContainer, + SocialMediaItem, + StyledCheckCircle, +} from './styles' + +import { Plus, InstagramLogo } from 'phosphor-react' + +export function StepThree() { + return ( + <> + SOCIAL MEDIAS + Get Help from Chimp on Socials + +

+ ILorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris: +

+ + + + + +

Instagram

+ + + + + + + + ) +} diff --git a/src/pages/Onboarding/StepThree/styles.ts b/src/pages/Onboarding/StepThree/styles.ts new file mode 100644 index 0000000..e2d59a4 --- /dev/null +++ b/src/pages/Onboarding/StepThree/styles.ts @@ -0,0 +1,125 @@ +import { CheckCircle } from 'phosphor-react' +import styled from 'styled-components' + +export const OnboardingContainer = styled.div` + background-color: ${(props) => props.theme['gray-100']}; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` +export const Card = styled.div` + margin: 2rem 0; + min-width: 600px; + display: flex; + flex-direction: column; + padding: 2rem 4rem 4rem 4rem; + max-width: 600px; + background-color: white; + display: flex; + height: 100%; + align-items: center; + justify-content: center; + border-radius: 16px; + color: white; + border: solid 2px ${(props) => props.theme['gray-300']}; +` + +export const SuperHeader = styled.h1` + text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 2rem; + margin-top: 2rem; +` +export const Subtitle = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + margin: 0.5rem 0rem; +` + +export const SessionLabel = styled.p` + text-align: left; + font-weight: 700; + span { + margin-left: 0.25rem; + color: ${(props) => props.theme['gray-500']}; + } +` +export const SectionWrapper = styled.p` + width: 100%; + color: ${(props) => props.theme['dark-900']}; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; + margin-bottom: 2rem; +` +export const DetailsWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` + +export const Skip = styled.p` + margin: 1rem 0; + text-align: center; + font-weight: 700; + :hover { + cursor: pointer; + text-decoration: underline; + color: ${(props) => props.theme['yellow-600']}; + } +` + +export const ProgressContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; +` + +export const ProgressWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: row; + gap: 0.5rem; + margin-bottom: 0.5rem; +` +export const StepProgress = styled.div` + height: 0.35rem; + width: 100%; + border-radius: 30px; + background-color: ${(props) => props.theme['blue-500']}; +` + +export const ProgressLabel = styled.div` + color: ${(props) => props.theme['gray-500']}; + text-align: right; +` + +export const LinksContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +` +export const SocialMediaItem = styled.div` + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; + + p { + color: ${(props) => props.theme['dark-900']}; + font-size: 0.85rem; + font-weight: 700; + } +` + +export const StyledCheckCircle = styled(CheckCircle)` + color: ${(props) => props.theme['green-500']}; +` diff --git a/src/pages/Onboarding/StepTwo/index.tsx b/src/pages/Onboarding/StepTwo/index.tsx new file mode 100644 index 0000000..80bf00d --- /dev/null +++ b/src/pages/Onboarding/StepTwo/index.tsx @@ -0,0 +1,36 @@ +import { Button } from '../../../components/Button' +import { + SuperHeader, + Subtitle, + SectionWrapper, + FeatureContainer, + DiscriptionWrapper, +} from './styles' + +import { ArrowLeft } from 'phosphor-react' + +import TimerImg from '../../../../public/Timer.png' + +export function StepTwo() { + return ( + <> + HOW IT WORKS + Now that you have a goal, be consistent + + + +

#1

+

GOALS & TASK

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ fefwe + + + + + + ) +} diff --git a/src/pages/Onboarding/StepTwo/styles.ts b/src/pages/Onboarding/StepTwo/styles.ts new file mode 100644 index 0000000..0ab29ef --- /dev/null +++ b/src/pages/Onboarding/StepTwo/styles.ts @@ -0,0 +1,67 @@ +import styled from 'styled-components' + +export const SuperHeader = styled.h1` + text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 2rem; + margin-top: 2rem; +` +export const Subtitle = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['dark-900']}; + margin: 0.5rem 0rem; +` + +export const SectionWrapper = styled.p` + width: 100%; + color: ${(props) => props.theme['dark-900']}; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +` +export const FeatureContainer = styled.div` + background-color: ${(props) => props.theme['gray-100']}; + border: 1px solid ${(props) => props.theme['gray-300']}; + border-radius: 6px; + padding: 3rem; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + justify-items: center; + overflow: hidden; + + img { + border-radius: 9px; + margin-top: 2rem; + margin-bottom: -10rem; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, + rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; + } + + p { + margin-top: 0.5rem; + } +` + +export const DiscriptionWrapper = styled.div` + display: flex; + flex-direction: row; + width: 100%; + gap: 0.5rem; + + h1 { + text-transform: uppercase; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 1.25rem; + max-width: 200px; + } +` diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx new file mode 100644 index 0000000..7e74a38 --- /dev/null +++ b/src/pages/Onboarding/index.tsx @@ -0,0 +1,31 @@ +import { + OnboardingContainer, + Card, + ProgressContainer, + ProgressWrapper, + StepProgress, + ProgressLabel, +} from './styles' + +import { StepOne } from './StepOne/index' +import { StepTwo } from './StepTwo/index' +import { StepThree } from './StepThree/index' +export function Onboarding() { + return ( + + + + + + + + + 1/2 + + {/* */} + {/* */} + + + + ) +} diff --git a/src/pages/Onboarding/styles.ts b/src/pages/Onboarding/styles.ts new file mode 100644 index 0000000..c43369b --- /dev/null +++ b/src/pages/Onboarding/styles.ts @@ -0,0 +1,74 @@ +import styled from 'styled-components' + +export const OnboardingContainer = styled.div` + background-color: ${(props) => props.theme['gray-100']}; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` +export const Card = styled.div` + margin: 2rem 0; + min-width: 600px; + display: flex; + flex-direction: column; + padding: 2rem 4rem 4rem 4rem; + max-width: 600px; + background-color: white; + display: flex; + height: 100%; + align-items: center; + justify-content: center; + border-radius: 16px; + color: white; + border: solid 2px ${(props) => props.theme['gray-300']}; +` + +export const SessionLabel = styled.p` + text-align: left; + font-weight: 700; + span { + margin-left: 0.25rem; + color: ${(props) => props.theme['gray-500']}; + } +` +export const SectionWrapper = styled.p` + width: 100%; + color: ${(props) => props.theme['dark-900']}; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +` +export const DetailsWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` + +export const ProgressContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; +` + +export const ProgressWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: row; + gap: 0.5rem; + margin-bottom: 0.5rem; +` +export const StepProgress = styled.div` + height: 0.35rem; + width: 100%; + border-radius: 30px; + background-color: ${(props) => props.theme['blue-500']}; +` + +export const ProgressLabel = styled.div` + color: ${(props) => props.theme['gray-500']}; + text-align: right; +` diff --git a/src/pages/Reports/Consistency/index.tsx b/src/pages/Reports/Consistency/index.tsx index 7b70dc7..7c3aff3 100644 --- a/src/pages/Reports/Consistency/index.tsx +++ b/src/pages/Reports/Consistency/index.tsx @@ -1,15 +1,33 @@ -import { ConsistencyContainer } from './styles' +import { + YaarConsistency, + Title, + RangeLabel, + YearGrid, + DaySquare, + DataWrapper, +} from './styles' export function Consistency() { + const today = new Date() + const currentDay = today.getDate() + const isPastDay = (day: number) => day < currentDay + return ( - -
-

Consistency

- -
- + + + Consistency + Jan - Fev - Mar + + + {[...Array(90)].map((_, index) => ( + + ))} + + ) } diff --git a/src/pages/Reports/Consistency/styles.ts b/src/pages/Reports/Consistency/styles.ts index 1ecf1b9..9a40a71 100644 --- a/src/pages/Reports/Consistency/styles.ts +++ b/src/pages/Reports/Consistency/styles.ts @@ -1,26 +1,52 @@ import styled from 'styled-components' -export const ConsistencyContainer = styled.div` +export const YaarConsistency = styled.div` display: flex; flex-direction: column; - div { - display: flex; - flex-direction: row; - justify-content: space-between; + gap: 1rem; +` + +export const DataWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: end; +` +export const Title = styled.h1` + font-size: 1rem; +` + +export const RangeLabel = styled.p` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-500']}; +` - h1 { - font-size: 1rem; - color: ${(props) => props.theme['dark-900']}; - font-weight: 800; - } +export const YearGrid = styled.div` + display: grid; + grid-template-columns: repeat(25, 1fr); /* 15 columns for 75 squares */ + gap: 0.5rem; +` - select { - border-radius: 20px; - border: solid 1px ${(props) => props.theme['gray-300']}; - color: ${(props) => props.theme['gray-500']}; - padding: 0.5rem 1rem; - option { - } - } - } +export const DaySquare = styled.div<{ + past: boolean + current: boolean + intensity: number +}>` + width: 100%; + padding-top: 100%; /* 1:1 aspect ratio */ + box-sizing: content-box; + background-color: ${(props) => + props.current + ? props.theme.white + : props.past + ? props.theme['yellow-400'] + : props.theme['gray-200']}; + border-radius: 3px; /* Optional: Add rounded corners */ + border: 2px solid + ${(props) => + props.past + ? props.theme['yellow-600'] + : props.current + ? props.theme['dark-900'] + : props.theme['gray-200']}; /* Border for past days */ ` diff --git a/src/pages/Reports/index.tsx b/src/pages/Reports/index.tsx index 9dfaef2..bda2428 100644 --- a/src/pages/Reports/index.tsx +++ b/src/pages/Reports/index.tsx @@ -1,3 +1,4 @@ +import { Card } from '../../components/Card' import { Consistency } from './Consistency' import { ConsistencyChart } from './ConsistencyChart' import { ConsistencySummary } from './ConsistencySummary' @@ -7,15 +8,17 @@ import { ReportsContainer, ListsContainer } from './styles' export function Reports() { return ( - - - - - - -
- - - + + + + + + + +
+ + + + ) } diff --git a/src/pages/Home/components/ConsistencyDay/index.tsx b/src/pages/Timer/components/ConsistencyDay/index.tsx similarity index 100% rename from src/pages/Home/components/ConsistencyDay/index.tsx rename to src/pages/Timer/components/ConsistencyDay/index.tsx diff --git a/src/pages/Home/components/ConsistencyDay/styles.ts b/src/pages/Timer/components/ConsistencyDay/styles.ts similarity index 92% rename from src/pages/Home/components/ConsistencyDay/styles.ts rename to src/pages/Timer/components/ConsistencyDay/styles.ts index cdc8168..64e0bc6 100644 --- a/src/pages/Home/components/ConsistencyDay/styles.ts +++ b/src/pages/Timer/components/ConsistencyDay/styles.ts @@ -19,4 +19,5 @@ export const DayLabel = styled.h4` color: ${(props) => props.theme['gray-500']}; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; + font-size: 1rem; ` diff --git a/src/pages/Home/components/ConsistencyOfTheWeek/index.tsx b/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx similarity index 100% rename from src/pages/Home/components/ConsistencyOfTheWeek/index.tsx rename to src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx diff --git a/src/pages/Home/components/ConsistencyOfTheWeek/styles.ts b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts similarity index 90% rename from src/pages/Home/components/ConsistencyOfTheWeek/styles.ts rename to src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts index 1c3592e..316ab62 100644 --- a/src/pages/Home/components/ConsistencyOfTheWeek/styles.ts +++ b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts @@ -18,7 +18,7 @@ export const LabelRow = styled.div` ` export const WeekContainer = styled.div` - margin-top: 1.5rem; + margin-top: 1rem; width: 100%; display: flex; justify-content: space-between; diff --git a/src/pages/Home/components/Countdown/index.tsx b/src/pages/Timer/components/Countdown/index.tsx similarity index 100% rename from src/pages/Home/components/Countdown/index.tsx rename to src/pages/Timer/components/Countdown/index.tsx diff --git a/src/pages/Home/components/Countdown/styles.ts b/src/pages/Timer/components/Countdown/styles.ts similarity index 88% rename from src/pages/Home/components/Countdown/styles.ts rename to src/pages/Timer/components/Countdown/styles.ts index e990ed1..1cc8262 100644 --- a/src/pages/Home/components/Countdown/styles.ts +++ b/src/pages/Timer/components/Countdown/styles.ts @@ -5,7 +5,8 @@ export const CountdownContainer = styled.div` line-height: 8rem; color: ${(props) => props.theme['gray-100']}; display: flex; - gap: 1rem; + justify-content: space-between; + gap: 0.5rem; span { font-family: 'Roboto Mono', monospace; diff --git a/src/pages/Home/components/NewCycleForm/index.tsx b/src/pages/Timer/components/NewCycleForm/index.tsx similarity index 100% rename from src/pages/Home/components/NewCycleForm/index.tsx rename to src/pages/Timer/components/NewCycleForm/index.tsx diff --git a/src/pages/Home/components/NewCycleForm/styles.ts b/src/pages/Timer/components/NewCycleForm/styles.ts similarity index 100% rename from src/pages/Home/components/NewCycleForm/styles.ts rename to src/pages/Timer/components/NewCycleForm/styles.ts diff --git a/src/pages/Home/components/ProgressOfTheDay/index.tsx b/src/pages/Timer/components/ProgressOfTheDay/index.tsx similarity index 100% rename from src/pages/Home/components/ProgressOfTheDay/index.tsx rename to src/pages/Timer/components/ProgressOfTheDay/index.tsx diff --git a/src/pages/Home/components/ProgressOfTheDay/styles.ts b/src/pages/Timer/components/ProgressOfTheDay/styles.ts similarity index 100% rename from src/pages/Home/components/ProgressOfTheDay/styles.ts rename to src/pages/Timer/components/ProgressOfTheDay/styles.ts diff --git a/src/pages/Home/index.tsx b/src/pages/Timer/index.tsx similarity index 61% rename from src/pages/Home/index.tsx rename to src/pages/Timer/index.tsx index fce8db0..5928421 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Timer/index.tsx @@ -1,19 +1,16 @@ -import { HandPalm } from 'phosphor-react' import { FormProvider, useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import * as zod from 'zod' import { useContext } from 'react' -import { - HomeContainer, - StartCountdownButton, - StopCountdownButton, -} from './styles' +import { HomeContainer, TimerContainer } from './styles' // import { NewCycleForm } from './components/NewCycleForm' import { Countdown } from './components/Countdown' import { CyclesContext } from '../../contexts/CyclesContext' import { ProgressOfTheDay } from './components/ProgressOfTheDay/index' import { ConsistencyOfTheWeek } from './components/ConsistencyOfTheWeek/index' +import { Card } from '../../components/Card' +import { Button } from '../../components/Button' const newCycleFormValidationSchema = zod.object({ task: zod.string().min(1, 'Write the task'), @@ -25,7 +22,7 @@ const newCycleFormValidationSchema = zod.object({ type NewCycleFormData = zod.infer -export function Home() { +export function Timer() { const { activeCycle, createNewCycle, interruptCurrentCycle } = useContext(CyclesContext) @@ -48,26 +45,27 @@ export function Home() { const isSubmitDisabled = !task return ( - -
- {/* */} + +
-

Click the button to choose a task to work on

- - {activeCycle ? ( - - - Interrupt - - ) : ( - - Start a New Task - - )} - - + +

Click the button to choose a task to work on

+
+ + {/* */} + + + {activeCycle ? ( + + ) : ( + + )} + +
+
+ ) } diff --git a/src/pages/Home/styles.ts b/src/pages/Timer/styles.ts similarity index 84% rename from src/pages/Home/styles.ts rename to src/pages/Timer/styles.ts index 1564fef..6a18fbf 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Timer/styles.ts @@ -1,20 +1,9 @@ import styled, { keyframes } from 'styled-components' export const HomeContainer = styled.main` - flex: 1; - height: 100%; - position: relative; display: flex; flex-direction: column; - align-items: center; - justify-content: center; - form { - display: flex; - flex-direction: column; - align-items: center; - gap: 3.5rem; - } - + gap: 2rem; p { font-weight: 600; color: ${(props) => props.theme['gray-500']}; @@ -85,3 +74,13 @@ export const Mascot = styled.img` //animation-name: ${fadeInUp}; //animation-duration: 0.8s; ` +export const TimerContainer = styled.div` + text-align: center; + display: flex; + flex-direction: column; + gap: 2rem; + + button { + margin-top: 2rem; + } +` diff --git a/src/pages/Welcome/index.tsx b/src/pages/Welcome/index.tsx new file mode 100644 index 0000000..f3df221 --- /dev/null +++ b/src/pages/Welcome/index.tsx @@ -0,0 +1,24 @@ +import { Button } from './../../components/Button/index' +import { + ConfirmationContainer, + SuperHeader, + Subtitle, + CallToActionContainer, + StyledCheckCircle, +} from './styles' + +export function Welcome() { + return ( + <> + + WE ARE READY TO GO! + Your e-mail was confirmed +

Set this date because thats when your life will change

+ + + + + + + ) +} diff --git a/src/pages/Welcome/styles.ts b/src/pages/Welcome/styles.ts new file mode 100644 index 0000000..22e38ea --- /dev/null +++ b/src/pages/Welcome/styles.ts @@ -0,0 +1,49 @@ +import styled from 'styled-components' +import { CheckCircle } from 'phosphor-react' + +export const ConfirmationContainer = styled.div` + width: 100%; + height: 80vh; + display: flex; + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + p { + color: ${(props) => props.theme['gray-700']}; + font-size: 1rem; + } +` + +export const SuperHeader = styled.h1` + text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 2.5rem; +` +export const Subtitle = styled.h3` + color: ${(props) => props.theme['dark-900']}; + margin: 1rem 0rem; +` + +export const CallToActionContainer = styled.div` + height: 20rem; + position: absolute; + bottom: 0; + width: 36rem; + bottom: 0px; + justify-self: end; + display: flex; + flex-direction: column; + justify-content: end; + border-radius: 12px 12px 0px 0px; + padding: 2rem 2rem 2rem 2rem; + background-color: ${(props) => props.theme['yellow-500']}; +` + +export const StyledCheckCircle = styled(CheckCircle)` + color: ${(props) => props.theme['green-500']}; +` From af5d6209b9d27648147597252542686acf70a6dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Sat, 23 Dec 2023 12:28:52 -0300 Subject: [PATCH 04/13] consistency sttings --- package-lock.json | 1307 ++++++++++++----- package.json | 1 + src/components/Input/index.tsx | 24 +- src/components/Input/styles.ts | 19 +- src/pages/Reports/Consistency/styles.ts | 5 +- src/pages/Reports/ConsistencyChart/index.tsx | 89 +- src/pages/Reports/ConsistencyChart/styles.ts | 10 + .../Reports/ConsistencySummary/index.tsx | 32 +- src/pages/Reports/GoalRanking/index.tsx | 53 +- src/pages/Reports/GoalRanking/styles.ts | 6 +- src/pages/Reports/TaskHistory/index.tsx | 6 +- src/pages/Reports/TaskHistory/styles.ts | 8 +- src/pages/Reports/styles.ts | 8 +- .../components/ConsistencyOfTheWeek/index.tsx | 76 +- .../components/ConsistencyOfTheWeek/styles.ts | 47 +- ...s.timestamp-1703206039210-db2a000b83f3.mjs | 10 + ....timestamp-1703256149004-4dd79d249e32d.mjs | 10 + ....timestamp-1703283121825-33c71e4d5fc93.mjs | 10 + 18 files changed, 1266 insertions(+), 455 deletions(-) create mode 100644 vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs create mode 100644 vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs create mode 100644 vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs diff --git a/package-lock.json b/package-lock.json index 0ce2bb0..6236b9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.43.5", "react-router-dom": "^6.9.0", + "recharts": "^2.10.3", "styled-components": "^5.3.8", "zod": "^3.21.4" }, @@ -45,11 +46,11 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", - "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", "dependencies": { - "@babel/highlight": "^7.22.10", + "@babel/highlight": "^7.23.4", "chalk": "^2.4.2" }, "engines": { @@ -102,11 +103,11 @@ } }, "node_modules/@babel/generator": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz", - "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", "dependencies": { - "@babel/types": "^7.22.10", + "@babel/types": "^7.23.6", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -163,20 +164,20 @@ } }, "node_modules/@babel/helper-environment-visitor": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", - "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-function-name": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", - "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dependencies": { - "@babel/template": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" }, "engines": { "node": ">=6.9.0" @@ -254,17 +255,17 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "engines": { "node": ">=6.9.0" } @@ -291,11 +292,11 @@ } }, "node_modules/@babel/highlight": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz", - "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", "dependencies": { - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", "js-tokens": "^4.0.0" }, @@ -304,9 +305,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", - "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", + "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", "bin": { "parser": "bin/babel-parser.js" }, @@ -348,7 +349,6 @@ "version": "7.21.0", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -357,32 +357,32 @@ } }, "node_modules/@babel/template": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", - "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", "dependencies": { - "@babel/code-frame": "^7.22.5", - "@babel/parser": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz", - "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==", - "dependencies": { - "@babel/code-frame": "^7.22.10", - "@babel/generator": "^7.22.10", - "@babel/helper-environment-visitor": "^7.22.5", - "@babel/helper-function-name": "^7.22.5", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz", + "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==", + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.6", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.10", - "@babel/types": "^7.22.10", - "debug": "^4.1.0", + "@babel/parser": "^7.23.6", + "@babel/types": "^7.23.6", + "debug": "^4.3.1", "globals": "^11.1.0" }, "engines": { @@ -390,12 +390,12 @@ } }, "node_modules/@babel/types": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz", - "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", "dependencies": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { @@ -426,9 +426,9 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "node_modules/@esbuild/android-arm": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz", - "integrity": "sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", "cpu": [ "arm" ], @@ -442,9 +442,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz", - "integrity": "sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", "cpu": [ "arm64" ], @@ -458,9 +458,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.17.tgz", - "integrity": "sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", "cpu": [ "x64" ], @@ -474,9 +474,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz", - "integrity": "sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", "cpu": [ "arm64" ], @@ -490,9 +490,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz", - "integrity": "sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", "cpu": [ "x64" ], @@ -506,9 +506,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz", - "integrity": "sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", "cpu": [ "arm64" ], @@ -522,9 +522,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz", - "integrity": "sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", "cpu": [ "x64" ], @@ -538,9 +538,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz", - "integrity": "sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", "cpu": [ "arm" ], @@ -554,9 +554,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz", - "integrity": "sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", "cpu": [ "arm64" ], @@ -570,9 +570,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz", - "integrity": "sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", "cpu": [ "ia32" ], @@ -586,9 +586,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz", - "integrity": "sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", "cpu": [ "loong64" ], @@ -602,9 +602,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz", - "integrity": "sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", "cpu": [ "mips64el" ], @@ -618,9 +618,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz", - "integrity": "sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", "cpu": [ "ppc64" ], @@ -634,9 +634,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz", - "integrity": "sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", "cpu": [ "riscv64" ], @@ -650,9 +650,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz", - "integrity": "sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", "cpu": [ "s390x" ], @@ -666,9 +666,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz", - "integrity": "sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", "cpu": [ "x64" ], @@ -682,9 +682,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz", - "integrity": "sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", "cpu": [ "x64" ], @@ -698,9 +698,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz", - "integrity": "sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", "cpu": [ "x64" ], @@ -714,9 +714,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz", - "integrity": "sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", "cpu": [ "x64" ], @@ -730,9 +730,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz", - "integrity": "sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", "cpu": [ "arm64" ], @@ -746,9 +746,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz", - "integrity": "sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", "cpu": [ "ia32" ], @@ -762,9 +762,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz", - "integrity": "sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", "cpu": [ "x64" ], @@ -1717,6 +1717,60 @@ } } }, + "node_modules/@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==" + }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" + }, + "node_modules/@types/d3-ease": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", + "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.2.tgz", + "integrity": "sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz", + "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==" + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -2365,6 +2419,14 @@ "node": ">=12" } }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2427,6 +2489,116 @@ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "dev": true }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "engines": { + "node": ">=12" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -2461,6 +2633,11 @@ } } }, + "node_modules/decimal.js-light": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", + "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==" + }, "node_modules/deep-equal": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz", @@ -2535,6 +2712,14 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "dependencies": { + "@babel/runtime": "^7.1.2" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.499", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz", @@ -2655,9 +2840,9 @@ } }, "node_modules/esbuild": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz", - "integrity": "sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", "dev": true, "hasInstallScript": true, "bin": { @@ -2667,28 +2852,28 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/android-arm": "0.16.17", - "@esbuild/android-arm64": "0.16.17", - "@esbuild/android-x64": "0.16.17", - "@esbuild/darwin-arm64": "0.16.17", - "@esbuild/darwin-x64": "0.16.17", - "@esbuild/freebsd-arm64": "0.16.17", - "@esbuild/freebsd-x64": "0.16.17", - "@esbuild/linux-arm": "0.16.17", - "@esbuild/linux-arm64": "0.16.17", - "@esbuild/linux-ia32": "0.16.17", - "@esbuild/linux-loong64": "0.16.17", - "@esbuild/linux-mips64el": "0.16.17", - "@esbuild/linux-ppc64": "0.16.17", - "@esbuild/linux-riscv64": "0.16.17", - "@esbuild/linux-s390x": "0.16.17", - "@esbuild/linux-x64": "0.16.17", - "@esbuild/netbsd-x64": "0.16.17", - "@esbuild/openbsd-x64": "0.16.17", - "@esbuild/sunos-x64": "0.16.17", - "@esbuild/win32-arm64": "0.16.17", - "@esbuild/win32-ia32": "0.16.17", - "@esbuild/win32-x64": "0.16.17" + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" } }, "node_modules/escalade": { @@ -2942,9 +3127,9 @@ } }, "node_modules/eslint-plugin-import/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true, "bin": { "semver": "bin/semver.js" @@ -2981,9 +3166,9 @@ } }, "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true, "bin": { "semver": "bin/semver.js" @@ -3118,9 +3303,9 @@ } }, "node_modules/eslint-plugin-react/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true, "bin": { "semver": "bin/semver.js" @@ -3353,6 +3538,11 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -3365,6 +3555,14 @@ "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", "dev": true }, + "node_modules/fast-equals": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz", + "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -3533,9 +3731,9 @@ "dev": true }, "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, "hasInstallScript": true, "optional": true, @@ -3894,6 +4092,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -4424,10 +4630,16 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -4475,7 +4687,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4731,9 +4942,9 @@ } }, "node_modules/postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", + "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", "dev": true, "funding": [ { @@ -4743,10 +4954,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -4799,7 +5014,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4809,8 +5023,7 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/protobufjs": { "version": "7.2.5", @@ -4913,6 +5126,11 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "peer": true }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -4952,11 +5170,75 @@ "react-dom": ">=16.8" } }, + "node_modules/react-smooth": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.5.tgz", + "integrity": "sha512-BMP2Ad42tD60h0JW6BFaib+RJuV5dsXJK9Baxiv/HlNFjvRLqA9xrNKxVWnUIZPQfzUwGXIlU/dSYLU+54YGQA==", + "dependencies": { + "fast-equals": "^5.0.0", + "react-transition-group": "2.9.0" + }, + "peerDependencies": { + "prop-types": "^15.6.0", + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "dependencies": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0", + "react-dom": ">=15.0.0" + } + }, + "node_modules/recharts": { + "version": "2.10.3", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.10.3.tgz", + "integrity": "sha512-G4J96fKTZdfFQd6aQnZjo2nVNdXhp+uuLb00+cBTGLo85pChvm1+E67K3wBOHDE/77spcYb2Cy9gYWVqiZvQCg==", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-smooth": "^2.0.5", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "prop-types": "^15.6.0", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "dependencies": { + "decimal.js-light": "^2.4.1" + } + }, + "node_modules/recharts/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", - "dev": true + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/regexp.prototype.flags": { "version": "1.4.3", @@ -5047,9 +5329,9 @@ } }, "node_modules/rollup": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.19.1.tgz", - "integrity": "sha512-lAbrdN7neYCg/8WaoWn/ckzCtz+jr70GFfYdlf50OF7387HTg+wiuiqJRFYawwSPpqfqDNYqK7smY/ks2iAudg==", + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -5127,9 +5409,9 @@ } }, "node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -5401,6 +5683,11 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -5575,16 +5862,36 @@ "punycode": "^2.1.0" } }, + "node_modules/victory-vendor": { + "version": "36.7.0", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.7.0.tgz", + "integrity": "sha512-nqYuTkLSdTTeACyXcCLbL7rl0y6jpzLPtTNGOtSnajdR+xxMxBdjMxDjfNJNlhR+ZU8vbXz+QejntcbY7h9/ZA==", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/vite": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz", - "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "dev": true, "dependencies": { - "esbuild": "^0.16.14", - "postcss": "^8.4.21", - "resolve": "^1.22.1", - "rollup": "^3.10.0" + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" }, "bin": { "vite": "bin/vite.js" @@ -5592,12 +5899,16 @@ "engines": { "node": "^14.18.0 || >=16.0.0" }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@types/node": ">= 14", "less": "*", + "lightningcss": "^1.21.0", "sass": "*", "stylus": "*", "sugarss": "*", @@ -5610,6 +5921,9 @@ "less": { "optional": true }, + "lightningcss": { + "optional": true + }, "sass": { "optional": true }, @@ -5726,9 +6040,9 @@ } }, "node_modules/word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -5837,9 +6151,9 @@ } }, "node_modules/zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -5856,11 +6170,11 @@ } }, "@babel/code-frame": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", - "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", "requires": { - "@babel/highlight": "^7.22.10", + "@babel/highlight": "^7.23.4", "chalk": "^2.4.2" } }, @@ -5899,11 +6213,11 @@ } }, "@babel/generator": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz", - "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", "requires": { - "@babel/types": "^7.22.10", + "@babel/types": "^7.23.6", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -5949,17 +6263,17 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", - "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==" + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==" }, "@babel/helper-function-name": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", - "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "requires": { - "@babel/template": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" } }, "@babel/helper-hoist-variables": { @@ -6013,14 +6327,14 @@ } }, "@babel/helper-string-parser": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==" + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==" }, "@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==" + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==" }, "@babel/helper-validator-option": { "version": "7.22.5", @@ -6038,19 +6352,19 @@ } }, "@babel/highlight": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz", - "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", "requires": { - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", "js-tokens": "^4.0.0" } }, "@babel/parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", - "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==" + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", + "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==" }, "@babel/plugin-transform-react-jsx-self": { "version": "7.21.0", @@ -6074,45 +6388,44 @@ "version": "7.21.0", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.11" } }, "@babel/template": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", - "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", "requires": { - "@babel/code-frame": "^7.22.5", - "@babel/parser": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" } }, "@babel/traverse": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz", - "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==", - "requires": { - "@babel/code-frame": "^7.22.10", - "@babel/generator": "^7.22.10", - "@babel/helper-environment-visitor": "^7.22.5", - "@babel/helper-function-name": "^7.22.5", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz", + "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==", + "requires": { + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.6", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.10", - "@babel/types": "^7.22.10", - "debug": "^4.1.0", + "@babel/parser": "^7.23.6", + "@babel/types": "^7.23.6", + "debug": "^4.3.1", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz", - "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", "requires": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" } }, @@ -6140,156 +6453,156 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@esbuild/android-arm": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz", - "integrity": "sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", "dev": true, "optional": true }, "@esbuild/android-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz", - "integrity": "sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", "dev": true, "optional": true }, "@esbuild/android-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.17.tgz", - "integrity": "sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", "dev": true, "optional": true }, "@esbuild/darwin-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz", - "integrity": "sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", "dev": true, "optional": true }, "@esbuild/darwin-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz", - "integrity": "sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", "dev": true, "optional": true }, "@esbuild/freebsd-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz", - "integrity": "sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", "dev": true, "optional": true }, "@esbuild/freebsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz", - "integrity": "sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", "dev": true, "optional": true }, "@esbuild/linux-arm": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz", - "integrity": "sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", "dev": true, "optional": true }, "@esbuild/linux-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz", - "integrity": "sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", "dev": true, "optional": true }, "@esbuild/linux-ia32": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz", - "integrity": "sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", "dev": true, "optional": true }, "@esbuild/linux-loong64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz", - "integrity": "sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", "dev": true, "optional": true }, "@esbuild/linux-mips64el": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz", - "integrity": "sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", "dev": true, "optional": true }, "@esbuild/linux-ppc64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz", - "integrity": "sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", "dev": true, "optional": true }, "@esbuild/linux-riscv64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz", - "integrity": "sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", "dev": true, "optional": true }, "@esbuild/linux-s390x": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz", - "integrity": "sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", "dev": true, "optional": true }, "@esbuild/linux-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz", - "integrity": "sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", "dev": true, "optional": true }, "@esbuild/netbsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz", - "integrity": "sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", "dev": true, "optional": true }, "@esbuild/openbsd-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz", - "integrity": "sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", "dev": true, "optional": true }, "@esbuild/sunos-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz", - "integrity": "sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", "dev": true, "optional": true }, "@esbuild/win32-arm64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz", - "integrity": "sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", "dev": true, "optional": true }, "@esbuild/win32-ia32": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz", - "integrity": "sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", "dev": true, "optional": true }, "@esbuild/win32-x64": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz", - "integrity": "sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==", + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", "dev": true, "optional": true }, @@ -7134,6 +7447,60 @@ "prettier": "^2.6.2" } }, + "@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==" + }, + "@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" + }, + "@types/d3-ease": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", + "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==" + }, + "@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "requires": { + "@types/d3-color": "*" + } + }, + "@types/d3-path": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.2.tgz", + "integrity": "sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==" + }, + "@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "requires": { + "@types/d3-time": "*" + } + }, + "@types/d3-shape": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz", + "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==", + "requires": { + "@types/d3-path": "*" + } + }, + "@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==" + }, + "@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==" + }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -7581,6 +7948,11 @@ "wrap-ansi": "^7.0.0" } }, + "clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -7637,6 +8009,83 @@ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "dev": true }, + "d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "requires": { + "internmap": "1 - 2" + } + }, + "d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==" + }, + "d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==" + }, + "d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==" + }, + "d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "requires": { + "d3-color": "1 - 3" + } + }, + "d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==" + }, + "d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "requires": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + } + }, + "d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "requires": { + "d3-path": "^3.1.0" + } + }, + "d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "requires": { + "d3-array": "2 - 3" + } + }, + "d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "requires": { + "d3-time": "1 - 3" + } + }, + "d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -7656,6 +8105,11 @@ "ms": "2.1.2" } }, + "decimal.js-light": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", + "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==" + }, "deep-equal": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz", @@ -7715,6 +8169,14 @@ "esutils": "^2.0.2" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "electron-to-chromium": { "version": "1.4.499", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz", @@ -7817,33 +8279,33 @@ } }, "esbuild": { - "version": "0.16.17", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz", - "integrity": "sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==", - "dev": true, - "requires": { - "@esbuild/android-arm": "0.16.17", - "@esbuild/android-arm64": "0.16.17", - "@esbuild/android-x64": "0.16.17", - "@esbuild/darwin-arm64": "0.16.17", - "@esbuild/darwin-x64": "0.16.17", - "@esbuild/freebsd-arm64": "0.16.17", - "@esbuild/freebsd-x64": "0.16.17", - "@esbuild/linux-arm": "0.16.17", - "@esbuild/linux-arm64": "0.16.17", - "@esbuild/linux-ia32": "0.16.17", - "@esbuild/linux-loong64": "0.16.17", - "@esbuild/linux-mips64el": "0.16.17", - "@esbuild/linux-ppc64": "0.16.17", - "@esbuild/linux-riscv64": "0.16.17", - "@esbuild/linux-s390x": "0.16.17", - "@esbuild/linux-x64": "0.16.17", - "@esbuild/netbsd-x64": "0.16.17", - "@esbuild/openbsd-x64": "0.16.17", - "@esbuild/sunos-x64": "0.16.17", - "@esbuild/win32-arm64": "0.16.17", - "@esbuild/win32-ia32": "0.16.17", - "@esbuild/win32-x64": "0.16.17" + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "dev": true, + "requires": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" } }, "escalade": { @@ -8105,9 +8567,9 @@ } }, "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true } } @@ -8137,9 +8599,9 @@ }, "dependencies": { "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true } } @@ -8220,9 +8682,9 @@ } }, "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true } } @@ -8316,6 +8778,11 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true }, + "eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -8328,6 +8795,11 @@ "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", "dev": true }, + "fast-equals": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz", + "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==" + }, "fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -8474,9 +8946,9 @@ "dev": true }, "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, "optional": true }, @@ -8730,6 +9202,11 @@ "side-channel": "^1.0.4" } }, + "internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" + }, "is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -9109,9 +9586,9 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "dev": true }, "natural-compare": { @@ -9142,8 +9619,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-inspect": { "version": "1.12.3", @@ -9319,12 +9795,12 @@ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, "postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", + "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", "dev": true, "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -9359,7 +9835,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -9369,8 +9844,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -9441,6 +9915,11 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "peer": true }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -9464,11 +9943,60 @@ "react-router": "6.9.0" } }, + "react-smooth": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.5.tgz", + "integrity": "sha512-BMP2Ad42tD60h0JW6BFaib+RJuV5dsXJK9Baxiv/HlNFjvRLqA9xrNKxVWnUIZPQfzUwGXIlU/dSYLU+54YGQA==", + "requires": { + "fast-equals": "^5.0.0", + "react-transition-group": "2.9.0" + } + }, + "react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "requires": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + }, + "recharts": { + "version": "2.10.3", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.10.3.tgz", + "integrity": "sha512-G4J96fKTZdfFQd6aQnZjo2nVNdXhp+uuLb00+cBTGLo85pChvm1+E67K3wBOHDE/77spcYb2Cy9gYWVqiZvQCg==", + "requires": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-smooth": "^2.0.5", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, + "recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "requires": { + "decimal.js-light": "^2.4.1" + } + }, "regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", - "dev": true + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "regexp.prototype.flags": { "version": "1.4.3", @@ -9525,9 +10053,9 @@ } }, "rollup": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.19.1.tgz", - "integrity": "sha512-lAbrdN7neYCg/8WaoWn/ckzCtz+jr70GFfYdlf50OF7387HTg+wiuiqJRFYawwSPpqfqDNYqK7smY/ks2iAudg==", + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -9567,9 +10095,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -9767,6 +10295,11 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -9886,17 +10419,37 @@ "punycode": "^2.1.0" } }, + "victory-vendor": { + "version": "36.7.0", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.7.0.tgz", + "integrity": "sha512-nqYuTkLSdTTeACyXcCLbL7rl0y6jpzLPtTNGOtSnajdR+xxMxBdjMxDjfNJNlhR+ZU8vbXz+QejntcbY7h9/ZA==", + "requires": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "vite": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz", - "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "dev": true, "requires": { - "esbuild": "^0.16.14", + "esbuild": "^0.18.10", "fsevents": "~2.3.2", - "postcss": "^8.4.21", - "resolve": "^1.22.1", - "rollup": "^3.10.0" + "postcss": "^8.4.27", + "rollup": "^3.27.1" } }, "webidl-conversions": { @@ -9977,9 +10530,9 @@ } }, "word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "dev": true }, "wrap-ansi": { @@ -10057,9 +10610,9 @@ "dev": true }, "zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==" + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==" } } } diff --git a/package.json b/package.json index c851b32..2c1f9ad 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.43.5", "react-router-dom": "^6.9.0", + "recharts": "^2.10.3", "styled-components": "^5.3.8", "zod": "^3.21.4" }, diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index c7ffe39..ea74ec5 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -1,16 +1,33 @@ -import { InputWrapper, StyledInput, IconWrapper, ErrorMessage } from './styles' +import { + InputWrapper, + StyledInput, + IconWrapper, + ErrorMessage, + StyledValidatorIcon, +} from './styles' import { InputHTMLAttributes, ReactNode } from 'react' +import { CheckCircle, XCircle } from 'phosphor-react' interface InputProps extends InputHTMLAttributes { placeholder: string icon?: ReactNode errorMessage?: string + validator: true +} + +const getValidatorIcon = (validator: boolean) => { + return validator ? ( + + ) : ( + + ) } export function Input({ placeholder, icon, errorMessage, + validator, ...props }: InputProps) { return ( @@ -18,6 +35,11 @@ export function Input({ {icon && {icon}} {errorMessage && {errorMessage}} + { + + {getValidatorIcon(validator)} + + } ) } diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index fffc5bf..3c22940 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -16,10 +16,6 @@ export const StyledInput = styled.input` box-sizing: border-box; transition: border 0.3s ease; /* Add transition for border property */ font-weight: 600; - /* border: ${(props) => - props.hasError - ? `2px solid ${props.theme['gray-300']}` - : `2px solid ${props.theme['red-300']}`}; */ &:focus, &:focus-within { @@ -55,3 +51,18 @@ export const ErrorMessage = styled.div` font-weight: 600; transition: color 0.3s ease; /* Add transition for color property */ ` + +export const StyledValidatorIcon = styled.div<{ validator: boolean }>` + position: absolute; + top: 50%; + right: 1rem; + transform: translateY(-50%); + color: ${(props) => + props.validator ? props.theme['gray-500'] : props.theme['red-500']}; + transition: color 0.3s ease; + + ${InputWrapper}:focus-within & { + color: ${(props) => + props.validator ? props.theme['green-500'] : props.theme['red-500']}; + } +` diff --git a/src/pages/Reports/Consistency/styles.ts b/src/pages/Reports/Consistency/styles.ts index 9a40a71..1db20bc 100644 --- a/src/pages/Reports/Consistency/styles.ts +++ b/src/pages/Reports/Consistency/styles.ts @@ -23,8 +23,9 @@ export const RangeLabel = styled.p` export const YearGrid = styled.div` display: grid; - grid-template-columns: repeat(25, 1fr); /* 15 columns for 75 squares */ - gap: 0.5rem; + grid-template-columns: repeat(30, 1fr); /* 15 columns for 75 squares */ + column-gap: 0.5rem; /* Horizontal gap */ + row-gap: 0.3rem; /* Vertical gap */ ` export const DaySquare = styled.div<{ diff --git a/src/pages/Reports/ConsistencyChart/index.tsx b/src/pages/Reports/ConsistencyChart/index.tsx index 5ee0c5d..e2acd59 100644 --- a/src/pages/Reports/ConsistencyChart/index.tsx +++ b/src/pages/Reports/ConsistencyChart/index.tsx @@ -1,9 +1,90 @@ -import {} from './styles' +import { Title, ChartSectionContainer } from './styles' +import { BarChart, Bar, Tooltip, XAxis, ResponsiveContainer } from 'recharts' +interface CustomTooltipProps { + active?: boolean + payload?: Array<{ + payload: { hoursSpent: number; expectedHoursSpent: number } + }> + label?: string +} + +const data = [ + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 3, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 4, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 1, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 1, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 5, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 5, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 3, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 5, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 5, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 5, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 3, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 7, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 0, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 1, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 2, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 1, expectedHoursSpent: 8 }, + { day: 'Day 1', hoursSpent: 1, expectedHoursSpent: 8 }, +] +const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => { + if (active && payload && payload.length) { + // Extract data from the payload + const { hoursSpent, expectedHoursSpent } = payload[0].payload + + // Customize the tooltip content + return ( +
+

{`Day: ${label}`}

+

{`Hours Spent: ${hoursSpent}`}

+

{`Expected Hours: ${expectedHoursSpent}`}

+
+ ) + } + + return null +} export function ConsistencyChart() { return ( - <> -

Consistency

- + + + + + } /> + + + + ) } diff --git a/src/pages/Reports/ConsistencyChart/styles.ts b/src/pages/Reports/ConsistencyChart/styles.ts index 6cd14e9..c9e35b4 100644 --- a/src/pages/Reports/ConsistencyChart/styles.ts +++ b/src/pages/Reports/ConsistencyChart/styles.ts @@ -4,3 +4,13 @@ export const ReportsContainer = styled.div` display: flex; flex-direction: column; ` + +export const Title = styled.h1` + font-size: 1rem; +` + +export const ChartSectionContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +` diff --git a/src/pages/Reports/ConsistencySummary/index.tsx b/src/pages/Reports/ConsistencySummary/index.tsx index cef38be..f0bb6fb 100644 --- a/src/pages/Reports/ConsistencySummary/index.tsx +++ b/src/pages/Reports/ConsistencySummary/index.tsx @@ -2,19 +2,23 @@ import { ConsitencySummaryContainer } from './styles' export function ConsistencySummary() { return ( - -
-

Best Strike

-

5 consecutive days

-
-
-

Best of Week

-

10 tasks on Tuesday

-
-
-

Best Strike

-

5 consecutive days

-
- + <> +
+ +
+

Best Strike

+

5 consecutive days

+
+
+

Best of Week

+

10 tasks on Tuesday

+
+
+

Best Strike

+

5 consecutive days

+
+ +
+ ) } diff --git a/src/pages/Reports/GoalRanking/index.tsx b/src/pages/Reports/GoalRanking/index.tsx index ce09a1a..a929f88 100644 --- a/src/pages/Reports/GoalRanking/index.tsx +++ b/src/pages/Reports/GoalRanking/index.tsx @@ -6,7 +6,7 @@ import { LabelsContainer, SessionTitle, ListContainer, - RankingNumber + RankingNumber, } from './styles' export function GoalRanking() { @@ -26,6 +26,57 @@ export function GoalRanking() { + + + #1 + + +

Learn English

+

12 days left

+ + +
+ + + + + + #1 + + +

Learn English

+

12 days left

+ + +
+ + + + + + #2 + + +

Learn English

+

12 days left

+ + +
+ + + + + #3 + + +

Learn English

+

12 days left

+ + +
+ + + ) diff --git a/src/pages/Reports/GoalRanking/styles.ts b/src/pages/Reports/GoalRanking/styles.ts index 3931d23..00b1bbf 100644 --- a/src/pages/Reports/GoalRanking/styles.ts +++ b/src/pages/Reports/GoalRanking/styles.ts @@ -38,12 +38,12 @@ export const LabelsContainer = styled.div` p { line-height: 180%; text-align: right; - font-size: 0.85rem; + font-size: 0.75rem; color: ${(props) => props.theme['gray-500']}; font-weight: 700; } h1 { - font-size: 1rem; + font-size: 0.85rem; color: ${(props) => props.theme['gray-700']}; font-weight: 800; } @@ -55,7 +55,7 @@ export const ListContainer = styled.div` ` export const ProgressBar = styled.div` - height: 0.65rem; + height: 0.5rem; background-color: ${(props) => props.theme['gray-200']}; border-radius: 9px; diff --git a/src/pages/Reports/TaskHistory/index.tsx b/src/pages/Reports/TaskHistory/index.tsx index d9dd1e8..f2b35d8 100644 --- a/src/pages/Reports/TaskHistory/index.tsx +++ b/src/pages/Reports/TaskHistory/index.tsx @@ -2,9 +2,9 @@ import { TaskHistoryContainer, IconContainer, TaskDataContainer, - TaskContainer + TaskContainer, + StyledCheckCircle, } from './styles' -import { CheckCircle } from 'phosphor-react' export function TaskHistory() { return ( @@ -12,7 +12,7 @@ export function TaskHistory() {

Task History

- + 20 min ago diff --git a/src/pages/Reports/TaskHistory/styles.ts b/src/pages/Reports/TaskHistory/styles.ts index 31c0c01..fcc66a8 100644 --- a/src/pages/Reports/TaskHistory/styles.ts +++ b/src/pages/Reports/TaskHistory/styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components' +import { CheckCircle } from 'phosphor-react' export const TaskHistoryContainer = styled.div` display: flex; @@ -14,7 +15,7 @@ export const TaskHistoryContainer = styled.div` span { line-height: 180%; - font-size: 0.85rem; + font-size: 0.7rem; color: ${(props) => props.theme['gray-500']}; font-weight: 700; } @@ -30,7 +31,7 @@ export const TaskContainer = styled.div` gap: 1rem; h1 { - font-size: 1rem; + font-size: 0.85rem; color: ${(props) => props.theme['gray-700']}; font-weight: 800; } @@ -41,3 +42,6 @@ export const TaskDataContainer = styled.div` flex-direction: column; flex-grow: 1; ` +export const StyledCheckCircle = styled(CheckCircle)` + color: ${(props) => props.theme['green-500']}; +` diff --git a/src/pages/Reports/styles.ts b/src/pages/Reports/styles.ts index fae641e..b3ca9c5 100644 --- a/src/pages/Reports/styles.ts +++ b/src/pages/Reports/styles.ts @@ -3,13 +3,17 @@ import styled from 'styled-components' export const ReportsContainer = styled.div` display: flex; flex-direction: column; - gap: 2.5rem; + gap: 2rem; + + hr { + border: 0.5px solid ${(props) => props.theme['gray-150']}; + } ` export const ListsContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; - gap: 1rem; + gap: 2rem; // *:not(hr) { // flex-grow: 1; // } diff --git a/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx b/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx index 63198af..03eff51 100644 --- a/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx +++ b/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx @@ -1,38 +1,25 @@ -import { ConsistencyContainer, LabelRow, WeekContainer } from './styles' -import { ConsistencyDay } from '../ConsistencyDay' +import { + ConsistencyContainer, + LabelRow, + DayBoxContainer, + DayBox, + DayLabel, +} from './styles' -const weekConsistency = [ - { - hours: 2, - day: 'MONDAY', - }, - { - hours: 2, - day: 'TUESDAY', - }, - { - hours: 2, - day: 'WEDNESDAY', - }, - { - hours: 2, - day: 'THURSDAY', - }, - { - hours: 2, - day: 'FRIDAY', - }, - { - hours: 2, - day: 'SATURDAY', - }, - { - hours: 2, - day: 'SUNDAY', - }, +const daysOfWeek = [ + 'MONDAY', + 'TUESDAY', + 'WEDNESDAY', + 'THURSDAY', + 'FRIDAY', + 'SATURDAY', + 'SUNDAY', ] export function ConsistencyOfTheWeek() { + const today = new Date() + const currentDay = today.getDate() + const isPastDay = (day: number) => day < currentDay return ( @@ -43,15 +30,24 @@ export function ConsistencyOfTheWeek() {

2023

 - - {weekConsistency.map((day, index) => { - return ( -
- -
- ) - })} - + + {daysOfWeek.map((day, index) => ( +
+ + + {day} + +
+ ))} + ) } diff --git a/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts index 316ab62..749050e 100644 --- a/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts +++ b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts @@ -17,9 +17,52 @@ export const LabelRow = styled.div` justify-content: space-between; ` -export const WeekContainer = styled.div` +export const DayBoxContainer = styled.div` margin-top: 1rem; - width: 100%; display: flex; justify-content: space-between; + justify-items: center; +` + +export const DayBox = styled.div<{ + past: boolean + current: boolean + intensity: number +}>` + width: 3rem; /* Set your desired width */ + aspect-ratio: 1; + box-sizing: content-box; + border: 3px solid + ${(props) => + props.past + ? props.theme['yellow-600'] + : props.current + ? props.theme['dark-900'] + : props.theme['gray-200']}; /* Border for past days */ + border-radius: 7px; + background-color: ${(props) => + props.current + ? props.theme.white + : props.past + ? props.theme['yellow-400'] + : props.theme['gray-200']}; + margin: auto; +` + +export const DayLabel = styled.h1<{ + past: boolean + current: boolean + intensity: number +}>` + margin-top: 1rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 600; + font-size: 1rem; + text-align: center; + color: ${(props) => + props.current + ? props.theme['dark-900'] + : props.past + ? props.theme['dark-800'] + : props.theme['gray-300']}; ` diff --git a/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs b/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs b/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs b/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs new file mode 100644 index 0000000..a749c92 --- /dev/null +++ b/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs @@ -0,0 +1,10 @@ +// vite.config.ts +import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From 5487c3b125ce73a40e887db9095e7b07d957de8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Sat, 30 Dec 2023 20:22:30 -0300 Subject: [PATCH 05/13] enhancing auth rendering and route --- package-lock.json | 77 +++++++++++++++++++ package.json | 1 + src/Router.tsx | 5 +- src/components/Input/index.tsx | 8 +- src/components/Input/styles.ts | 6 +- src/pages/Auth/ForgotPassword/index.tsx | 21 ++--- src/pages/Auth/Login/index.tsx | 17 +++- src/pages/Auth/Register/index.tsx | 10 ++- src/pages/Auth/Reset Password/index.tsx | 10 ++- src/pages/Auth/index.tsx | 24 ++++-- src/pages/Reports/Consistency/index.tsx | 30 ++++++-- .../components/ProgressOfTheDay/index.tsx | 4 +- vite.config.ts.timestamp-1700851850145.mjs | 10 --- vite.config.ts.timestamp-1701085633082.mjs | 10 --- vite.config.ts.timestamp-1701429375927.mjs | 10 --- vite.config.ts.timestamp-1701705735861.mjs | 10 --- vite.config.ts.timestamp-1702569135856.mjs | 10 --- vite.config.ts.timestamp-1702649078942.mjs | 10 --- ....timestamp-1703034532697-1a372c0a63822.mjs | 10 --- ...s.timestamp-1703206039210-db2a000b83f3.mjs | 10 --- ....timestamp-1703256149004-4dd79d249e32d.mjs | 10 --- ....timestamp-1703283121825-33c71e4d5fc93.mjs | 10 --- 22 files changed, 182 insertions(+), 131 deletions(-) delete mode 100644 vite.config.ts.timestamp-1700851850145.mjs delete mode 100644 vite.config.ts.timestamp-1701085633082.mjs delete mode 100644 vite.config.ts.timestamp-1701429375927.mjs delete mode 100644 vite.config.ts.timestamp-1701705735861.mjs delete mode 100644 vite.config.ts.timestamp-1702569135856.mjs delete mode 100644 vite.config.ts.timestamp-1702649078942.mjs delete mode 100644 vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs delete mode 100644 vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs delete mode 100644 vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs delete mode 100644 vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs diff --git a/package-lock.json b/package-lock.json index 6236b9a..ae0f130 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.43.5", "react-router-dom": "^6.9.0", + "react-tooltip": "^5.25.0", "recharts": "^2.10.3", "styled-components": "^5.3.8", "zod": "^3.21.4" @@ -1477,6 +1478,28 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.2.tgz", "integrity": "sha512-xDxhD9++451HuCv3xKBEdSYaArX9NcokODXZYH/MxGw1XFFOz7OKkTRItZ5wf6npBN/inwp8dUZCP7SpAg46yQ==" }, + "node_modules/@floating-ui/core": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "dependencies": { + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + }, "node_modules/@grpc/grpc-js": { "version": "1.8.21", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.21.tgz", @@ -2406,6 +2429,11 @@ "node": ">=4" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -5184,6 +5212,19 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-tooltip": { + "version": "5.25.0", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.0.tgz", + "integrity": "sha512-/eGhmlwbHlJrVoUe75fb58rJfAy9aZnTvQAK9ZUPM0n9mmBGpEk13vDPiQVCeUuax+fBej+7JPsUXlhzaySc7w==", + "dependencies": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", @@ -7258,6 +7299,28 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.2.tgz", "integrity": "sha512-xDxhD9++451HuCv3xKBEdSYaArX9NcokODXZYH/MxGw1XFFOz7OKkTRItZ5wf6npBN/inwp8dUZCP7SpAg46yQ==" }, + "@floating-ui/core": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "requires": { + "@floating-ui/utils": "^0.1.3" + } + }, + "@floating-ui/dom": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "requires": { + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" + } + }, + "@floating-ui/utils": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + }, "@grpc/grpc-js": { "version": "1.8.21", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.21.tgz", @@ -7938,6 +8001,11 @@ "supports-color": "^5.3.0" } }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -9952,6 +10020,15 @@ "react-transition-group": "2.9.0" } }, + "react-tooltip": { + "version": "5.25.0", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.0.tgz", + "integrity": "sha512-/eGhmlwbHlJrVoUe75fb58rJfAy9aZnTvQAK9ZUPM0n9mmBGpEk13vDPiQVCeUuax+fBej+7JPsUXlhzaySc7w==", + "requires": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + } + }, "react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/package.json b/package.json index 2c1f9ad..03c44b7 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.43.5", "react-router-dom": "^6.9.0", + "react-tooltip": "^5.25.0", "recharts": "^2.10.3", "styled-components": "^5.3.8", "zod": "^3.21.4" diff --git a/src/Router.tsx b/src/Router.tsx index 3aab86f..44e32a0 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -21,7 +21,10 @@ export function Router() { } /> }> - } /> + } /> + } /> + } /> + } /> } /> } /> diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index ea74ec5..0c7598a 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -12,7 +12,8 @@ interface InputProps extends InputHTMLAttributes { placeholder: string icon?: ReactNode errorMessage?: string - validator: true + showValidator?: boolean + validator?: boolean } const getValidatorIcon = (validator: boolean) => { @@ -27,6 +28,7 @@ export function Input({ placeholder, icon, errorMessage, + showValidator, validator, ...props }: InputProps) { @@ -35,11 +37,11 @@ export function Input({ {icon && {icon}} {errorMessage && {errorMessage}} - { + {showValidator && ( {getValidatorIcon(validator)} - } + )} ) } diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index 3c22940..6315b28 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -54,11 +54,13 @@ export const ErrorMessage = styled.div` export const StyledValidatorIcon = styled.div<{ validator: boolean }>` position: absolute; - top: 50%; + top: 55%; right: 1rem; transform: translateY(-50%); color: ${(props) => - props.validator ? props.theme['gray-500'] : props.theme['red-500']}; + props.validator === true + ? props.theme['green-500'] + : props.theme['red-500']}; transition: color 0.3s ease; ${InputWrapper}:focus-within & { diff --git a/src/pages/Auth/ForgotPassword/index.tsx b/src/pages/Auth/ForgotPassword/index.tsx index f52eeec..da30e2e 100644 --- a/src/pages/Auth/ForgotPassword/index.tsx +++ b/src/pages/Auth/ForgotPassword/index.tsx @@ -1,16 +1,18 @@ -import { - AuthTitle, - AuthSubtitle, - ForgotPasswordLink, - MinorText, -} from './styles' +import { AuthTitle, AuthSubtitle, MinorText } from './styles' import { Input } from '../../../components/Input' -import { At, Keyhole, ArrowLeft } from 'phosphor-react' -import GoogleLogo from './../../../../public/logos/google_logo.svg' +import { At, ArrowLeft } from 'phosphor-react' import { Button } from '../../../components/Button' +import { useNavigate } from 'react-router-dom' + export function ForgotPassword() { + const navigate = useNavigate() + + function handleRedirectToSignup() { + navigate('/timer') + } + return ( <> Forgot Password @@ -28,7 +30,8 @@ export function ForgotPassword() { Never Mind. Go Back to Login - Dont have an account yet? Lets create one + Dont have an account yet? Lets{' '} + create one ) diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index 8f6155c..bc88703 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -9,14 +9,26 @@ import { Input } from '../../../components/Input' import { At, Keyhole } from 'phosphor-react' import GoogleLogo from './../../../../public/logos/google_logo.svg' import { Button } from '../../../components/Button' +import { useNavigate } from 'react-router-dom' export function Login() { + const navigate = useNavigate() + + function handleRedirectToSignup() { + navigate('/signup') + } + return ( <> Log in Welcome back! - } /> + } + /> } @@ -32,7 +44,8 @@ export function Login() { Connect with Google - Don't have an account yet? Let's log in + {`Don't have an account yet? Let's`}{' '} + create one! ) diff --git a/src/pages/Auth/Register/index.tsx b/src/pages/Auth/Register/index.tsx index 2273c62..b83b7c4 100644 --- a/src/pages/Auth/Register/index.tsx +++ b/src/pages/Auth/Register/index.tsx @@ -9,8 +9,15 @@ import { Input } from '../../../components/Input' import { At, IdentificationBadge, Keyhole, CheckCircle } from 'phosphor-react' import GoogleLogo from './../../../../public/logos/google_logo.svg' import { Button } from '../../../components/Button' +import { useNavigate } from 'react-router-dom' export function RegisterNewAccount() { + const navigate = useNavigate() + + function handleRedirectToLogin() { + navigate('/login') + } + return ( <> Create Account @@ -49,7 +56,8 @@ export function RegisterNewAccount() { Connect with Google - Already have an account? Just log in + Already have an account? Just{' '} + log in ) diff --git a/src/pages/Auth/Reset Password/index.tsx b/src/pages/Auth/Reset Password/index.tsx index 0b46f5a..cceb574 100644 --- a/src/pages/Auth/Reset Password/index.tsx +++ b/src/pages/Auth/Reset Password/index.tsx @@ -9,8 +9,15 @@ import { import { Input } from '../../../components/Input' import { Keyhole, CheckCircle } from 'phosphor-react' import { Button } from '../../../components/Button' +import { useNavigate } from 'react-router-dom' export function ResetPassword() { + const navigate = useNavigate() + + function handleRedirectToSignup() { + navigate('/signup') + } + return ( <> Reset Password @@ -41,7 +48,8 @@ export function ResetPassword() { - Dont have an account yet? Lets create one + {` Don't have an account yet? Lets `} + create one gwergwer ) diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx index cacfd45..199bdab 100644 --- a/src/pages/Auth/index.tsx +++ b/src/pages/Auth/index.tsx @@ -9,7 +9,24 @@ import { ContentContainer, } from './styles' import { ForgotPassword } from './ForgotPassword' -import { ResetPassword } from './Reset Password/index'; +import { ResetPassword } from './Reset Password/index' + +// import { useNavigate } from "react-router-dom"; + +const getAuthComponent = (pathname: string) => { + switch (pathname) { + case '/login': + return + case '/signup': + return + case '/forgot-password': + return + case '/reset-password': + return + default: + return + } +} export function Auth() { return ( @@ -21,10 +38,7 @@ export function Auth() { CHIMPTOK - - {/* */} - {/* */} - {/* */} + {getAuthComponent(location.pathname)} diff --git a/src/pages/Reports/Consistency/index.tsx b/src/pages/Reports/Consistency/index.tsx index 7c3aff3..eddf312 100644 --- a/src/pages/Reports/Consistency/index.tsx +++ b/src/pages/Reports/Consistency/index.tsx @@ -1,3 +1,4 @@ +import { Tooltip } from 'react-tooltip' import { YaarConsistency, Title, @@ -20,12 +21,31 @@ export function Consistency() { {[...Array(90)].map((_, index) => ( - + data-tip={`Day ${index + 1}`} + data-for={`dayTooltip${index + 1}`} + > + + ( + + The element #{content} is currently active. +
+ Relevant attribute:{' '} + {activeAnchor?.getAttribute('data-some-relevant-attr') || + 'not set'} + + )} + /> + ))} diff --git a/src/pages/Timer/components/ProgressOfTheDay/index.tsx b/src/pages/Timer/components/ProgressOfTheDay/index.tsx index 6c74e47..5ec0b08 100644 --- a/src/pages/Timer/components/ProgressOfTheDay/index.tsx +++ b/src/pages/Timer/components/ProgressOfTheDay/index.tsx @@ -8,8 +8,8 @@ export function ProgressOfTheDay() { return ( -

Goal of the day

-

2h

+

{`Today's Goal`}

+

2 hours in tasks
diff --git a/vite.config.ts.timestamp-1700851850145.mjs b/vite.config.ts.timestamp-1700851850145.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1700851850145.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701085633082.mjs b/vite.config.ts.timestamp-1701085633082.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1701085633082.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701429375927.mjs b/vite.config.ts.timestamp-1701429375927.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1701429375927.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1701705735861.mjs b/vite.config.ts.timestamp-1701705735861.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1701705735861.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1702569135856.mjs b/vite.config.ts.timestamp-1702569135856.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1702569135856.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1702649078942.mjs b/vite.config.ts.timestamp-1702649078942.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1702649078942.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs b/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1703034532697-1a372c0a63822.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs b/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1703206039210-db2a000b83f3.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs b/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1703256149004-4dd79d249e32d.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs b/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs deleted file mode 100644 index a749c92..0000000 --- a/vite.config.ts.timestamp-1703283121825-33c71e4d5fc93.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.ts -import { defineConfig } from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/vite/dist/node/index.js"; -import react from "file:///C:/Users/user/Desktop/Chimptok/chimptok/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx1c2VyXFxcXERlc2t0b3BcXFxcQ2hpbXB0b2tcXFxcY2hpbXB0b2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXHVzZXJcXFxcRGVza3RvcFxcXFxDaGltcHRva1xcXFxjaGltcHRva1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvdXNlci9EZXNrdG9wL0NoaW1wdG9rL2NoaW1wdG9rL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCdcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBQ2hWLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From 5d46dae513be0d3b64999fd1fbc22c233902fba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leticia=20Gon=C3=A7alves?= Date: Tue, 30 Jan 2024 17:13:34 -0300 Subject: [PATCH 06/13] forms binding and validations --- public/forest.svg | 321 ++++++++++++++++++ src/Router.tsx | 12 +- src/components/Button/index.tsx | 13 +- src/components/Button/styles.ts | 9 +- src/components/Card/styles.ts | 2 +- src/components/Checkbox/index.tsx | 18 + src/components/Checkbox/styles.ts | 53 +++ src/components/Input/index.tsx | 60 ++-- src/components/Input/styles.ts | 35 +- src/components/Modal/index.tsx | 30 ++ src/components/Modal/styles.ts | 35 ++ src/components/RadioButton/index.tsx | 23 ++ src/components/RadioButton/styles.ts | 59 ++++ src/components/Select/index.tsx | 68 ++++ src/components/Select/styles.ts | 64 ++++ src/components/Textarea/index.tsx | 5 + src/components/Textarea/styles.ts | 17 + src/domain-components/ProgressBar/index.tsx | 9 + src/domain-components/ProgressBar/styles.ts | 38 +++ src/layouts/DefaultLayout/styles.ts | 3 + src/pages/Auth/ForgotPassword/index.tsx | 57 +++- src/pages/Auth/ForgotPassword/styles.ts | 9 +- src/pages/Auth/Login/index.tsx | 78 ++++- src/pages/Auth/Login/styles.ts | 9 +- src/pages/Auth/Register/index.tsx | 104 ++++-- src/pages/Auth/Register/styles.ts | 9 +- src/pages/Auth/Reset Password/index.tsx | 102 ++++-- src/pages/Auth/Reset Password/styles.ts | 8 + src/pages/Auth/index.tsx | 2 +- src/pages/Goals/ActiveGoals/index.tsx | 91 +++++ src/pages/Goals/ActiveGoals/styles.ts | 25 ++ src/pages/Goals/GoalCard/index.tsx | 109 +++--- src/pages/Goals/GoalCard/styles.ts | 100 ++++-- src/pages/Goals/NewGoalForm/index.tsx | 186 ++++++++++ src/pages/Goals/NewGoalForm/styles.ts | 101 ++++++ src/pages/Goals/PastGoals/index.tsx | 50 +++ src/pages/Goals/PastGoals/styles.ts | 8 + src/pages/Goals/index.tsx | 41 ++- src/pages/Goals/styles.ts | 59 ++-- src/pages/History/index.tsx | 5 +- src/pages/Onboarding/StepOne/index.tsx | 24 +- src/pages/Onboarding/index.tsx | 40 ++- src/pages/Onboarding/styles.ts | 31 +- src/pages/Reports/Consistency/index.tsx | 4 +- src/pages/Reports/Consistency/styles.ts | 8 +- src/pages/Reports/GoalRanking/index.tsx | 117 +++---- src/pages/Reports/TaskHistory/index.tsx | 3 +- .../components/ConsistencyOfTheWeek/index.tsx | 147 ++++++-- .../components/ConsistencyOfTheWeek/styles.ts | 63 ++-- .../components/NewTaskCycleForm/index.tsx | 219 ++++++++++++ .../components/NewTaskCycleForm/styles.ts | 24 ++ .../components/ProgressOfTheDay/index.tsx | 23 +- src/pages/Timer/index.tsx | 22 +- .../components/AccountInfo/index.tsx | 21 +- .../components/AccountInfo/styles.tsx | 6 +- .../components/CancelAccount/index.tsx | 35 +- .../components/CancelAccount/styles.tsx | 9 +- .../components/SocialMedia/styles.tsx | 6 + .../UserSettings/components/Support/index.tsx | 15 +- .../components/Support/styles.tsx | 5 +- src/pages/UserSettings/index.tsx | 25 +- src/pages/Welcome/index.tsx | 23 +- src/pages/Welcome/styles.ts | 24 +- src/styles/global.ts | 11 +- src/styles/themes/default.ts | 5 +- ....timestamp-1704146152053-b72e6e9ef6c73.mjs | 10 + ....timestamp-1704205230902-028b9af4d1a0d.mjs | 10 + ....timestamp-1704284438757-52edfc954fb2d.mjs | 10 + ....timestamp-1705074445377-9b6322105cbcf.mjs | 10 + 69 files changed, 2470 insertions(+), 507 deletions(-) create mode 100644 public/forest.svg create mode 100644 src/components/Checkbox/index.tsx create mode 100644 src/components/Checkbox/styles.ts create mode 100644 src/components/Modal/index.tsx create mode 100644 src/components/Modal/styles.ts create mode 100644 src/components/RadioButton/index.tsx create mode 100644 src/components/RadioButton/styles.ts create mode 100644 src/components/Select/index.tsx create mode 100644 src/components/Select/styles.ts create mode 100644 src/components/Textarea/index.tsx create mode 100644 src/components/Textarea/styles.ts create mode 100644 src/domain-components/ProgressBar/index.tsx create mode 100644 src/domain-components/ProgressBar/styles.ts create mode 100644 src/pages/Goals/ActiveGoals/index.tsx create mode 100644 src/pages/Goals/ActiveGoals/styles.ts create mode 100644 src/pages/Goals/NewGoalForm/index.tsx create mode 100644 src/pages/Goals/NewGoalForm/styles.ts create mode 100644 src/pages/Goals/PastGoals/index.tsx create mode 100644 src/pages/Goals/PastGoals/styles.ts create mode 100644 src/pages/Timer/components/NewTaskCycleForm/index.tsx create mode 100644 src/pages/Timer/components/NewTaskCycleForm/styles.ts create mode 100644 vite.config.ts.timestamp-1704146152053-b72e6e9ef6c73.mjs create mode 100644 vite.config.ts.timestamp-1704205230902-028b9af4d1a0d.mjs create mode 100644 vite.config.ts.timestamp-1704284438757-52edfc954fb2d.mjs create mode 100644 vite.config.ts.timestamp-1705074445377-9b6322105cbcf.mjs diff --git a/public/forest.svg b/public/forest.svg new file mode 100644 index 0000000..45d44b6 --- /dev/null +++ b/public/forest.svg @@ -0,0 +1,321 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Router.tsx b/src/Router.tsx index 44e32a0..dc39af8 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -9,6 +9,9 @@ import { FullPageLayout } from './layouts/FullPageLayout' import { Auth } from './pages/Auth' import { Welcome } from './pages/Welcome/index' import { Onboarding } from './pages/Onboarding/index' +import { ActiveGoals } from './pages/Goals/ActiveGoals' +import { PastGoals } from './pages/Goals/PastGoals' +import { NewGoalForm } from './pages/Goals/NewGoalForm' export function Router() { return ( @@ -17,7 +20,11 @@ export function Router() { }> } /> } /> - } /> + }> + } /> + } /> + } /> + } /> }> @@ -29,9 +36,6 @@ export function Router() { } /> } /> - {/* }> - - */} ) } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index d94a7d7..d2bbf62 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,27 +1,28 @@ -import React from 'react' +import React, { ButtonHTMLAttributes } from 'react' import { ButtonWrapper } from './styles' -interface ButtonProps { - onClick?: () => void +interface ButtonProps extends ButtonHTMLAttributes { children: React.ReactNode - disabled?: boolean color?: 'yellow' | 'blue' | 'dark' buttonType?: 'filled' | 'border' | 'flat' + fullWidth?: boolean } export function Button({ - onClick, children, disabled = false, color = 'yellow', buttonType = 'filled', + fullWidth = false, + ...props }: ButtonProps) { return ( {children} diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 91f4736..e232524 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -3,22 +3,23 @@ import styled from 'styled-components' interface ButtonWrapperProps { color: 'yellow' | 'blue' | 'dark' buttonType: 'filled' | 'border' | 'flat' + fullWidth: boolean } export const ButtonWrapper = styled.button` + width: ${(props) => (props.fullWidth ? '100%' : 'auto')}; display: flex; flex-direction: row; align-items: center; justify-content: center; - gap: 1rem; + gap: 0.5rem; border: ${(props) => props.buttonType === 'border' ? `solid 2px ${props.theme['yellow-500']}` : 'none'}; - width: 100%; border-radius: 8px; font-size: 0.85rem; - font-weight: 700; + font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; background-color: ${(props) => @@ -37,7 +38,7 @@ export const ButtonWrapper = styled.button` props.color === 'dark' || props.color === 'blue' ? 'white' : props.theme['dark-900']}; - padding: 1rem 2rem; + padding: 1rem 1.75rem; white-space: nowrap; :hover { diff --git a/src/components/Card/styles.ts b/src/components/Card/styles.ts index c40f60e..c3bcec1 100644 --- a/src/components/Card/styles.ts +++ b/src/components/Card/styles.ts @@ -4,5 +4,5 @@ export const CardWrapper = styled.div` background-color: white; border: 1px solid ${(props) => props.theme['gray-300']}; border-radius: 9px; - padding: 3rem; + padding: 2rem 3rem 2rem 3rem; ` diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx new file mode 100644 index 0000000..a9654ec --- /dev/null +++ b/src/components/Checkbox/index.tsx @@ -0,0 +1,18 @@ +import { CheckBoxWrapper, StyledInput, StyledLabel } from './styles' + +interface CheckBoxProps { + label: string +} +export function CheckBox({ label }: CheckBoxProps) { + return ( + + + {label} + + ) +} diff --git a/src/components/Checkbox/styles.ts b/src/components/Checkbox/styles.ts new file mode 100644 index 0000000..317d4dc --- /dev/null +++ b/src/components/Checkbox/styles.ts @@ -0,0 +1,53 @@ +import styled from 'styled-components' + +export const CheckBoxWrapper = styled.div` + display: flex; + flex-direction: row; +` + +export const StyledInput = styled.input` + /* Keep existing styles */ + border: 1rem solid red; + + /* Add or modify styles for the checkbox */ + appearance: none; + width: 1.25rem; + height: 1.25rem; + border: 2px solid ${(props) => props.theme['gray-500']}; + border-radius: 3px; + outline: none; + position: relative; + overflow: hidden; /* Hide the overflow for the ::before pseudo-element */ + + &:hover { + cursor: pointer; + } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background-color: ${(props) => props.theme['yellow-500']}; + } + + /* Define styles for the checked state */ + &:checked { + background-color: ${(props) => props.theme['yellow-500']}; + border-color: ${(props) => props.theme['yellow-600']}; + + &::before { + height: 100%; + } + } +` + +export const StyledLabel = styled.label` + font-size: 0.85rem; + color: ${(props) => props.theme['gray-700']}; + font-weight: 500; + line-height: 1.5; + margin-left: 0.5rem; +` diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 0c7598a..8a14c7c 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -1,47 +1,35 @@ import { - InputWrapper, StyledInput, + Label, IconWrapper, ErrorMessage, StyledValidatorIcon, + InputWrapper, + InputContainer, } from './styles' -import { InputHTMLAttributes, ReactNode } from 'react' -import { CheckCircle, XCircle } from 'phosphor-react' +import { InputHTMLAttributes, ReactNode, forwardRef } from 'react' interface InputProps extends InputHTMLAttributes { - placeholder: string + placeholder?: string icon?: ReactNode - errorMessage?: string - showValidator?: boolean - validator?: boolean + errorMessage?: string | null | undefined + isValid?: boolean + label?: string } -const getValidatorIcon = (validator: boolean) => { - return validator ? ( - - ) : ( - - ) -} - -export function Input({ - placeholder, - icon, - errorMessage, - showValidator, - validator, - ...props -}: InputProps) { - return ( - - - {icon && {icon}} - {errorMessage && {errorMessage}} - {showValidator && ( - - {getValidatorIcon(validator)} - - )} - - ) -} +export const Input = forwardRef( + ({ placeholder, icon, errorMessage, isValid, label, ...props }, ref) => { + return ( + + {label && } + + + {icon && {icon}} + {errorMessage && {errorMessage}} + {isValid && } + + + ) + }, +) +Input.displayName = 'Input' diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index 6315b28..3a9083b 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -1,5 +1,11 @@ +import { CheckCircle } from 'phosphor-react' import styled from 'styled-components' +export const InputContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; +` export const InputWrapper = styled.div` width: 100%; position: relative; @@ -23,7 +29,15 @@ export const StyledInput = styled.input` border: 2px solid ${(props) => props.theme['yellow-500']}; } ` - +export const Label = styled.p` + margin-bottom: 0.5rem; + text-align: left; + font-weight: 700; + span { + margin-left: 0.25rem; + color: ${(props) => props.theme['gray-500']}; + } +` export const IconWrapper = styled.div` position: absolute; top: 50%; @@ -33,7 +47,7 @@ export const IconWrapper = styled.div` transition: color 0.3s ease; /* Add transition for color property */ ${InputWrapper}:focus-within & { - color: ${(props) => props.theme['dark-900']}; + color: ${(props) => props.theme['yellow-700']}; } ` @@ -48,23 +62,14 @@ export const ErrorMessage = styled.div` padding-bottom: 0.5rem; bottom: 20%; right: 1rem; - font-weight: 600; + font-weight: 700; transition: color 0.3s ease; /* Add transition for color property */ ` -export const StyledValidatorIcon = styled.div<{ validator: boolean }>` +export const StyledValidatorIcon = styled(CheckCircle)` position: absolute; - top: 55%; + top: 50%; right: 1rem; transform: translateY(-50%); - color: ${(props) => - props.validator === true - ? props.theme['green-500'] - : props.theme['red-500']}; - transition: color 0.3s ease; - - ${InputWrapper}:focus-within & { - color: ${(props) => - props.validator ? props.theme['green-500'] : props.theme['red-500']}; - } + color: ${(props) => props.theme['green-500']}; ` diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx new file mode 100644 index 0000000..35283ce --- /dev/null +++ b/src/components/Modal/index.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import { ModalOverlay, ModalContent, CloseButton } from './styles' +import { XCircle } from 'phosphor-react' + +interface ModalProps { + isOpen: boolean + onClose: () => void // Adjust the type of onClose to be a function that returns void + children: React.ReactNode +} +export function Modal({ isOpen, onClose, children }: ModalProps) { + const [isHovered, setIsHovered] = useState(false) + return ( + <> + {isOpen && } + + + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + /> + + {children} + + + ) +} + +export default Modal diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts new file mode 100644 index 0000000..5241b3b --- /dev/null +++ b/src/components/Modal/styles.ts @@ -0,0 +1,35 @@ +import styled from 'styled-components' +interface ModalContentProps { + isOpen: boolean +} +export const ModalOverlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + z-index: 99; +` + +export const ModalContent = styled.div` + border: 1px solid ${(props) => props.theme['gray-300']}; + border-radius: 9px; + padding: 2rem 3rem; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + z-index: 100; + display: ${(props) => (props.isOpen ? 'block' : 'none')}; +` + +export const CloseButton = styled.div` + color: ${(props) => props.theme['gray-500']}; + border: none; + cursor: pointer; + position: absolute; + top: 1rem; /* Adjust the top position as needed */ + right: 1rem; /* Adjust the right position as needed */ +` diff --git a/src/components/RadioButton/index.tsx b/src/components/RadioButton/index.tsx new file mode 100644 index 0000000..45411e8 --- /dev/null +++ b/src/components/RadioButton/index.tsx @@ -0,0 +1,23 @@ +import { InputHTMLAttributes } from 'react' +import { Wrapper } from './styles' + +interface RadioProps extends InputHTMLAttributes { + label: string + subLabel: string + id: string + name: string +} + +export function Radio({ label, subLabel, id, name, ...props }: RadioProps) { + return ( + + + + + ) +} + +export default Radio diff --git a/src/components/RadioButton/styles.ts b/src/components/RadioButton/styles.ts new file mode 100644 index 0000000..8d7fc32 --- /dev/null +++ b/src/components/RadioButton/styles.ts @@ -0,0 +1,59 @@ +// RadioStyledComponents.js +import styled from 'styled-components' + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + justify-items: end; + + input[type='radio'] { + display: none; + } + + label { + background-color: ${(props) => props.theme['gray-100']}; + border: 2px solid ${(props) => props.theme['gray-300']}; + border-radius: 6px; + padding: 1rem 1.5rem; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + + h1 { + font-size: 1.5rem; + font-weight: 800; + margin-top: 0.25rem; + } + p { + color: ${(props) => props.theme['gray-700']}; + } + } + + label:before { + content: ''; + width: 16px; /* Adjust as needed */ + height: 16px; /* Adjust as needed */ + background-color: ${(props) => props.theme.white}; + border-radius: 50%; /* Make it round */ + margin-bottom: 5px; /* Add spacing between radio and label */ + margin-left: 120%; + margin-top: -20%; + border: 2px solid ${(props) => props.theme['gray-300']}; + } + + input[type='radio']:checked + label { + background-color: ${(props) => props.theme['gray-100']}; + color: ${(props) => props.theme['dark-900']}; + border: 2px solid ${(props) => props.theme['yellow-600']}; + p { + color: ${(props) => props.theme['dark-900']}; + } + } + + input[type='radio']:checked + label:before { + background-color: ${(props) => + props.theme['yellow-600']}; /* Adjust the color of the dot */ + border: 2px solid ${(props) => props.theme['yellow-600']}; + } +` diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx new file mode 100644 index 0000000..7533770 --- /dev/null +++ b/src/components/Select/index.tsx @@ -0,0 +1,68 @@ +import { useState } from 'react' +import { + CustomDropdown, + StyledSelect, + OptionList, + StyledOption, + CaretDownIcon, +} from './styles' +import { CaretDown } from 'phosphor-react' + +interface SelectProps { + label?: string + placeholder?: string + options: T[] + getLabel: (option: T) => string + onSelect?: (selectedOption: T) => void // Added onSelect prop + initialValue?: T +} + +export function Select({ + options, + getLabel, + label, + placeholder, + onSelect, // Added onSelect prop + initialValue, +}: SelectProps) { + const [isOpen, setIsOpen] = useState(false) + const [selectedOption, setSelectedOption] = useState( + initialValue, // Set initial value from prop + ) + + const handleSelect = (option: T) => { + setSelectedOption(option) + setIsOpen(false) + + // Call onSelect prop if it's provided + if (onSelect) { + onSelect(option) + } + } + + return ( + + {label && } + setIsOpen(!isOpen)}> + {selectedOption ? getLabel(selectedOption) : placeholder} + + + + + {isOpen && ( + + {options.map((option) => ( + handleSelect(option)} + > + {getLabel(option)} + + ))} + + )} + + ) +} + +export default Select diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts new file mode 100644 index 0000000..a952b12 --- /dev/null +++ b/src/components/Select/styles.ts @@ -0,0 +1,64 @@ +import styled from 'styled-components' + +export const CustomDropdown = styled.div` + text-align: left; + position: relative; + width: 100%; +` + +export const StyledSelect = styled.div` + text-align: left; + display: flex; + align-items: center; + background-color: ${(props) => props.theme['gray-100']}; + padding: 1rem; + font-size: 0.85rem; + width: 100%; + border: 2px solid ${(props) => props.theme['gray-300']}; + border-radius: 8px; + box-sizing: border-box; + transition: border 0.3s ease; + font-weight: 600; + cursor: pointer; + + &:hover { + border: 2px solid ${(props) => props.theme['yellow-500']}; + } + + span { + flex-grow: 1; + } +` + +export const OptionList = styled.div` + text-align: left; + position: absolute; + top: 100%; + left: 0; + width: 100%; + max-height: 150px; + overflow-y: auto; + background-color: ${(props) => props.theme['gray-100']}; + border: 2px solid ${(props) => props.theme['gray-300']}; + border-top: none; + border-radius: 0 0 8px 8px; + box-sizing: border-box; + z-index: 1; +` + +export const StyledOption = styled.div` + padding: 0.75rem; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: ${(props) => props.theme['yellow-300']}; + } +` + +export const CaretDownIcon = styled.div` + margin-left: 0.5rem; + display: flex; + align-items: center; + color: ${(props) => props.theme['gray-700']}; +` diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx new file mode 100644 index 0000000..44ebde9 --- /dev/null +++ b/src/components/Textarea/index.tsx @@ -0,0 +1,5 @@ +import { StyledTextArea } from './styles' + +export function TextArea() { + return +} diff --git a/src/components/Textarea/styles.ts b/src/components/Textarea/styles.ts new file mode 100644 index 0000000..939ec0e --- /dev/null +++ b/src/components/Textarea/styles.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components' + +export const StyledTextArea = styled.textarea` + width: 100%; + padding: 0.75rem; + font-size: 0.85rem; + border: 2px solid ${(props) => props.theme['gray-300']}; + border-radius: 6px; + /* Disable textarea resizing */ + resize: none; + /* Add any additional styling as needed */ + /* Example: */ + &:focus { + outline: none; + border-color: ${(props) => props.theme['yellow-500']}; + } +` diff --git a/src/domain-components/ProgressBar/index.tsx b/src/domain-components/ProgressBar/index.tsx new file mode 100644 index 0000000..8325c36 --- /dev/null +++ b/src/domain-components/ProgressBar/index.tsx @@ -0,0 +1,9 @@ +import { StepProgress } from './styles' + +interface DomainProgressProps { + progress: number +} + +export function DomainProgressBar({ progress }: DomainProgressProps) { + return +} diff --git a/src/domain-components/ProgressBar/styles.ts b/src/domain-components/ProgressBar/styles.ts new file mode 100644 index 0000000..9c27230 --- /dev/null +++ b/src/domain-components/ProgressBar/styles.ts @@ -0,0 +1,38 @@ +import styled, { keyframes } from 'styled-components' + +interface ProgressBarProps { + progress: number +} + +const calculateWidth = (progress: number) => `${progress}%` + +const progressAnimation = (progress: number) => keyframes` + 0% { + width: 0; + } + 100% { + width: ${calculateWidth(progress)}; + } +` + +export const StepProgress = styled.div` + height: 0.7rem; + width: 100%; + border-radius: 9px; + overflow: hidden; + position: relative; + background-color: ${(props) => props.theme['gray-200']}; + + &::before { + content: ''; + display: block; + height: 100%; + width: 100%; + border-radius: 9px; + background-color: ${(props) => props.theme['blue-500']}; + animation: ${(props) => progressAnimation(props.progress)} 1s forwards; + } +` + +// Example usage: +// diff --git a/src/layouts/DefaultLayout/styles.ts b/src/layouts/DefaultLayout/styles.ts index 631bff6..2a6e368 100644 --- a/src/layouts/DefaultLayout/styles.ts +++ b/src/layouts/DefaultLayout/styles.ts @@ -1,8 +1,11 @@ import styled from 'styled-components' +import forest from '../../../public/forest.svg' export const LayoutContainer = styled.div` display: flex; justify-content: center; + // background-image: url(${forest}); + background-size: cover; ` export const RouterContainer = styled.div` margin-top: 5rem; diff --git a/src/pages/Auth/ForgotPassword/index.tsx b/src/pages/Auth/ForgotPassword/index.tsx index da30e2e..410b398 100644 --- a/src/pages/Auth/ForgotPassword/index.tsx +++ b/src/pages/Auth/ForgotPassword/index.tsx @@ -1,33 +1,66 @@ -import { AuthTitle, AuthSubtitle, MinorText } from './styles' +import { AuthTitle, AuthSubtitle, MinorText, FormContainer } from './styles' import { Input } from '../../../components/Input' -import { At, ArrowLeft } from 'phosphor-react' +import { At } from 'phosphor-react' import { Button } from '../../../components/Button' import { useNavigate } from 'react-router-dom' +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import { useState } from 'react' + +const ForgotPasswordSchema = z.object({ + email: z.string().email().toLowerCase(), +}) + +type ForgotPasswordData = z.infer export function ForgotPassword() { + const [output, setOutput] = useState('') + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + resolver: zodResolver(ForgotPasswordSchema), + mode: 'onChange', + }) const navigate = useNavigate() function handleRedirectToSignup() { - navigate('/timer') + navigate('/signup') + } + + function handleRedirectLoginIn() { + navigate('/login') } + function requestEmailToRecoverPassowrd(data: any) { + setOutput(JSON.stringify(data, null, 2)) + } return ( <> + 
{output}
Forgot Password No problem! Just type your e-mail to recover it. - - } - /> - - + + + Dont have an account yet? Lets{' '} diff --git a/src/pages/Auth/ForgotPassword/styles.ts b/src/pages/Auth/ForgotPassword/styles.ts index 682391a..76f81ea 100644 --- a/src/pages/Auth/ForgotPassword/styles.ts +++ b/src/pages/Auth/ForgotPassword/styles.ts @@ -11,7 +11,14 @@ export const AuthSubtitle = styled.h1` font-weight: 600; margin-bottom: 2rem; ` - +export const FormContainer = styled.div` + width: 100%; + form { + display: flex; + flex-direction: column; + gap: 1rem; + } +` export const CreateAccountButton = styled.button` border: solid 2px ${(props) => props.theme['yellow-500']}; width: 100%; diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index bc88703..ebeb731 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -3,6 +3,7 @@ import { AuthSubtitle, ForgotPasswordLink, MinorText, + FormContainer, } from './styles' import { Input } from '../../../components/Input' @@ -10,31 +11,82 @@ import { At, Keyhole } from 'phosphor-react' import GoogleLogo from './../../../../public/logos/google_logo.svg' import { Button } from '../../../components/Button' import { useNavigate } from 'react-router-dom' +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import { useState } from 'react' + +const LoginFormSchema = z.object({ + email: z.string().email().toLowerCase(), + password: z + .string() + .min(6) + .refine((value) => /[A-Z]/.test(value), { + message: 'At least one uppercase letter is required', + }) + .refine((value) => /[a-z]/.test(value), { + message: 'At least one lowercase letter is required', + }) + .refine((value) => /[0-9!@#$%^&*()_+{}[\]:;<>,.?~\\/-]/.test(value), { + message: 'At least one number or special character is required', + }), +}) + +type LoginFormData = z.infer export function Login() { + const [output, setOutput] = useState('') + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + resolver: zodResolver(LoginFormSchema), + mode: 'onChange', + }) + const navigate = useNavigate() function handleRedirectToSignup() { navigate('/signup') } + function handleRedirectToForgotPassword() { + navigate('/forgot-password') + } + + function logUserIn(data: unknown) { + setOutput(JSON.stringify(data, null, 2)) + } + return ( <> + 
{output}
Log in Welcome back! - - } - /> - } - /> - Forgot passoword? - + +
+ } + {...register('email')} + errorMessage={errors.email?.message?.toString() ?? null} + /> + } + /> + + Forgot passoword? + + +
+ + +
+ } + /> + } + {...register('email')} + errorMessage={errors.email?.message?.toString() ?? null} + /> + } + /> + + + +

At least 6 characters

+ + + +

At lest one uppercase and one lowercase

+ + + +

At lest one number or special character

+ + + +
+ {/* Or */} + +
+ } + /> + } + /> + + + +

At least 6 characters

+ + + +

At lest one uppercase and one lowercase

+ + + +

At lest one number or special character

+ + + +
+ {` Don't have an account yet? Lets `} - create one gwergwer + create one ) diff --git a/src/pages/Auth/Reset Password/styles.ts b/src/pages/Auth/Reset Password/styles.ts index e4ab9b9..32dddfa 100644 --- a/src/pages/Auth/Reset Password/styles.ts +++ b/src/pages/Auth/Reset Password/styles.ts @@ -11,6 +11,14 @@ export const AuthSubtitle = styled.h1` font-weight: 600; margin-bottom: 2rem; ` +export const FormContainer = styled.div` + width: 100%; + form { + display: flex; + flex-direction: column; + gap: 1rem; + } +` export const CreateAccountButton = styled.button` border: solid 2px ${(props) => props.theme['yellow-500']}; diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx index 199bdab..22bdd21 100644 --- a/src/pages/Auth/index.tsx +++ b/src/pages/Auth/index.tsx @@ -32,7 +32,7 @@ export function Auth() { return ( -

Youre on the right track towards your goal!

+

{`You're on the right track towards your goal!`}

 diff --git a/src/pages/Goals/ActiveGoals/index.tsx b/src/pages/Goals/ActiveGoals/index.tsx new file mode 100644 index 0000000..5c3e268 --- /dev/null +++ b/src/pages/Goals/ActiveGoals/index.tsx @@ -0,0 +1,91 @@ +import { GoalCard } from '../GoalCard' +import { Container, GoalWrapper, GoalIndex } from './styles' + +export function ActiveGoals() { + const activeGoals = [ + { + createdAt: new Date('2024-01-20T08:00:00'), + deadline: new Date('2024-06-30T23:59:59'), + hoursPerWeek: 2, + status: 1, + totalHoursSpent: 20, + progressPercentage: 67, + goalName: 'Become Fluent in English', + tasks: [ + 'Learn basic greetings and introductions', + 'Practice speaking with a language exchange partner', + 'Read a short English article every day', + 'Watch English movies with subtitles', + 'Write a journal entry in English', + 'Take an online English course', + 'Join an English-speaking club or meetup', + ], + }, + { + createdAt: new Date('2024-02-15T10:30:00'), + deadline: new Date('2024-08-31T23:59:59'), + hoursPerWeek: 3, + status: 1, + totalHoursSpent: 0, + progressPercentage: 0, + goalName: 'Learn French with Paul', + tasks: [ + 'Start with basic French vocabulary', + 'Listen to French podcasts for beginners', + 'Practice French pronunciation daily', + "Read French children's books", + 'Take a beginner-level French course', + 'Watch French movies with subtitles', + 'Use language learning apps for French', + ], + }, + { + createdAt: new Date('2024-03-10T14:45:00'), + deadline: new Date('2024-10-15T23:59:59'), + hoursPerWeek: 1, + status: 1, + totalHoursSpent: 12, + progressPercentage: 20, + goalName: 'Read the Full Old Testament', + tasks: [ + 'Read Genesis and Exodus', + 'Study the Psalms and Proverbs', + 'Read the historical books (Joshua, Judges, etc.)', + 'Explore the major prophets (Isaiah, Jeremiah, etc.)', + 'Read the minor prophets (Hosea, Joel, etc.)', + 'Study the Gospels (Matthew, Mark, Luke, John)', + 'Read the Acts of the Apostles', + ], + }, + { + createdAt: new Date('2024-04-05T17:15:00'), + deadline: new Date('2024-12-31T23:59:59'), + hoursPerWeek: 2, + status: 1, + totalHoursSpent: 12, + progressPercentage: 90, + goalName: 'Complete IxDF Courses', + tasks: [ + 'Take a course on UX design fundamentals', + 'Learn about user research and usability testing', + 'Study interaction design principles', + 'Explore visual design and user interface (UI) principles', + 'Complete a course on prototyping and wireframing', + 'Learn about design thinking and problem-solving', + 'Study responsive web design principles', + ], + }, + ] + return ( + + {activeGoals.map((goal, index) => { + return ( + + {index + 1} + + + ) + })} + + ) +} diff --git a/src/pages/Goals/ActiveGoals/styles.ts b/src/pages/Goals/ActiveGoals/styles.ts new file mode 100644 index 0000000..7b38e69 --- /dev/null +++ b/src/pages/Goals/ActiveGoals/styles.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components' + +export const Container = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +` + +export const GoalWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` +export const GoalIndex = styled.h1` + text-align: right; + width: 20px; + line-height: 80%; + font-size: 2rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-style: italic; + color: ${(props) => props.theme['dark-900']}; + font-weight: 900; + margin-top: 0.5rem; +` diff --git a/src/pages/Goals/GoalCard/index.tsx b/src/pages/Goals/GoalCard/index.tsx index c2bff5b..b7013c2 100644 --- a/src/pages/Goals/GoalCard/index.tsx +++ b/src/pages/Goals/GoalCard/index.tsx @@ -1,67 +1,80 @@ import { GoalContainer, - GoalIndex, CardContainer, LabelRow, CardTitle, ProgressBar, - TaskCounterContainer, - TaskListContainer, + TaskDetails, + TasksContainer, TaskIndex, - Task, + TaskDescriptionWrapper, + TaskDescription, + StatusBadge, } from './styles' -import { CaretRight } from 'phosphor-react' -const goals = [ - { - name: 'Become Fluent in English', - tasks: [ - 'Do something', - 'Do something just like this', - 'Do something fnwoiefnwe foiwejfw oifjwe oijfwe ', - 'Do something foweijfwpoefpwoej', - 'Do something', - ], - }, - { - name: 'Become Fluent in English', - tasks: [ - 'Do something', - 'Do something', - 'Do something', - 'Do something', - 'Do something', - ], - }, -] +import { CheckCircle } from 'phosphor-react' + +interface GoalCardProps { + goal: { + goalName: string + tasks: Array + createdAt: Date + deadline: Date + hoursPerWeek: number + totalHoursSpent: number + progressPercentage: number + status: number + } +} + +export function GoalCard({ goal }: GoalCardProps) { + function isPastGoal(status: number) { + return status === 2 || status === 3 + } -export function GoalCard() { return ( - 1 - -

2 hours per week

-

up to 20/06/2024

- + {isPastGoal(goal.status) && ( + + +

Concluded

+ + )} + {!isPastGoal(goal.status) && ( + + {goal.hoursPerWeek} {goal.hoursPerWeek === 1 ? 'hour' : 'hours'} per + week +

+ up to {goal.deadline.toLocaleDateString('en-US')} +

+ + )}
- Become fluent in English - + {goal.goalName} +
- - - {goals[1].tasks.length} tasks - - {goals[0].tasks.map((task, index) => { - return ( - - {index + 1} - {task} - - ) - })} - {/* */} + + {goal.tasks.length} tasks + + {goal.tasks.map((task, index) => { + return ( + + {index + 1}. + {task} + + ) + })} + {/* */} + + ) diff --git a/src/pages/Goals/GoalCard/styles.ts b/src/pages/Goals/GoalCard/styles.ts index 777f7ad..58e0003 100644 --- a/src/pages/Goals/GoalCard/styles.ts +++ b/src/pages/Goals/GoalCard/styles.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' - +interface GoalCardProps { + progressPercentage: number +} export const GoalContainer = styled.div` width: 100%; display: flex; align-items: start; - gap: 2rem; - margin-top: 3rem; + gap: 1.25rem; button { width: 300px; @@ -29,27 +30,19 @@ export const GoalContainer = styled.div` } } ` -export const GoalIndex = styled.h1` - text-align: right; - line-height: 80%; - font-size: 3rem; - font-family: 'Barlow Semi Condensed', sans-serif; - font-style: italic; - color: ${(props) => props.theme['dark-900']}; - font-weight: 900; -` + export const CardContainer = styled.div` background-color: white; width: 100%; display: flex; - gap: 0.75rem; + gap: 0.5rem; flex-direction: column; - padding: 1.5rem; - border: solid 2px ${(props) => props.theme['gray-300']}; + padding: 1.25rem; + border: solid 1px ${(props) => props.theme['gray-300']}; border-radius: 9px; hr { - border-top: 1px solid ${(props) => props.theme['gray-300']}; + border-top: 1px solid ${(props) => props.theme['gray-150']}; width: 100%; } ` @@ -57,26 +50,27 @@ export const LabelRow = styled.div` width: 100%; display: flex; justify-content: space-between; - font-weight: 700; - font-size: 0.85rem; - color: ${(props) => props.theme['gray-500']}; + font-weight: 600; + font-size: 0.75rem; + color: ${(props) => props.theme['gray-700']}; ` export const CardTitle = styled.h1` color: ${(props) => props.theme['dark-900']}; - font-size: 1.05rem; + font-size: 1rem; font-weight: 800; ` -export const ProgressBar = styled.div` - height: 0.75rem; +export const ProgressBar = styled.div` + height: 0.5rem; background-color: ${(props) => props.theme['gray-200']}; border-radius: 9px; div { height: 100%; border-radius: 9px; - width: 70%; + width: ${(props) => + props.progressPercentage}%; /* Dynamic width based on progressPercentage */ background-color: ${(props) => props.theme['blue-500']}; } ` @@ -92,28 +86,62 @@ export const TaskCounterContainer = styled.div` color: ${(props) => props.theme['gray-300']}; } ` -export const TaskListContainer = styled.div` +export const TasksContainer = styled.div` width: 100%; display: flex; - align-items: center; - padding-left: 2rem; - gap: 1rem; - display: none; + flex-direction: column; + padding-top: 1rem; + gap: 0.25rem; +` + +export const TaskDetails = styled.details` + :hover { + cursor: pointer; + } + + summary { + margin-top: 0.25rem; + font-size: 0.75rem; + font-weight: 800; + color: ${(props) => props.theme['gray-700']}; + } +` +export const TaskDescriptionWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 0.5rem; ` export const TaskIndex = styled.p` font-family: 'Roboto Mono', monospace; + text-align: right; + width: 30px; + font-weight: bold; + letter-spacing: -0.1rem; +` + +export const TaskDescription = styled.p` font-size: 0.85rem; - display: flex; - justify-content: center; - color: white; - background-color: ${(props) => props.theme['dark-900']}; - width: 1.75rem; - height: 1.75rem; - border-radius: 100%; - line-height: 200%; + color: ${(props) => props.theme['gray-700']}; + font-weight: 500; + line-height: 1.5; ` + export const Task = styled.p` font-weight: 700; font-size: 0.85rem; color: ${(props) => props.theme['dark-900']}; ` + +export const StatusBadge = styled.div` + display: flex; + flex-direction: row; + gap: 0.25rem; + align-items: center; + color: ${(props) => props.theme['green-500']}; + font-size: 0.75rem; + font-weight: 800; + + p { + color: ${(props) => props.theme['green-700']}; + } +` diff --git a/src/pages/Goals/NewGoalForm/index.tsx b/src/pages/Goals/NewGoalForm/index.tsx new file mode 100644 index 0000000..59bf57a --- /dev/null +++ b/src/pages/Goals/NewGoalForm/index.tsx @@ -0,0 +1,186 @@ +import { Button } from '../../../components/Button' +import { Input } from '../../../components/Input' +import { + Container, + SuperHeader, + ColWrapper, + RowWrapper, + SuccessMessageContainer, + TaskInputWrapper, + Index, + StyledTrashIconButton, + TasksContainer, + TaskDisclaimerWrapper, + StyledCheckCircle, +} from './styles' +import { + FlagBanner, + Calendar, + Clock, + CheckSquareOffset, + Plus, + CheckCircle, +} from 'phosphor-react' + +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import { useState } from 'react' + +const NewGoalFormSchema = z.object({ + goalName: z.string().min(6).max(54), + deadline: z.coerce.date(), + hoursPerWeek: z.coerce.number().int().min(1).max(40), + tasks: z.string().min(5).max(40).array().nonempty().min(1), +}) + +type NewGoalFormData = z.infer + +export function NewGoalForm() { + const [output, setOutput] = useState('') + const [tasks, setTasks] = useState(['']) // Initial task input + + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + resolver: zodResolver(NewGoalFormSchema), + mode: 'onChange', + }) + + function saveNewGoal(data: unknown) { + setOutput(JSON.stringify(data, null, 2)) + console.log(errors) + } + + function logErrors() { + console.log(errors) + } + function addNewTask() { + setTasks((prevTasks) => [...prevTasks, '']) // Add an empty task + } + + function handleTaskKeyDown( + event: React.KeyboardEvent, + index: number, + ) { + if (event.key === 'Enter') { + event.preventDefault() + addNewTask() + + // Focus on the newly created input + const nextInputIndex = index + 1 + const nextInput = document.getElementById(`tasks[${nextInputIndex}]`) + if (nextInput) { + nextInput.focus() + } + } + } + + function removeTask(index: number) { + setTasks((prevTasks) => prevTasks.filter((_, i) => i !== index)) + } + + function SuccessMessage() { + return ( + + +

+ Get ready to crush it in 2 months with + 40 hours of focused work! +

+ + + + ) + } + + const today = new Date().toISOString().split('T')[0] + + return ( + + SET YOUR NEW GOAL + {/* Conditionally render the SuccessMessage */} + {output && }{' '} +
+ + } + {...register('goalName')} + errorMessage={errors.goalName?.message?.toString() ?? null} + /> + + } + {...register('deadline', { min: today })} + min={today} + errorMessage={errors.deadline?.message?.toString() ?? null} + /> + + ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault() + } + min={1} + max={40} + placeholder="Hours per week" + icon={} + {...register('hoursPerWeek')} + errorMessage={errors.hoursPerWeek?.message?.toString() ?? null} + /> + + +
+ + +

Now add tasks to conquer the goal

+

{tasks.length}

+ + + {tasks.map((task, index) => ( + + {index + 1} + handleTaskKeyDown(event, index)} + icon={} + id={`tasks[${index}]`} + errorMessage={errors.tasks?.message?.toString() ?? null} + /> + + removeTask(index)} + /> + + ))} + + + + +
+ {/* Skip Onboarding */} + + ) +} diff --git a/src/pages/Goals/NewGoalForm/styles.ts b/src/pages/Goals/NewGoalForm/styles.ts new file mode 100644 index 0000000..a5089f9 --- /dev/null +++ b/src/pages/Goals/NewGoalForm/styles.ts @@ -0,0 +1,101 @@ +import { TrashSimple, CheckCircle } from 'phosphor-react' +import styled from 'styled-components' +export const Container = styled.div` + min-width: 500px; + hr { + margin-bottom: 2rem; + border: 1px solid ${(props) => props.theme['gray-200']}; + } +` +export const SuperHeader = styled.h1` + text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 900; + font-size: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; +` + +export const ColWrapper = styled.p` + width: 100%; + color: ${(props) => props.theme['dark-900']}; + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 2rem; +` +export const RowWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +` + +export const Skip = styled.p` + margin: 1rem 0; + text-align: center; + font-weight: 700; + :hover { + cursor: pointer; + text-decoration: underline; + color: ${(props) => props.theme['yellow-600']}; + } +` + +export const SuccessMessageContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + text-align: center; + padding: 0.5rem; + margin-bottom: 2rem; + p { + font-size: 0.85rem; + font-weight: 500; + span { + font-weight: 900; + } + } +` +export const TasksContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; + max-height: 200px; + //; background-color: red; + overflow: scroll; +` +export const TaskInputWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; +` +export const Index = styled.div` + text-align: right; + width: 14px; + font-family: 'Barlow Semi Condensed', sans-serif; + font-size: 1rem; +` + +export const StyledTrashIconButton = styled(TrashSimple)` + cursor: pointer; + color: ${(props) => props.theme['gray-500']}; + + :hover { + color: ${(props) => props.theme['red-500']}; + } +` + +export const TaskDisclaimerWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +` + +export const StyledCheckCircle = styled(CheckCircle)` + color: ${(props) => props.theme['green-500']}; +` diff --git a/src/pages/Goals/PastGoals/index.tsx b/src/pages/Goals/PastGoals/index.tsx new file mode 100644 index 0000000..5488f03 --- /dev/null +++ b/src/pages/Goals/PastGoals/index.tsx @@ -0,0 +1,50 @@ +import { GoalCard } from '../GoalCard' +import { Container } from './styles' + +export function PastGoals() { + const pastGoals = [ + { + createdAt: new Date('2024-03-10T14:45:00'), + deadline: new Date('2024-10-15T23:59:59'), + status: 2, + hoursPerWeek: 1, + totalHoursSpent: 12, + progressPercentage: 20, + goalName: 'Read the Full Old Testament', + tasks: [ + 'Read Genesis and Exodus', + 'Study the Psalms and Proverbs', + 'Read the historical books (Joshua, Judges, etc.)', + 'Explore the major prophets (Isaiah, Jeremiah, etc.)', + 'Read the minor prophets (Hosea, Joel, etc.)', + 'Study the Gospels (Matthew, Mark, Luke, John)', + 'Read the Acts of the Apostles', + ], + }, + { + createdAt: new Date('2024-04-05T17:15:00'), + deadline: new Date('2024-12-31T23:59:59'), + status: 3, + hoursPerWeek: 2, + totalHoursSpent: 12, + progressPercentage: 90, + goalName: 'Complete IxDF Courses', + tasks: [ + 'Take a course on UX design fundamentals', + 'Learn about user research and usability testing', + 'Study interaction design principles', + 'Explore visual design and user interface (UI) principles', + 'Complete a course on prototyping and wireframing', + 'Learn about design thinking and problem-solving', + 'Study responsive web design principles', + ], + }, + ] + return ( + + {pastGoals.map((goal, index) => { + return + })} + + ) +} diff --git a/src/pages/Goals/PastGoals/styles.ts b/src/pages/Goals/PastGoals/styles.ts new file mode 100644 index 0000000..0526b7f --- /dev/null +++ b/src/pages/Goals/PastGoals/styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const Container = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +` diff --git a/src/pages/Goals/index.tsx b/src/pages/Goals/index.tsx index 149deb6..5722267 100644 --- a/src/pages/Goals/index.tsx +++ b/src/pages/Goals/index.tsx @@ -1,23 +1,44 @@ -import { NavLink } from 'react-router-dom' +import { useState } from 'react' +import { NavLink, Outlet } from 'react-router-dom' import { GoalsContainer } from './styles' -import { GoalCard } from './GoalCard/index' import { Card } from '../../components/Card' +import { Plus } from 'phosphor-react' +import { Button } from '../../components/Button' +import { Modal } from './../../components/Modal/index' +import { NewGoalForm } from './NewGoalForm/index' export function Goals() { + const [isModalOpen, setIsModalOpen] = useState(false) + + const openModal = () => { + setIsModalOpen(true) + } + + const closeModal = () => { + setIsModalOpen(false) + } return ( <> - + + + + diff --git a/src/pages/Goals/styles.ts b/src/pages/Goals/styles.ts index 05fc0d5..256f496 100644 --- a/src/pages/Goals/styles.ts +++ b/src/pages/Goals/styles.ts @@ -8,48 +8,31 @@ export const GoalsContainer = styled.div` width: 100%; nav { + width: 100%; display: flex; gap: 0.5rem; - + justify-content: space-between; div { display: flex; - } - - a { - text-decoration: none; - padding: 1rem; - font-weight: 800; - font-size: 1rem; - display: flex; - justify-content: center; - align-items: center; - color: ${(props) => props.theme['gray-500']}; - - &:hover { - color: ${(props) => props.theme['dark-900']}; - } - - &.active { - color: ${(props) => props.theme['dark-900']}; - border-bottom: 0.25rem solid ${(props) => props.theme['yellow-600']}; - } - } - - button { - border: 0; - border-radius: 8px; - font-size: 0.85rem; - font-weight: 800; - font-family: 'Plus Jakarta Sans', sans-serif; - cursor: pointer; - color: ${(props) => props.theme.white}; - background-color: ${(props) => props.theme['yellow-500']}; - color: ${(props) => props.theme['dark-900']}; - padding: 0.5rem 1.5rem; - - :hover { - background-color: ${(props) => props.theme['yellow-600']}; - cursor: pointer; + a { + text-decoration: none; + padding: 0.75rem; + font-weight: 800; + font-size: 1rem; + display: flex; + justify-content: center; + align-items: center; + color: ${(props) => props.theme['gray-500']}; + border-bottom: 0.25rem solid ${(props) => props.theme.white}; + + &:hover { + color: ${(props) => props.theme['dark-900']}; + } + + &.active { + color: ${(props) => props.theme['dark-900']}; + border-bottom: 0.25rem solid ${(props) => props.theme['yellow-600']}; + } } } } diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx index 38b1b42..e1a670f 100644 --- a/src/pages/History/index.tsx +++ b/src/pages/History/index.tsx @@ -11,6 +11,7 @@ import { import { useNavigate } from 'react-router-dom' import { CheckCircle, XCircle, WarningCircle } from 'phosphor-react' import ChimpMeditating from '../../../public/chimp_meditating.svg' +import { Button } from '../../components/Button' export function History() { const { cycles } = useContext(CyclesContext) @@ -30,7 +31,9 @@ export function History() { I will not lose my temper with this person who has not started any tasks yet. I will not...

- + ) : ( diff --git a/src/pages/Onboarding/StepOne/index.tsx b/src/pages/Onboarding/StepOne/index.tsx index 7553225..ca83d75 100644 --- a/src/pages/Onboarding/StepOne/index.tsx +++ b/src/pages/Onboarding/StepOne/index.tsx @@ -1,5 +1,6 @@ import { Button } from '../../../components/Button' import { Input } from '../../../components/Input' +import { DividerWithText } from '../../Auth/Login/styles' import { SuperHeader, Subtitle, @@ -17,7 +18,7 @@ import { Plus, } from 'phosphor-react' -export function StepOne() { +export function NewGoalForm() { return ( <> SET THE GOAL @@ -28,16 +29,25 @@ export function StepOne() { (you’ll be able to set more goals later) } /> + Set a date dealine and } /> + ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault() + } + min={1} + max={40} + placeholder="Hours per week" icon={} /> @@ -50,20 +60,12 @@ export function StepOne() { placeholder="Task" icon={} /> - } - /> - } - /> - Skip + Skip Onboarding ) diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx index 7e74a38..5007f1b 100644 --- a/src/pages/Onboarding/index.tsx +++ b/src/pages/Onboarding/index.tsx @@ -1,3 +1,4 @@ +import React, { useState, useEffect } from 'react' import { OnboardingContainer, Card, @@ -7,24 +8,47 @@ import { ProgressLabel, } from './styles' -import { StepOne } from './StepOne/index' +import { NewGoalForm } from '../Goals/NewGoalForm/index' import { StepTwo } from './StepTwo/index' import { StepThree } from './StepThree/index' + export function Onboarding() { + const [currentStep, setCurrentStep] = useState(1) + + const steps = [NewGoalForm, StepTwo, StepThree] + + useEffect(() => { + // Add the 'completed' class after the component mounts to trigger the animation + const stepProgressElements = document.querySelectorAll('.step-progress') + stepProgressElements.forEach((element, index) => { + if (index + 1 <= currentStep) { + element.classList.add('completed') + } + }) + }, [currentStep]) + + const handleStepChange = (step: React.SetStateAction) => { + setCurrentStep(step) + } + return ( - - - + {steps.map((Step, index) => ( + handleStepChange(index + 1)} + > + ))} - 1/2 + {`${currentStep}/${steps.length}`} - {/* */} - {/* */} - + {React.createElement(steps[currentStep - 1])} ) diff --git a/src/pages/Onboarding/styles.ts b/src/pages/Onboarding/styles.ts index c43369b..f620529 100644 --- a/src/pages/Onboarding/styles.ts +++ b/src/pages/Onboarding/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components' +import styled, { keyframes } from 'styled-components' export const OnboardingContainer = styled.div` background-color: ${(props) => props.theme['gray-100']}; @@ -61,13 +61,38 @@ export const ProgressWrapper = styled.div` gap: 0.5rem; margin-bottom: 0.5rem; ` + +const progressAnimation = keyframes` + 0% { + width: 0; + } + 100% { + width: 100%; + } +` + export const StepProgress = styled.div` height: 0.35rem; width: 100%; border-radius: 30px; - background-color: ${(props) => props.theme['blue-500']}; -` + overflow: hidden; + position: relative; + background-color: ${(props) => props.theme['gray-300']}; + + &::before { + content: ''; + display: block; + height: 100%; + width: 100%; + background-color: ${(props) => props.theme['gray-300']}; + animation: ${progressAnimation} 1s forwards; + } + &.completed::before { + width: 100%; + background-color: ${(props) => props.theme['blue-500']}; + } +` export const ProgressLabel = styled.div` color: ${(props) => props.theme['gray-500']}; text-align: right; diff --git a/src/pages/Reports/Consistency/index.tsx b/src/pages/Reports/Consistency/index.tsx index eddf312..1b75621 100644 --- a/src/pages/Reports/Consistency/index.tsx +++ b/src/pages/Reports/Consistency/index.tsx @@ -17,10 +17,10 @@ export function Consistency() { Consistency - Jan - Fev - Mar + 100 days in sight - {[...Array(90)].map((_, index) => ( + {[...Array(100)].map((_, index) => (
props.past diff --git a/src/pages/Reports/GoalRanking/index.tsx b/src/pages/Reports/GoalRanking/index.tsx index a929f88..d72f538 100644 --- a/src/pages/Reports/GoalRanking/index.tsx +++ b/src/pages/Reports/GoalRanking/index.tsx @@ -8,75 +8,66 @@ import { ListContainer, RankingNumber, } from './styles' +import { DomainProgressBar } from './../../../domain-components/ProgressBar/index' +import { differenceInDays, formatDistanceToNow } from 'date-fns' +const goalRanking = [ + { + id: 121, + goalName: 'Mobile Project', + totalHoursGoal: 40, + hoursCompleted: 20, + deadlineDate: new Date('2024-12-31T23:59:59'), + }, + { + id: 122, + goalName: 'Learn French', + totalHoursGoal: 80, + hoursCompleted: 20, + deadlineDate: new Date('2024-08-01T23:59:59'), + }, + { + id: 123, + goalName: 'Read Bible', + totalHoursGoal: 120, + hoursCompleted: 10, + deadlineDate: new Date('2024-03-01T23:59:59'), + }, + { + id: 124, + goalName: 'UX Courses in IxDF', + totalHoursGoal: 80, + hoursCompleted: 20, + deadlineDate: new Date('2024-12-31T23:59:59'), + }, +] + +function getTimeToComplete(dealineDate: Date) { + const formattedResult = formatDistanceToNow(dealineDate, { addSuffix: true }) + + return formattedResult +} export function GoalRanking() { return ( Goal Ranking - - #1 - - -

Learn English

-

12 days left

- - -
- - - - - - #1 - - -

Learn English

-

12 days left

- - -
- - - - - - #1 - - -

Learn English

-

12 days left

- - -
- - - - - - #2 - - -

Learn English

-

12 days left

- - -
- - - - - #3 - - -

Learn English

-

12 days left

- - -
- - - + {goalRanking.map((goal, index) => { + return ( + + #{index + 1} + + +

{goal.goalName}

+

{getTimeToComplete(goal.deadlineDate)}

+ + + + + ) + })} ) diff --git a/src/pages/Reports/TaskHistory/index.tsx b/src/pages/Reports/TaskHistory/index.tsx index f2b35d8..d4f2a72 100644 --- a/src/pages/Reports/TaskHistory/index.tsx +++ b/src/pages/Reports/TaskHistory/index.tsx @@ -17,11 +17,10 @@ export function TaskHistory() { 20 min ago

Read a book in English

+ RelatedGoal 30 min - {/* - */} ) } diff --git a/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx b/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx index 03eff51..fddb5b1 100644 --- a/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx +++ b/src/pages/Timer/components/ConsistencyOfTheWeek/index.tsx @@ -1,49 +1,130 @@ import { ConsistencyContainer, - LabelRow, + SummaryContainer, + DateSummary, DayBoxContainer, DayBox, DayLabel, } from './styles' -const daysOfWeek = [ - 'MONDAY', - 'TUESDAY', - 'WEDNESDAY', - 'THURSDAY', - 'FRIDAY', - 'SATURDAY', - 'SUNDAY', -] +const consistencyOfTheWeek = { + year: 2023, + weekOfTheYear: 22, + dayOfTheYear: 235, + todayDate: '2024-01-26T00:00:00.000Z', + weekConsistency: [ + { + day: 1, + name: 'Monday', + date: '2024-01-22T00:00:00.000Z', + intensity: 0, + totalHoursInTasks: 2, + expectedHours: 4, + }, + { + day: 2, + name: 'Tuesday', + date: '2024-01-22T00:00:00.000Z', + totalHoursInTasks: 2, + intensity: 1, + expectedHours: 4, + }, + { + day: 3, + name: 'Wednesday', + date: '2024-01-23T00:00:00.000Z', + totalHoursInTasks: 2, + intensity: 3, + totalTaskCycles: 2, + totalGoals: 1, + expectedHours: 4, + }, + { + day: 4, + name: 'Thursday', + date: '2024-01-24T00:00:00.000Z', + totalHoursInTasks: 2, + totalTaskCycles: 2, + intensity: 2, + totalGoals: 1, + expectedHours: 4, + }, + { + day: 5, + name: 'Friday', + date: '2024-01-26T00:00:00.000Z', + totalHoursInTasks: 2, + intensity: 2, + totalTaskCycles: 2, + totalGoals: 1, + expectedHours: 4, + }, + { + day: 6, + name: 'Saturday', + date: '2024-01-27T00:00:00.000Z', + intensity: 0, + totalHoursInTasks: 2, + totalTaskCycles: 2, + totalGoals: 1, + expectedHours: 4, + }, + { + day: 7, + name: 'Sunday', + date: '2024-01-28T00:00:00.000Z', + intensity: 2, + totalHoursInTasks: 2, + totalTaskCycles: 2, + totalGoals: 1, + expectedHours: 4, + }, + ], +} export function ConsistencyOfTheWeek() { - const today = new Date() - const currentDay = today.getDate() - const isPastDay = (day: number) => day < currentDay + function formattedDate(date: string) { + const ddate = new Date(date) + return new Intl.DateTimeFormat('en-US', { + day: 'numeric', + month: 'long', + }).format(ddate) + } + + function isFutureDay(date: string) { + return new Date(consistencyOfTheWeek.todayDate) < new Date(date) + } + + function isPastDay(date: string) { + return new Date(consistencyOfTheWeek.todayDate) > new Date(date) + } + + function getDayStatus(date: string): 'past' | 'current' | 'future' { + const isPast = isPastDay(date) + const isFuture = isFutureDay(date) + + if (isPast) return 'past' + if (isFuture) return 'future' + else return 'current' + } return ( - -

Week 2

- - -

16th November

-

2023

- - + + + {/*

Day {consistencyOfTheWeek.dayOfTheYear}

*/} +

Week {consistencyOfTheWeek.weekOfTheYear}

+ + +

{formattedDate(consistencyOfTheWeek.todayDate)}

+

{consistencyOfTheWeek.year}

+ + - {daysOfWeek.map((day, index) => ( + {consistencyOfTheWeek.weekConsistency.map((day, index) => (
- - - {day} + + + {day.name}
))} diff --git a/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts index 749050e..ab3a8ba 100644 --- a/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts +++ b/src/pages/Timer/components/ConsistencyOfTheWeek/styles.ts @@ -1,21 +1,31 @@ import styled from 'styled-components' +interface ModalConsistencyProps { + status: 'current' | 'past' | 'future' + intensity: number +} + export const ConsistencyContainer = styled.div` width: 100%; display: flex; flex-direction: column; gap: 0.25rem; - - p { - font-size: 0.8rem; - color: ${(props) => props.theme['gray-500']}; - } ` -export const LabelRow = styled.div` +export const LabelRow = styled.div`` + +export const SummaryContainer = styled.div` width: 100%; display: flex; justify-content: space-between; ` +export const DateSummary = styled.div` + display: flex; + flex-direction: column; + font-size: 0.75rem; + &:last-child { + text-align: right; + } +` export const DayBoxContainer = styled.div` margin-top: 1rem; @@ -24,45 +34,46 @@ export const DayBoxContainer = styled.div` justify-items: center; ` -export const DayBox = styled.div<{ - past: boolean - current: boolean - intensity: number -}>` +export const DayBox = styled.div` width: 3rem; /* Set your desired width */ aspect-ratio: 1; box-sizing: content-box; border: 3px solid ${(props) => - props.past + props.status === 'past' ? props.theme['yellow-600'] - : props.current + : props.status === 'current' ? props.theme['dark-900'] - : props.theme['gray-200']}; /* Border for past days */ + : props.theme['gray-300']}; /* Border for past days */ border-radius: 7px; background-color: ${(props) => - props.current + props.status === 'current' ? props.theme.white - : props.past + : props.status === 'past' && props.intensity === 0 + ? props.theme.white + : props.status === 'past' && props.intensity === 1 + ? props.theme['yellow-300'] + : props.status === 'past' && props.intensity === 2 ? props.theme['yellow-400'] - : props.theme['gray-200']}; + : props.status === 'past' && props.intensity === 3 + ? props.theme['yellow-500'] + : props.status === 'past' && props.intensity >= 4 + ? props.theme['yellow-600'] + : props.theme['gray-100']}; margin: auto; ` -export const DayLabel = styled.h1<{ - past: boolean - current: boolean - intensity: number -}>` +export const DayLabel = styled.h1` margin-top: 1rem; font-family: 'Barlow Semi Condensed', sans-serif; + text-transform: uppercase; font-weight: 600; font-size: 1rem; text-align: center; color: ${(props) => - props.current + props.status === 'current' + ? props.theme['dark-900'] + : props.status === 'past' ? props.theme['dark-900'] - : props.past - ? props.theme['dark-800'] - : props.theme['gray-300']}; + : props.theme['gray-500']}; ` diff --git a/src/pages/Timer/components/NewTaskCycleForm/index.tsx b/src/pages/Timer/components/NewTaskCycleForm/index.tsx new file mode 100644 index 0000000..1057fb2 --- /dev/null +++ b/src/pages/Timer/components/NewTaskCycleForm/index.tsx @@ -0,0 +1,219 @@ +import { Button } from '../../../../components/Button' +import Select from '../../../../components/Select' +import { Container, NewCycleCTA, MinutesOptionsContainer } from './styles' +import { Radio } from './../../../../components/RadioButton/index' +import { useState } from 'react' + +type Task = { + id: string + description: string +} + +type Goal = { + id: string + createdAt: Date // Adjust the type based on your actual data type + deadline: Date // Adjust the type based on your actual data type + hoursPerWeek: number + status: number + totalHoursSpent: number + progressPercentage: number + goalName: string + tasks: Array +} + +const activeGoals = [ + { + id: 'gbrbgerb', + createdAt: new Date('2024-04-05T17:15:00'), + deadline: new Date('2024-12-31T23:59:59'), + hoursPerWeek: 2, + status: 1, + totalHoursSpent: 12, + progressPercentage: 90, + goalName: 'Complete IxDF Courses', + tasks: [ + { + id: 'gbgergerbgerb', + description: 'Take a course on UX design fundamentals', + }, + { + id: 'gbrrwebgerb', + description: 'Learn about user research and usability testing', + }, + { + id: 'gbrbgnherb', + description: 'Study interaction design principles', + }, + { + id: 'gbrqewrgerb', + description: 'Explore visual design and user interface (UI) principles', + }, + { + id: 'gbrghfgbgerb', + description: 'Complete a course on prototyping and wireframing', + }, + { + id: 'gbrbtergerb', + description: 'Learn about design thinking and problem-solving', + }, + { + id: 'gbrbgergregerb', + description: 'Study responsive web design principles', + }, + ], + }, + { + id: 'newGoalId', + createdAt: new Date(), + deadline: new Date('2024-12-31T23:59:59'), + hoursPerWeek: 3, + status: 0, // Assuming 0 represents a new goal with no progress + totalHoursSpent: 0, + progressPercentage: 0, + goalName: 'Learn React and Redux', // Your new goal name + tasks: [ + { + id: 'newTaskId1', + description: 'Complete a React tutorial', + }, + { + id: 'newTaskId2', + description: 'Build a simple React application', + }, + { + id: 'newTaskId3', + description: 'Learn Redux basics', + }, + ], + }, +] +export function NewTaskCycleForm() { + const minutesAmountOptions = [ + { + id: 1, + amountInMinutes: 15, + }, + { + id: 2, + amountInMinutes: 30, + }, + { + id: 3, + amountInMinutes: 40, + }, + { + id: 4, + amountInMinutes: 60, + }, + { + id: 0, + amountInMinutes: undefined, + }, + ] + + const [selectedGoal, setSelectedGoal] = useState(activeGoals[0]) + + const [selectedTask, setSelectedTask] = useState( + activeGoals[0].tasks[0], + ) + + const [selectedMinutesAmount, setSelectedMinutesAmount] = useState< + number | null + >(null) + + function handleGoalSelect(goal: Goal) { + setSelectedGoal(goal) + setSelectedTask(goal.tasks[0]) // Reset selected task when a new goal is selected + console.log('Selected goal:', goal) + } + + function handleTaskSelect(task: Task) { + setSelectedTask(task) + console.log('Selected task:', task) + } + + function handleMinutesSelect(amountInMinutes: number | undefined) { + if (amountInMinutes !== undefined) { + setSelectedMinutesAmount(amountInMinutes) + console.log('Selected minutes:', amountInMinutes) + } else { + // Handle the case when amountInMinutes is undefined + // For example, you can set a default value or show an error message + console.error('Error: Selected minutes is undefined') + } + } + + function isValid() { + return ( + selectedGoal !== null && + selectedTask !== null && + selectedMinutesAmount !== null + ) + } + + function handleSumbmitNewTaskCycle() { + const requestBody = { + // userId, + startDate: new Date(), + goalId: selectedGoal.id, + taskId: selectedTask.id, + minutesAmount: selectedMinutesAmount, + } + console.log(requestBody) + startNewCycle(requestBody) + } + + async function startNewCycle(requestBody) { + await startNewCycleInContext(requestBody) + } + return ( + + Time to Put Your Butt to Work! + {/*

{JSON.stringify(selectedGoal)}

+

{JSON.stringify(selectedTask)}

+

{JSON.stringify(selectedMinutesAmount)}

*/} + task.description} + onSelect={handleTaskSelect} + initialValue={selectedTask} + /> + )} + + + {minutesAmountOptions.map((option, index) => ( + handleMinutesSelect(option.amountInMinutes)} + /> + ))} + +

*Work for as long as you need, set to Done when you finish

+ + + ) +} diff --git a/src/pages/Timer/components/NewTaskCycleForm/styles.ts b/src/pages/Timer/components/NewTaskCycleForm/styles.ts new file mode 100644 index 0000000..7f4cd24 --- /dev/null +++ b/src/pages/Timer/components/NewTaskCycleForm/styles.ts @@ -0,0 +1,24 @@ +import styled from 'styled-components' + +export const Container = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + text-align: center; +` + +export const NewCycleCTA = styled.h1` + //text-transform: uppercase; + text-align: center; + color: ${(props) => props.theme['dark-900']}; + font-style: italic; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 800; + font-size: 1.5rem; +` + +export const MinutesOptionsContainer = styled.div` + display: flex; + gap: 1rem; + justify-content: center; +` diff --git a/src/pages/Timer/components/ProgressOfTheDay/index.tsx b/src/pages/Timer/components/ProgressOfTheDay/index.tsx index 5ec0b08..5c48f58 100644 --- a/src/pages/Timer/components/ProgressOfTheDay/index.tsx +++ b/src/pages/Timer/components/ProgressOfTheDay/index.tsx @@ -1,19 +1,22 @@ -import { - ProgressBarContainer, - ProgressBar, - ProgressLabelContainer, -} from './styles' +import { DomainProgressBar } from '../../../../domain-components/ProgressBar' +import { ProgressBarContainer, ProgressLabelContainer } from './styles' -export function ProgressOfTheDay() { +interface ProgressOftheDay { + goalOfTheDay: number + hoursDedicated: number +} +export function ProgressOfTheDay({ + goalOfTheDay, + hoursDedicated, +}: ProgressOftheDay) { + const progressOfTheDay = (hoursDedicated / goalOfTheDay) * 100 return (

{`Today's Goal`}

-

2 hours in tasks

+

{goalOfTheDay} Hours in Tasks

 - -
- + ) } diff --git a/src/pages/Timer/index.tsx b/src/pages/Timer/index.tsx index 5928421..f1c9efe 100644 --- a/src/pages/Timer/index.tsx +++ b/src/pages/Timer/index.tsx @@ -10,7 +10,8 @@ import { CyclesContext } from '../../contexts/CyclesContext' import { ProgressOfTheDay } from './components/ProgressOfTheDay/index' import { ConsistencyOfTheWeek } from './components/ConsistencyOfTheWeek/index' import { Card } from '../../components/Card' -import { Button } from '../../components/Button' +// import { Button } from '../../components/Button' +import { NewTaskCycleForm } from './components/NewTaskCycleForm/index' const newCycleFormValidationSchema = zod.object({ task: zod.string().min(1, 'Write the task'), @@ -48,23 +49,12 @@ export function Timer() { - +
- -

Click the button to choose a task to work on

-
- - {/* */} - - - {activeCycle ? ( - - ) : ( - - )} - -
+ + + ) diff --git a/src/pages/UserSettings/components/AccountInfo/index.tsx b/src/pages/UserSettings/components/AccountInfo/index.tsx index b6eaf3c..0e6e480 100644 --- a/src/pages/UserSettings/components/AccountInfo/index.tsx +++ b/src/pages/UserSettings/components/AccountInfo/index.tsx @@ -1,10 +1,27 @@ -import { Card, CardTitle, SaveButton } from './styles' +import { IdentificationBadge, At } from 'phosphor-react' +import { Input } from '../../../../components/Input' +import { Card, CardTitle, InputsWrapper, SaveButton } from './styles' export function AccountInfo() { return ( Account info - Save + + } + > + } + > + + Save ) } diff --git a/src/pages/UserSettings/components/AccountInfo/styles.tsx b/src/pages/UserSettings/components/AccountInfo/styles.tsx index a63c359..8b15cd1 100644 --- a/src/pages/UserSettings/components/AccountInfo/styles.tsx +++ b/src/pages/UserSettings/components/AccountInfo/styles.tsx @@ -16,7 +16,11 @@ export const CardTitle = styled.h1` font-weight: 800; margin-bottom: 2rem; ` - +export const InputsWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 0.5rem; +` export const SaveButton = styled.button` align-self: flex-end; border: 0; diff --git a/src/pages/UserSettings/components/CancelAccount/index.tsx b/src/pages/UserSettings/components/CancelAccount/index.tsx index 5de92f0..cf4dbc4 100644 --- a/src/pages/UserSettings/components/CancelAccount/index.tsx +++ b/src/pages/UserSettings/components/CancelAccount/index.tsx @@ -1,3 +1,5 @@ +import { TextArea } from '../../../../components/Textarea' +import { CheckBox } from './../../../../components/Checkbox/index' import { Card, CardTitle, @@ -8,32 +10,41 @@ import { Container, } from './styles' -export function CancelAccount() { +interface CancelAccountProps { + onCancelClick: () => void // Assuming onCancelClick is a function with no parameters +} +export function CancelAccount({ onCancelClick }: CancelAccountProps) { return (
Cancel Account - Tell Chimp why you don’t wanna stick with it. -

It does not help me

-

It does not help me

-

It does not help me

-

It does not help me

+ {`Changing paths? Let us know why Chimp isn't swinging your way:`} + + + + - Vent your insatisfaction with Chimptok - + + {`Feel free to unload more details in the space below. We're all + ears:`} + +