From 4239453ab6f5d320d4915dd5a24a0560a39d31c7 Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 20:31:29 -0700
Subject: [PATCH 1/8] implements the TimelineEvent component function,
 hardcodes data for the person, status, and timestamp props

---
 src/App.js                      |  4 +++-
 src/components/TimelineEvent.js | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..bf49dd9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 function App() {
   console.log(timelineData);
@@ -11,9 +12,10 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">React Timeline</h1>
       </header>
       <main className="App-main">
+        <TimelineEvent person="Lee" status="Hello, World!" timestamp="April 14, 2020 8:25 PM" />
       </main>
     </div>
   );
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..86a9835 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,20 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
-}
+const TimelineEvent = (props) => {
+  return (
+    <section className="Timeline-event">
+      <h4 className="person">
+        {props.person}
+      </h4>
+      <p className="status">
+        {props.status}
+      </p>
+      <h5 className="timestamp">
+        <em><Timestamp time={props.timestamp} /></em>
+      </h5>
+    </section>
+  );
+};
 
 export default TimelineEvent;
\ No newline at end of file

From 51b85f2fccece9aaa587fc009cd9173bab3bbc63 Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 21:20:53 -0700
Subject: [PATCH 2/8] fixes case error in the timeStamp prop

---
 src/components/TimelineEvent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 86a9835..8240801 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -12,7 +12,7 @@ const TimelineEvent = (props) => {
         {props.status}
       </p>
       <h5 className="timestamp">
-        <em><Timestamp time={props.timestamp} /></em>
+        <em><Timestamp time={props.timeStamp} /></em>
       </h5>
     </section>
   );

From 6945c8d5ed0fb117a3c2756dbefcdd3738e13ffd Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 21:21:37 -0700
Subject: [PATCH 3/8] implements the Timeline component function, renders a
 Timeline component in the App

---
 src/App.js                 |  4 ++--
 src/components/Timeline.js | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index bf49dd9..b913b10 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,10 +15,10 @@ function App() {
         <h1 className="App-title">React Timeline</h1>
       </header>
       <main className="App-main">
-        <TimelineEvent person="Lee" status="Hello, World!" timestamp="April 14, 2020 8:25 PM" />
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..898d68e 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,19 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+  const events = props.events;
+  const timelineEvents = [];
   
-  return;
-}
+  events.forEach(event => {
+    timelineEvents.push(<TimelineEvent person={event.person} status={event.status} timeStamp={event.timeStamp} />);
+  });
+  
+  return (
+    <section className="Timeline">
+      {timelineEvents}
+    </section>
+  );
+};
 
 export default Timeline;
\ No newline at end of file

From b2133e7150336b0e1d437c8e47e9f74d32429d63 Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 21:41:52 -0700
Subject: [PATCH 4/8] changes classNames so they match the CSS naming

---
 src/components/Timeline.js      | 2 +-
 src/components/TimelineEvent.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 898d68e..987bb9a 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -11,7 +11,7 @@ const Timeline = (props) => {
   });
   
   return (
-    <section className="Timeline">
+    <section className="timeline">
       {timelineEvents}
     </section>
   );
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 8240801..7ce1784 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,14 +4,14 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section className="Timeline-event">
-      <h4 className="person">
+    <section className="timeline-event">
+      <h4 className="event-person">
         {props.person}
       </h4>
-      <p className="status">
+      <p className="event-status">
         {props.status}
       </p>
-      <h5 className="timestamp">
+      <h5 className="event-time">
         <em><Timestamp time={props.timeStamp} /></em>
       </h5>
     </section>

From cd480f68bd7324355577d03ba1ba9cef6d38e0fc Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 22:20:09 -0700
Subject: [PATCH 5/8] adds simple styling

---
 src/App.css                      |  6 +++---
 src/components/Timeline.css      |  2 +-
 src/components/TimelineEvent.css | 14 ++++++++++----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index e20270c..de081be 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 .App-header {
-  background-color: #222;
+  background-color: #e7e247;
   padding-bottom: 0.5rem;
-  color: white;
+  color: #15202b;
   position: fixed;
   width: 100%;
 }
