minor fixes in design

.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,14 @@
+apple-touch-icon.png,1692741950000,6c2775039868c0880a0f0f7ea2f96d638fce974684a1c871f821cdd565655fe0
+android-chrome-192x192.png,1692741950000,e3d1ebe94804b1d898f9d6d7ca08ae5095e0720cf213a5cfddc002402bc13f5a
+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
+icon.png,1692741950000,e3d1ebe94804b1d898f9d6d7ca08ae5095e0720cf213a5cfddc002402bc13f5a
+assets/index-8cbd223c.js,1692740441727,1e5dd08ecfc7e5247532eff59c0bb8c1b25c303d4e711fdc1ed6d273f26a7984

index.html

@@ -14,7 +14,7 @@
     <link rel="manifest" href="/site.webmanifest">
 
     <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&family=Roboto+Mono:wght@700&family=Roboto:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Mono:wght@700&family=Roboto:wght@400;700&display=swap"
       rel="stylesheet"
     />
 

src/@types/styles.d.ts

@@ -3,6 +3,7 @@ import { defaultTheme } from '../styles/themes/default'
 
 type ThemeType = typeof defaultTheme
 
+// intelisense will be able to show my theme types from this file.
 declare module 'styled-components' {
   export interface DefaultTheme extends ThemeType {}
 }

src/App.css

@@ -1,42 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -14,8 +14,9 @@ export function App() {
           <Router />
         </CyclesContextProvider>
       </BrowserRouter>
-
       <GlobalStyle />
     </ThemeProvider>
   )
 }
+
+// switch default with light using state change (button)

src/components/Button.styles.ts

@@ -20,7 +20,7 @@ export const ButtonContainer = styled.button<ButtonContainerProps>`
   border: 0;
   margin: 8px;
 
-  background-color: ${(props) => props.theme['green-500']};
+  background-color: ${(props) => props.theme.white};
   color: ${(props) => props.theme.white};
   /* ${(props) =>
     css`

src/components/Header/index.tsx

