Space - Lee

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;
 }

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,12 +12,13 @@ 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">
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );
-}
+};
 
 export default App;

src/components/Timeline.css

@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 50%;
   margin: auto;
   text-align: left;
 }

src/components/Timeline.js

@@ -2,9 +2,16 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+  const timelineEvents = props.events.map(event => 
+  <TimelineEvent person={event.person} status={event.status} timeStamp={event.timeStamp} />
+  );
 
-  return;
-}
+  return (
+    <section className="timeline">
+      {timelineEvents}
+    </section>
+  );
+};
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -1,27 +1,40 @@
 .timeline-event {
   display: grid;
   grid-template: 2rem auto 2rem / 1fr 1fr;
-  padding: 0.5rem;
-  border-bottom: 1px solid #E6ECF0;
-  background-color: #FFF;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #e7e247; 
+  border-radius: 0.5rem;
+  background-color: #15202b;
+  list-style: none;
 }
 
 .timeline-event:hover {
-  background-color: #F5F8FA;
+  background-color: #1d2833;
+  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;
   font-weight: bolder;
+  color: #e7e247;
 }
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  margin-top: 1rem;
+  overflow-wrap: break-word;
+  color: #fff;
 }
 
 .event-time {
   grid-area: 1 / 2 / span 1 / span 1;
   margin-top: 0.5rem;
   text-align: right;
+  font-style: italic;
+  color: #404d59;
 }

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 (
+    <ul key={props.timeStamp} className="timeline-event">
+      <li className="event-person">
+        <span>{props.person}</span>
+      </li>
+      <li className="event-status">
+        <span>{props.status}</span>
+      </li>
+      <li className="event-time">
+        <Timestamp time={props.timeStamp} />
+      </li>
+    </ul>
+  );
+};
 
 export default TimelineEvent;