@@ -13,5 +13,5 @@
 
 .App-main {
   padding-top: 7rem;
-  background-color: #E6ECF0;
+  background-color: #15202b;
 }
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..cea8e71 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 50%;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..73b43b9 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -1,27 +1,33 @@
 .timeline-event {
   display: grid;
   grid-template: 2rem auto 2rem / 1fr 1fr;
-  padding: 0.5rem;
-  border-bottom: 1px solid #E6ECF0;
-  background-color: #FFF;
+  margin-top: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #e7e247; 
+  border-radius: 0.5rem;
+  background-color: #15202b;
 }
 
 .timeline-event:hover {
-  background-color: #F5F8FA;
+  background-color: #1d2833;
+  transition: background-color .5s ease-in-out;
 }
 
 .event-person {
   grid-area: 1 / 1 / span 1 / span 1;
   margin-top: 0.5rem;
   font-weight: bolder;
+  color: #e7e247;
 }
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  color: #fff;
 }
 
 .event-time {
   grid-area: 1 / 2 / span 1 / span 1;
   margin-top: 0.5rem;
   text-align: right;
+  color: #404d59;
 }

From e89ee701ad4110c0f0580fdea0b01ed9c9adf118 Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Tue, 14 Apr 2020 23:04:13 -0700
Subject: [PATCH 6/8] refactors forEach to map in Timeline component function

---
 src/components/Timeline.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 987bb9a..7d991b2 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,12 +3,9 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = (props) => {
-  const events = props.events;
-  const timelineEvents = [];
-  
-  events.forEach(event => {
-    timelineEvents.push(<TimelineEvent person={event.person} status={event.status} timeStamp={event.timeStamp} />);
-  });
+  const timelineEvents = props.events.map(event => 
+  <TimelineEvent person={event.person} status={event.status} timeStamp={event.timeStamp} />
+  );
   
   return (
     <section className="timeline">

From 370ff21ded7a82b8a52457a0069c4d505508ab90 Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Wed, 15 Apr 2020 10:35:27 -0700
Subject: [PATCH 7/8] makes revisions after watching the components review:
 changes TimelineEvent JSX to ul, adds a key to each event, updates styles

---
 src/components/TimelineEvent.css |  9 ++++++++-
 src/components/TimelineEvent.js  | 18 +++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index 73b43b9..c619180 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -1,11 +1,11 @@
 .timeline-event {
   display: grid;
   grid-template: 2rem auto 2rem / 1fr 1fr;
-  margin-top: 0.5rem;
   padding: 0.5rem 1.5rem;
   border: 1px solid #e7e247; 
   border-radius: 0.5rem;
   background-color: #15202b;
+  list-style: none;
 }
 
 .timeline-event:hover {
@@ -13,6 +13,10 @@
   transition: background-color .5s ease-in-out;
 }
 
+.timeline-event:last-child {
+  margin-bottom: 0;
+}
+
 .event-person {
   grid-area: 1 / 1 / span 1 / span 1;
   margin-top: 0.5rem;
@@ -22,6 +26,8 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  margin-top: 1rem;
+  overflow-wrap: break-word;
   color: #fff;
 }
 
@@ -29,5 +35,6 @@
   grid-area: 1 / 2 / span 1 / span 1;
   margin-top: 0.5rem;
   text-align: right;
+  font-style: italic;
   color: #404d59;
 }
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 7ce1784..2f4c5c0 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,17 +4,17 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section className="timeline-event">
-      <h4 className="event-person">
+    <ul key={props.timeStamp} className="timeline-event">
+      <li className="event-person">
         {props.person}
-      </h4>
-      <p className="event-status">
+      </li>
+      <li className="event-status">
         {props.status}
-      </p>
-      <h5 className="event-time">
-        <em><Timestamp time={props.timeStamp} /></em>
-      </h5>
-    </section>
+      </li>
+      <li className="event-time">
+        <Timestamp time={props.timeStamp} />
+      </li>
+    </ul>
   );
 };
 

From 3e821a65fe3954f9f17baeb72c22865673eb4a4a Mon Sep 17 00:00:00 2001
From: peachmakkoli <sara.lee.higgins@gmail.com>
Date: Wed, 15 Apr 2020 10:38:52 -0700
Subject: [PATCH 8/8] adds <span> to event.person and event.status

---
 src/components/TimelineEvent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 2f4c5c0..43bdf05 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -6,10 +6,10 @@ const TimelineEvent = (props) => {
   return (
     <ul key={props.timeStamp} className="timeline-event">
       <li className="event-person">
-        {props.person}
+        <span>{props.person}</span>
       </li>
       <li className="event-status">
-        {props.status}
+        <span>{props.status}</span>
       </li>
       <li className="event-time">
         <Timestamp time={props.timeStamp} />