@@ -5,7 +5,11 @@ import { NavLink } from 'react-router-dom'
 export function Header() {
   return (
     <HeaderContainer>
-      <img src={logo} alt="Beautiful Red Apple" className="logo" />
+      <img
+        src={logo}
+        alt="Coolest Chimp logo smiling to you"
+        className="logo"
+      />
       <nav>
         <NavLink to="/" title="Timer">
           <Timer size={24} />

src/components/Header/styles.ts

@@ -17,17 +17,18 @@ export const HeaderContainer = styled.header`
       justify-content: center;
       align-items: center;
 
-      color: ${(props) => props.theme['gray-100']};
+      color: ${(props) => props.theme['gray-500']};
 
       border-top: 3px solid transparent;
       border-bottom: 3px solid transparent;
 
       &:hover {
-        border-bottom: 3px solid ${(props) => props.theme['green-500']};
+        color: ${(props) => props.theme['green-500']};
       }
 
       &.active {
         color: ${(props) => props.theme['green-500']};
+        border-bottom: 3px solid ${(props) => props.theme['green-500']};
       }
     }
   }

src/index.css

@@ -4,7 +4,7 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  color: var(--green);
   background-color: #242424;
 
   font-synthesis: none;
@@ -32,24 +32,26 @@ body {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: 3.2rem;
   line-height: 1.1;
 }
 
 button {
   border-radius: 8px;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+  padding: 0.6rem 1.2rem;
+  font-size: 1rem;
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;

src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './App'
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />

src/pages/History/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { formatDistanceToNow } from 'date-fns'
-import ptBR from 'date-fns/locale/pt-BR'
+import enUS from 'date-fns/locale/en-US'
 import { CyclesContext } from '../../contexts/CyclesContext'
 import { HistoryContainer, HistoryList, Status } from './styles'
 
@@ -9,41 +9,41 @@ export function History() {
 
   return (
     <HistoryContainer>
-      <h1>Projects history</h1>
+      <h1>History</h1>
 
       <HistoryList>
         <table>
           <thead>
             <tr>
-              <th>Tarefa</th>
-              <th>Duração</th>
-              <th>Duração</th>
+              <th>Task</th>
+              <th>Duration</th>
+              <th>Date</th>
               <th>Status</th>
             </tr>
           </thead>
           <tbody>
             {cycles.map((cycle) => {
               return (
                 <tr key={cycle.id}>
-                  <td>{cycle.task}</td>
-                  <td>{cycle.minutesAmount} minutos</td>
+                  <td className="task">{cycle.task}</td>
+                  <td>{cycle.minutesAmount} minutes</td>
                   <td>
                     {formatDistanceToNow(new Date(cycle.startDate), {
                       addSuffix: true,
-                      locale: ptBR,
+                      locale: enUS,
                     })}
                   </td>
                   <td>
                     {cycle.finishedDate && (
-                      <Status statusColor="green">Concluído</Status>
+                      <Status statusColor="green">Concluded</Status>
                     )}
 
                     {cycle.interruptedDate && (
-                      <Status statusColor="red">Interrompido</Status>
+                      <Status statusColor="red">Interrupted</Status>
                     )}
 
                     {!cycle.finishedDate && !cycle.interruptedDate && (
-                      <Status statusColor="yellow">Em andamento</Status>
+                      <Status statusColor="yellow">Ongoing</Status>
                     )}
                   </td>
                 </tr>

src/pages/History/styles.ts

@@ -22,10 +22,10 @@ export const HistoryList = styled.div`
     min-width: 600px;
 
     th {
-      background-color: ${(props) => props.theme['gray-600']};
+      background-color: ${(props) => props.theme['gray-700']};
       padding: 1rem;
       text-align: left;
-      color: ${(props) => props.theme['gray-100']};
+      color: ${(props) => props.theme.white};
       font-size: 0.875rem;
       line-height: 1.6rem;
 
@@ -48,6 +48,7 @@ export const HistoryList = styled.div`
       &:first-child {
         width: 50%;
         padding-left: 1.5rem;
+        font-weight: bold;
       }
       &:last-child {
         padding-right: 1.5rem;

src/pages/Home/components/NewCycleForm/index.tsx

@@ -18,13 +18,6 @@ export function NewCycleForm() {
         {...register('task')}
       />
 
-      <datalist id="task-suggestions">
-        <option value="Projeto 1" />
-        <option value="Projeto 2" />
-        <option value="Projeto 3" />
-        <option value="Banana" />
-      </datalist>
-
       <label htmlFor="minutesAmount">for</label>
       <MinutesAmountInput
         type="number"

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

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 const BaseInput = styled.input`
   background: transparent;
-  color: ${(props) => props.theme['green-300']};
+  color: ${(props) => props.theme['green-500']};
   height: 2.5rem;
   border: 0;
   border-bottom: 2px solid ${(props) => props.theme['gray-500']};
@@ -40,4 +40,12 @@ export const TaskInput = styled(BaseInput)`
 export const MinutesAmountInput = styled(BaseInput)`
   text-align: center;
   width: 4rem;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 `

src/pages/Home/index.tsx

@@ -16,7 +16,7 @@ import { Countdown } from './components/Countdown'
 import { CyclesContext } from '../../contexts/CyclesContext'
 
 const newCycleFormValidationSchema = zod.object({
-  task: zod.string().min(1, 'Informe a tarefa'),
+  task: zod.string().min(1, 'Write the task'),
   minutesAmount: zod
     .number()
     .min(5, 'Time must be at least 5 minutes long.')
@@ -67,7 +67,11 @@ export function Home() {
           </StartCountdownButton>
         )}
       </form>
-      <Mascot src={chimpMascot} alt="Beautiful Red Apple" className="mascot" />
+      <Mascot
+        src={chimpMascot}
+        alt="Nice monkey admiring countdown"
+        className="fadeInUp"
+      />
     </HomeContainer>
   )
 }

src/pages/Home/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 
 export const HomeContainer = styled.main`
   height: 100%;
@@ -51,10 +51,28 @@ export const StopCountdownButton = styled(BaseCountdownButton)`
     background: ${(props) => props.theme['red-700']};
   }
 `
+
+const fadeInUp = keyframes`
+   0% {
+      transform: translateY(100%);
+      opacity: 1;
+    }
+    50% {
+      transform: translateY(-20%);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+`
+
 export const Mascot = styled.img`
   position: absolute;
   bottom: 0;
   left: 0;
   margin-bottom: -2.5rem;
-  width: 20rem;
+  height: 20rem;
+  //animation-name: ${fadeInUp};
+  //animation-duration: 0.8s;
 `

src/styles/global.ts

@@ -20,7 +20,6 @@ body {
 
 body, input, textarea, button {
   font-family: 'Montserrat', sans-serif;
-  font-weight: 300;
   font-size: 1rem;
 }
 `