enhancing UI details

devLeticia · Sep 1, 2023 · 9f3f330 · 9f3f330
1 parent c7dc835
commit 9f3f330
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 124 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,92 +0,0 @@
-:root {
-  font-family: Montserrat, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: var(--green);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-
-}
-
-img {
-  user-drag: none;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-drag: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-    }
-
-  ::-moz-selection {
-  /* Code for Firefox */
-  color: white;
-  background-color: green-300;
-}
-
-::selection {
-  color: white;
-  background-color: green-300;
-}
-
-h1 {
-  font-size: 3.2rem;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  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;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

diff --git a/src/layouts/DefaultLayout/index.tsx b/src/layouts/DefaultLayout/index.tsx
@@ -6,6 +6,7 @@ import { LayoutContainer } from './styles'
 export function DefaultLayout() {
   return (
     <LayoutContainer>
+      {/* // monkey image must come here */}
       <Header />
       <Outlet />
     </LayoutContainer>

diff --git a/src/layouts/DefaultLayout/styles.ts b/src/layouts/DefaultLayout/styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 export const LayoutContainer = styled.div`
   max-width: 74rem;
-  height: calc(100vh - 10rem);
+  min-height: 80vh;
   margin: 5rem auto;
   padding: 2.5rem;
   background: ${(props) => props.theme['gray-50']};

diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -9,6 +9,7 @@ import {
   Status,
 } from './styles'
 import { useNavigate } from 'react-router-dom'
+import { CheckCircle, XCircle, WarningCircle } from 'phosphor-react'
 import ChimpMeditating from '../../../public/chimp_meditating.svg'
 
 export function History() {
@@ -48,7 +49,7 @@ export function History() {
                 return (
                   <tr key={cycle.id}>
                     <td className="task">{cycle.task}</td>
-                    <td>{cycle.minutesAmount} minutes</td>
+                    <td>{cycle.minutesAmount} min</td>
                     <td>
                       {formatDistanceToNow(new Date(cycle.startDate), {
                         addSuffix: true,
@@ -57,15 +58,23 @@ export function History() {
                     </td>
                     <td>
                       {cycle.finishedDate && (
-                        <Status statusColor="green">Concluded</Status>
+                        <Status statusColor="green">
+                          <CheckCircle size={18} weight="fill" />
+                          Concluded
+                        </Status>
                       )}
 
                       {cycle.interruptedDate && (
-                        <Status statusColor="red">Interrupted</Status>
+                        <Status statusColor="red">
+                          <XCircle size={18} weight="fill" />
+                          Interrupted
+                        </Status>
                       )}
-
                       {!cycle.finishedDate && !cycle.interruptedDate && (
-                        <Status statusColor="yellow">Ongoing</Status>
+                        <Status statusColor="yellow">
+                          <WarningCircle size={18} weight="fill" />
+                          Ongoing
+                        </Status>
                       )}
                     </td>
                   </tr>

diff --git a/src/pages/History/styles.ts b/src/pages/History/styles.ts
@@ -2,10 +2,11 @@ import styled from 'styled-components'
 
 export const HistoryContainer = styled.div`
   flex: 1;
+  max-height: 60vh;
   padding: 3.5rem;
   display: flex;
   flex-direction: column;
-
+  overflow: hidden;
   h1 {
     font-size: 1.5rem;
     color: ${(props) => props.theme['brown-800']};
@@ -64,12 +65,17 @@ export const HistoryList = styled.div`
   overflow: auto;
 
   table {
+    position: relative;
+    border-collapse: collapse;
     margin-top: 2rem;
     width: 100%;
     border-collapse: collapse; // one border between table elements
     min-width: 600px;
+    position: relative;
 
     th {
+      position: sticky;
+      top: 0;
       background-color: ${(props) => props.theme['brown-700']};
       padding: 1rem;
       text-align: left;
@@ -106,26 +112,34 @@ export const HistoryList = styled.div`
 `
 
 const STATUS_COLORS = {
-  yellow: 'yellow-500',
-  green: 'green-500',
-  red: 'red-500',
+  yellow: {
+    bg: '#f5e0a7',
+    text: '#9d7300',
+  },
+  green: {
+    bg: '#bce1b0',
+    text: '#1a6103',
+  },
+  red: {
+    bg: '#efa9a9',
+    text: '#a90a17',
+  },
 } as const
 
 interface StatusProps {
   statusColor: keyof typeof STATUS_COLORS
 }
 
-export const Status = styled.span<StatusProps>`
+export const Status = styled.div<StatusProps>`
   display: flex;
+  justify-content: center;
   align-items: center;
+  text-align: center;
+  font-size: small;
   gap: 0.5rem;
-
-  &::before {
-    content: '';
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 9999px;
-    background-color: ${(props) =>
-      props.theme[STATUS_COLORS[props.statusColor]]};
-  }
+  border-radius: 3px;
+  padding: 0.5rem 0.25rem;
+  background-color: ${(props) => STATUS_COLORS[props.statusColor].bg};
+  font-weight: bold;
+  color: ${(props) => STATUS_COLORS[props.statusColor].text};
 `
diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts
@@ -1,6 +1,7 @@
 import styled, { keyframes } from 'styled-components'
 
 export const HomeContainer = styled.main`
+  flex: 1;
   height: 100%;
   position: relative;
   display: flex;

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

diff --git a/src/pages/NotFoundPage/styles.ts b/src/pages/NotFoundPage/styles.ts
@@ -1,6 +1,16 @@
 import styled from 'styled-components'
 
 export const NotFoundContainer = styled.div`
+  h1 {
+    font-size: 1.25rem;
+    color: ${(props) => props.theme['brown-700']};
+  }
+
+  img {
+    margin-top: 2rem;
+    height: 16rem;
+  }
+
   width: 100%;
   height: 100vh;
   display: flex;
@@ -9,21 +19,18 @@ export const NotFoundContainer = styled.div`
   justify-items: center;
   align-items: center;
   justify-content: center;
-  gap: 3rem;
+  gap: 2rem;
 
   button {
     border: 0;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
-
     gap: 0.5rem;
     font-weight: bold;
-
     cursor: pointer;
     color: ${(props) => props.theme.white};
-
     background-color: ${(props) => props.theme['green-500']};
     padding: 1rem 1.75rem;
 
@@ -33,3 +40,18 @@ export const NotFoundContainer = styled.div`
     }
   }
 `
+
+export const FourOFourContainer = styled.div`
+  font-family: 'Roboto Mono', monospace;
+  font-size: 3rem;
+  line-height: 1rem;
+  color: ${(props) => props.theme['gray-100']};
+  display: flex;
+  gap: 1rem;
+
+  span {
+    background: ${(props) => props.theme['brown-800']};
+    padding: 2rem 1rem;
+    border-radius: 8px;
+  }
+`
diff --git a/src/reducers/reducer.ts b/src/reducers/reducer.ts
@@ -3,6 +3,7 @@ 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
@@ -4,8 +4,7 @@ export const GlobalStyle = createGlobalStyle`
 * {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
-    
+    box-sizing: border-box;  
 }
 
 img {
@@ -37,12 +36,30 @@ body {
     background: ${(props) => props.theme['gray-100']};
     color: ${(props) => props.theme['brown-800']};
     -webkit-font-smoothing: antialiased;
-
-
 }
 
 body, input, textarea, button {
   font-family: 'Montserrat', sans-serif;
   font-size: 1rem;
 }
+
+
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
 `