From 7d39c19f6ea92fa4d3cf377e40587cde96a3892b Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Thu, 26 Jan 2023 20:08:04 -0800
Subject: [PATCH 01/14] Update props and propstype in ChatEntry components

---
 src/components/ChatEntry.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..cd1b9adc7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import { DateTime } from 'luxon';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
+        <p>{props.body}</p>
+        <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +18,9 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  sender:PropTypes.string.isRequired,
+  body:PropTypes.string.isRequired,
+  timeStamp:PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From 04cd66aee5be262c9651970f23a99e2a39a8c67d Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Thu, 26 Jan 2023 20:09:02 -0800
Subject: [PATCH 02/14] Import and add ChatEntry component in app.js

---
 src/App.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App.js b/src/App.js
index c10859093..faaa4cac0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,20 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
+
+  const chatentryComponents = chatMessages.map(message =>{
+    return <ChatEntry sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
+  });
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
+        {chatentryComponents}
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>

From 996d50422e64bddcc1df9dc2607bf30e722d901a Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Sun, 29 Jan 2023 19:58:26 -0800
Subject: [PATCH 03/14] Add ChatLog component and update App.js

---
 src/App.js                |  8 ++------
 src/components/ChatLog.js | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index faaa4cac0..f8f5f8be2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,16 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
-
-  const chatentryComponents = chatMessages.map(message =>{
-    return <ChatEntry sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
-  });
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        {chatentryComponents}
+        <ChatLog entries={chatMessages}></ChatLog>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..c197c4ad6
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({entries})=>{
+
+
+    const chatentryComponents = entries.map(message =>{
+        return <ChatEntry sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
+      });
+
+    return <section className='chat-log'>{chatentryComponents}</section>;
+}
+
+export default ChatLog;
\ No newline at end of file

From 01f4bc8826ab6029ae087e03af556faa1075da56 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Mon, 30 Jan 2023 22:28:07 -0800
Subject: [PATCH 04/14] Add heartcount state and Lift state up

---
 src/App.js                  | 27 +++++++++++++++++++++++----
 src/components/ChatEntry.js | 27 +++++++++++++++++++++++++--
 src/components/ChatLog.js   |  4 ++--
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index f8f5f8be2..983c29c5c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,37 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
+  const [messages, setMessages] = useState(chatMessages);
+  const [heartCount, setHeartCount] = useState(0);
+
+
+  const updateLike = (updatedmessage)=>{
+    const updatedmessages = messages.map(message =>{
+      if (message.id === updatedmessage.id){
+        if (!updatedmessage.liked){
+          setHeartCount(heartCount - 1);
+        }else{
+          setHeartCount(heartCount + 1);
+        }
+        return updatedmessage;
+      }else{
+        return message;
+      }
+    })
+    setMessages(updatedmessages);
+  }
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
+        <section><span className='widget' id='heartWidget'>{heartCount} ❤️s</span></section>
       </header>
       <main>
-        <ChatLog entries={chatMessages}></ChatLog>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messages} onupdate={updateLike}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index cd1b9adc7..68b866676 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,17 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import { DateTime } from 'luxon';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  const [heart, setHeart] = useState('🤍');
+
+  const updateLike = () =>{
+   const updatedmessage = {
+    id:props.id,
+    sender:props.sender,
+    body:props.body,
+    timeStamp:props.timeStamp,
+    liked:!props.liked,
+   }
+   props.onupdate(updatedmessage)
+
+    if (!props.liked){
+      setHeart('❤️');  
+    }
+    else{
+      setHeart('🤍');
+    }
+  };
+  
+
+
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
-        <button className="like">🤍</button>
+        <button className="like" onClick={()=>{updateLike()}}>{heart}</button>
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index c197c4ad6..3dab71572 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,11 +2,11 @@ import React from 'react';
 import './ChatLog.css';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({entries})=>{
+const ChatLog = ({entries, onupdate})=>{
 
 
     const chatentryComponents = entries.map(message =>{
-        return <ChatEntry sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
+        return <ChatEntry onupdate={onupdate} liked={message.liked} id={message.id}sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
       });
 
     return <section className='chat-log'>{chatentryComponents}</section>;

From 10968a22781e46fed8525ddeb3beabc5a0350de6 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Tue, 31 Jan 2023 16:55:30 -0800
Subject: [PATCH 05/14] Remove heartcount state and add getheartcount function

---
 src/App.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 983c29c5c..16349a6da 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,17 +5,12 @@ import ChatLog from './components/ChatLog';
 
 const App = () => {
   const [messages, setMessages] = useState(chatMessages);
-  const [heartCount, setHeartCount] = useState(0);
+ 
 
 
   const updateLike = (updatedmessage)=>{
     const updatedmessages = messages.map(message =>{
       if (message.id === updatedmessage.id){
-        if (!updatedmessage.liked){
-          setHeartCount(heartCount - 1);
-        }else{
-          setHeartCount(heartCount + 1);
-        }
         return updatedmessage;
       }else{
         return message;
@@ -24,11 +19,21 @@ const App = () => {
     setMessages(updatedmessages);
   }
 
+  const getHeartCount = () =>{
+    let heartCount = 0;
+    for (const message of messages){
+      if (message.liked){
+        heartCount ++;
+      }
+    }
+    return heartCount;
+  }
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
-        <section><span className='widget' id='heartWidget'>{heartCount} ❤️s</span></section>
+        <section><span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span></section>
       </header>
       <main>
         <ChatLog entries={messages} onupdate={updateLike}></ChatLog>

From c8a5e2970cb1c7eb5dcc287f9f9de6033c3e4e52 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Tue, 31 Jan 2023 16:59:54 -0800
Subject: [PATCH 06/14] Update heart from state to a variable and add Proptypes

---
 src/components/ChatEntry.js | 55 ++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 68b866676..248c4a2dd 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,45 +5,36 @@ import { DateTime } from 'luxon';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
-  const [heart, setHeart] = useState('🤍');
-
-  const updateLike = () =>{
-   const updatedmessage = {
-    id:props.id,
-    sender:props.sender,
-    body:props.body,
-    timeStamp:props.timeStamp,
-    liked:!props.liked,
-   }
-   props.onupdate(updatedmessage)
-
-    if (!props.liked){
-      setHeart('❤️');  
-    }
-    else{
-      setHeart('🤍');
+    let heart = props.liked ? '❤️':'🤍';
+    
+    const updateLike = () =>{
+    const updatedmessage = {
+      id:props.id,
+      sender:props.sender,
+      body:props.body,
+      timeStamp:props.timeStamp,
+      liked:!props.liked,
     }
+    props.onupdate(updatedmessage)
+  };
+    return (
+      <div className="chat-entry local">
+        <h2 className="entry-name">{props.sender}</h2>
+        <section className="entry-bubble">
+          <p>{props.body}</p>
+          <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
+          <button className="like" onClick={()=>{updateLike()}}>{heart}</button>
+        </section>
+      </div>
+    );
   };
-  
-
-
-
-  return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">{props.sender}</h2>
-      <section className="entry-bubble">
-        <p>{props.body}</p>
-        <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
-        <button className="like" onClick={()=>{updateLike()}}>{heart}</button>
-      </section>
-    </div>
-  );
-};
 
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender:PropTypes.string.isRequired,
   body:PropTypes.string.isRequired,
   timeStamp:PropTypes.string.isRequired,
+  liked:PropTypes.bool.isRequired,
 };
 
 export default ChatEntry;

From b291a6be115c3693253945c4e06cf3483594eb01 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Tue, 31 Jan 2023 17:04:04 -0800
Subject: [PATCH 07/14] Add key to ChatEntry component

---
 src/components/ChatLog.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 3dab71572..6c9beaf36 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -5,9 +5,11 @@ import ChatEntry from './ChatEntry';
 const ChatLog = ({entries, onupdate})=>{
 
 
-    const chatentryComponents = entries.map(message =>{
-        return <ChatEntry onupdate={onupdate} liked={message.liked} id={message.id}sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
-      });
+    const chatentryComponents = entries.map(message=>{
+        return <ChatEntry 
+                onupdate={onupdate} liked={message.liked} key={message.id} id={message.id}
+                sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
+        });
 
     return <section className='chat-log'>{chatentryComponents}</section>;
 }

From 04e5400506dee84b6d55eb99b9b22dd3d3e0a0ed Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Tue, 31 Jan 2023 22:22:44 -0800
Subject: [PATCH 08/14] Update updatelike function and add heartcount variable

---
 src/App.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 16349a6da..62c335d7c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
+let heartCount = 0;
 const App = () => {
   const [messages, setMessages] = useState(chatMessages);
  
@@ -11,7 +12,13 @@ const App = () => {
   const updateLike = (updatedmessage)=>{
     const updatedmessages = messages.map(message =>{
       if (message.id === updatedmessage.id){
+        if (updatedmessage.liked){
+          heartCount ++;
+        }else{
+          heartCount --;
+        }
         return updatedmessage;
+
       }else{
         return message;
       }
@@ -19,21 +26,21 @@ const App = () => {
     setMessages(updatedmessages);
   }
 
-  const getHeartCount = () =>{
-    let heartCount = 0;
-    for (const message of messages){
-      if (message.liked){
-        heartCount ++;
-      }
-    }
-    return heartCount;
-  }
+  // const getHeartCount = () =>{
+  //   let heartCount = 0;
+  //   for (const message of messages){
+  //     if (message.liked){
+  //       heartCount ++;
+  //     }
+  //   }
+  //   return heartCount;
+  // }
 
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
-        <section><span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span></section>
+        <section><span className='widget' id='heartWidget'>{heartCount} ❤️s</span></section>
       </header>
       <main>
         <ChatLog entries={messages} onupdate={updateLike}></ChatLog>

From 08b84810c8e13efbc3fe55a77feb9ac1c8746ba9 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Tue, 31 Jan 2023 22:34:03 -0800
Subject: [PATCH 09/14] Arrange the messages depending on the origin

---
 src/App.js                  | 6 ++----
 src/components/ChatEntry.js | 9 +++++++--
 src/components/ChatLog.js   | 4 ++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 62c335d7c..7df808751 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,9 +6,7 @@ import ChatLog from './components/ChatLog';
 let heartCount = 0;
 const App = () => {
   const [messages, setMessages] = useState(chatMessages);
- 
-
-
+  const owner = 'Vladimir';
   const updateLike = (updatedmessage)=>{
     const updatedmessages = messages.map(message =>{
       if (message.id === updatedmessage.id){
@@ -43,7 +41,7 @@ const App = () => {
         <section><span className='widget' id='heartWidget'>{heartCount} ❤️s</span></section>
       </header>
       <main>
-        <ChatLog entries={messages} onupdate={updateLike}></ChatLog>
+        <ChatLog entries={messages} onupdate={updateLike} owner={owner}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 248c4a2dd..09f3d492e 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,8 +5,13 @@ import { DateTime } from 'luxon';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
-    let heart = props.liked ? '❤️':'🤍';
+    const heart = props.liked ? '❤️':'🤍';
+    let origin = 'local';
+    if  (props.sender != props.owner){
+      origin = 'remote';
+    }
     
+
     const updateLike = () =>{
     const updatedmessage = {
       id:props.id,
@@ -18,7 +23,7 @@ const ChatEntry = (props) => {
     props.onupdate(updatedmessage)
   };
     return (
-      <div className="chat-entry local">
+      <div className={`chat-entry ${origin}`}>
         <h2 className="entry-name">{props.sender}</h2>
         <section className="entry-bubble">
           <p>{props.body}</p>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 6c9beaf36..a894bcfb7 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,13 +2,13 @@ import React from 'react';
 import './ChatLog.css';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({entries, onupdate})=>{
+const ChatLog = ({entries, onupdate, owner})=>{
 
 
     const chatentryComponents = entries.map(message=>{
         return <ChatEntry 
                 onupdate={onupdate} liked={message.liked} key={message.id} id={message.id}
-                sender={message.sender} body={message.body} timeStamp={message.timeStamp}/>;
+                sender={message.sender} body={message.body} timeStamp={message.timeStamp} owner={owner}/>;
         });
 
     return <section className='chat-log'>{chatentryComponents}</section>;

From 483017615da1959e053514a9158619130e52c8e2 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Wed, 1 Feb 2023 12:37:09 -0800
Subject: [PATCH 10/14] Bring back getheartcount function

---
 src/App.js | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7df808751..05f1a0aef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,18 +3,12 @@ import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
-let heartCount = 0;
 const App = () => {
   const [messages, setMessages] = useState(chatMessages);
   const owner = 'Vladimir';
   const updateLike = (updatedmessage)=>{
     const updatedmessages = messages.map(message =>{
       if (message.id === updatedmessage.id){
-        if (updatedmessage.liked){
-          heartCount ++;
-        }else{
-          heartCount --;
-        }
         return updatedmessage;
 
       }else{
@@ -24,21 +18,21 @@ const App = () => {
     setMessages(updatedmessages);
   }
 
-  // const getHeartCount = () =>{
-  //   let heartCount = 0;
-  //   for (const message of messages){
-  //     if (message.liked){
-  //       heartCount ++;
-  //     }
-  //   }
-  //   return heartCount;
-  // }
+  const getHeartCount = () =>{
+    let heartCount = 0;
+    for (const message of messages){
+      if (message.liked){
+        heartCount ++;
+      }
+    }
+    return heartCount;
+  }
 
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
-        <section><span className='widget' id='heartWidget'>{heartCount} ❤️s</span></section>
+        <section><span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span></section>
       </header>
       <main>
         <ChatLog entries={messages} onupdate={updateLike} owner={owner}></ChatLog>

From fde8893c710b6ae162ad2ea0012cb73a583dc901 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Wed, 1 Feb 2023 21:00:05 -0800
Subject: [PATCH 11/14] Add font color choice

---
 src/App.css                    | 55 +++++++++++++++++++++++++++++++---
 src/App.js                     | 28 ++++++++++++++---
 src/components/ChatEntry.js    |  8 +++--
 src/components/ChatLog.js      |  6 ++--
 src/components/ColorChoice.css |  2 ++
 src/components/ColorChoice.js  | 23 ++++++++++++++
 6 files changed, 109 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ColorChoice.css
 create mode 100644 src/components/ColorChoice.js

diff --git a/src/App.css b/src/App.css
index d97beb4e6..2675e8e24 100644
--- a/src/App.css
+++ b/src/App.css
@@ -49,6 +49,15 @@
   display: inline-block
 }
 
+.colorchoice button{
+  border-radius: 20px;
+  margin: 5px;
+}
+
+.colorchoice button:hover{
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+}
+
 .red {
   color: #b22222
 }
@@ -58,17 +67,55 @@
 }
 
 .yellow {
-  color: #e6e600
+  color: #e6e600;
 }
 
 .green {
-  color: green
+  color: green;
 }
 
 .blue {
-  color: blue
+  color: blue;
 }
 
 .purple {
-  color: purple
+  color: purple;
+}
+
+.black{
+  color:black;
+}
+
+.ribbon{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.button-red{
+  background-color: red;
+}
+
+.button-orange {
+  background-color: #e6ac00
+}
+
+.button-yellow {
+  background-color: #e6e600;
+}
+
+.button-green {
+  background-color: green;
+}
+
+.button-blue {
+  background-color: blue;
+}
+
+.button-purple {
+  background-color: purple;
+}
+
+.sender{
+  color:black;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 05f1a0aef..55d029238 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,10 +2,24 @@ import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
+import ColorChoice from './components/ColorChoice';
 
 const App = () => {
   const [messages, setMessages] = useState(chatMessages);
-  const owner = 'Vladimir';
+  const [localColor, setLocalColor] = useState('black');
+  const [remoteColor, setRemoteColor] = useState('black');
+  const local = 'Vladimir';
+  const remote = 'Estragon';
+
+  const updateColor = (origin, updatedcolor)=>{
+    if (origin === remote){
+      setRemoteColor(updatedcolor);
+    }else{
+      setLocalColor(updatedcolor);
+    }
+  }
+
+
   const updateLike = (updatedmessage)=>{
     const updatedmessages = messages.map(message =>{
       if (message.id === updatedmessage.id){
@@ -31,11 +45,17 @@ const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
-        <section><span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span></section>
+        <h1>Chat between <span className={localColor}>{local}</span> and <span className={remoteColor}>{remote}</span> </h1>
+        <section className='ribbon'>
+          <ColorChoice color={localColor} origin={local} colorupdate={updateColor}/>
+          <span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span>
+          <ColorChoice color={remoteColor} origin={remote} colorupdate={updateColor}/>
+        </section>
       </header>
       <main>
-        <ChatLog entries={messages} onupdate={updateLike} owner={owner}></ChatLog>
+        <ChatLog entries={messages} onupdate={updateLike} 
+                local={local} colorForLocal={localColor} colorForRemote={remoteColor}>
+        </ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 09f3d492e..b375fec06 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -7,8 +7,10 @@ import TimeStamp from './TimeStamp';
 const ChatEntry = (props) => {
     const heart = props.liked ? '❤️':'🤍';
     let origin = 'local';
-    if  (props.sender != props.owner){
+    let fontColor = props.colorForLocal;
+    if  (props.sender != props.local){
       origin = 'remote';
+      fontColor = props.colorForRemote;
     }
     
 
@@ -23,8 +25,8 @@ const ChatEntry = (props) => {
     props.onupdate(updatedmessage)
   };
     return (
-      <div className={`chat-entry ${origin}`}>
-        <h2 className="entry-name">{props.sender}</h2>
+      <div className={`chat-entry ${origin} ${fontColor}`}>
+        <h2 className="entry-name sender">{props.sender}</h2>
         <section className="entry-bubble">
           <p>{props.body}</p>
           <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index a894bcfb7..b58c8493d 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,13 +2,15 @@ import React from 'react';
 import './ChatLog.css';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({entries, onupdate, owner})=>{
+const ChatLog = ({entries, onupdate, local, colorForLocal, colorForRemote})=>{
 
 
     const chatentryComponents = entries.map(message=>{
         return <ChatEntry 
                 onupdate={onupdate} liked={message.liked} key={message.id} id={message.id}
-                sender={message.sender} body={message.body} timeStamp={message.timeStamp} owner={owner}/>;
+                sender={message.sender} body={message.body} timeStamp={message.timeStamp} local={local}
+                colorForLocal={colorForLocal} colorForRemote={colorForRemote}
+                />;
         });
 
     return <section className='chat-log'>{chatentryComponents}</section>;
diff --git a/src/components/ColorChoice.css b/src/components/ColorChoice.css
new file mode 100644
index 000000000..139597f9c
--- /dev/null
+++ b/src/components/ColorChoice.css
@@ -0,0 +1,2 @@
+
+
diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js
new file mode 100644
index 000000000..ed290dc8c
--- /dev/null
+++ b/src/components/ColorChoice.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import './ColorChoice.css';
+
+
+const ColorChoice = ({color, origin, colorupdate})=>{
+
+    return(
+        <section className={`colorchoice  ${origin}`}>
+            <h3 className={color}>{origin}'s color</h3>
+            <section className='colorbutton'>
+                <button className='button-red' onClick={()=>{colorupdate(origin, 'red')}}></button>
+                <button className='button-orange' onClick={()=>{colorupdate(origin, 'orange')}}></button>
+                <button className='button-yellow' onClick={()=>{colorupdate(origin, 'yellow')}}></button>
+                <button className='button-green' onClick={()=>{colorupdate(origin, 'green')}}></button>
+                <button className='button-blue' onClick={()=>{colorupdate(origin, 'blue')}}></button>
+                <button className='button-purple' onClick={()=>{colorupdate(origin, 'purple')}}></button>
+            </section>
+        </section>
+    );
+};
+
+
+export default ColorChoice;
\ No newline at end of file

From 303e935e356aac6254d3679cb9860a298108b004 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Wed, 1 Feb 2023 21:11:34 -0800
Subject: [PATCH 12/14] Update and add proptypes

---
 src/components/ChatEntry.js   | 10 +++++-----
 src/components/ChatLog.js     | 16 ++++++++++++++++
 src/components/ColorChoice.js |  7 +++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b375fec06..2d858abc7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -37,11 +37,11 @@ const ChatEntry = (props) => {
   };
 
 ChatEntry.propTypes = {
-  id: PropTypes.number.isRequired,
-  sender:PropTypes.string.isRequired,
-  body:PropTypes.string.isRequired,
-  timeStamp:PropTypes.string.isRequired,
-  liked:PropTypes.bool.isRequired,
+  id: PropTypes.number,
+  sender:PropTypes.string,
+  body:PropTypes.string,
+  timeStamp:PropTypes.string,
+  liked:PropTypes.bool,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b58c8493d..190ce6d32 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './ChatLog.css';
 import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
 
 const ChatLog = ({entries, onupdate, local, colorForLocal, colorForRemote})=>{
 
@@ -16,4 +17,19 @@ const ChatLog = ({entries, onupdate, local, colorForLocal, colorForRemote})=>{
     return <section className='chat-log'>{chatentryComponents}</section>;
 }
 
+ChatLog.propTypes= {
+    entries: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number,
+            sender: PropTypes.string,
+            body: PropTypes.string,
+            timeStamp:PropTypes.string,
+            liked:PropTypes.bool,   
+        })
+    ),
+    onupdate: PropTypes.func,
+    local: PropTypes.string,
+    colorForLocal:PropTypes.string,
+    colorForRemote:PropTypes.string,
+};
 export default ChatLog;
\ No newline at end of file
diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js
index ed290dc8c..03e0b90c4 100644
--- a/src/components/ColorChoice.js
+++ b/src/components/ColorChoice.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './ColorChoice.css';
+import PropTypes from 'prop-types';
 
 
 const ColorChoice = ({color, origin, colorupdate})=>{
@@ -19,5 +20,11 @@ const ColorChoice = ({color, origin, colorupdate})=>{
     );
 };
 
+ColorChoice.propTypes ={
+    color: PropTypes.string,
+    origin: PropTypes.string,
+    colorupdate: PropTypes.func, 
+}
+
 
 export default ColorChoice;
\ No newline at end of file

From a6625950b4e853c3eb8b4e727ba060a4b10acec3 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Wed, 1 Feb 2023 21:23:13 -0800
Subject: [PATCH 13/14] Add key to components

---
 src/components/ChatEntry.js | 2 +-
 src/components/ChatLog.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 2d858abc7..9d4529e5b 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -25,7 +25,7 @@ const ChatEntry = (props) => {
     props.onupdate(updatedmessage)
   };
     return (
-      <div className={`chat-entry ${origin} ${fontColor}`}>
+      <div key={props.key} className={`chat-entry ${origin} ${fontColor}`}>
         <h2 className="entry-name sender">{props.sender}</h2>
         <section className="entry-bubble">
           <p>{props.body}</p>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 190ce6d32..04a90d7ac 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 const ChatLog = ({entries, onupdate, local, colorForLocal, colorForRemote})=>{
 
 
-    const chatentryComponents = entries.map(message=>{
+    const chatentryComponents = entries.map((message, index)=>{
         return <ChatEntry 
-                onupdate={onupdate} liked={message.liked} key={message.id} id={message.id}
+                onupdate={onupdate} liked={message.liked} key={index} id={message.id}
                 sender={message.sender} body={message.body} timeStamp={message.timeStamp} local={local}
                 colorForLocal={colorForLocal} colorForRemote={colorForRemote}
                 />;

From d661bd16d7041f2769df84293a8c0014eb63ad35 Mon Sep 17 00:00:00 2001
From: Ya-Juan Ruan <yajuan@decltype.org>
Date: Wed, 1 Feb 2023 21:28:27 -0800
Subject: [PATCH 14/14] remove key from chatentry component

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 9d4529e5b..2d858abc7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -25,7 +25,7 @@ const ChatEntry = (props) => {
     props.onupdate(updatedmessage)
   };
     return (
-      <div key={props.key} className={`chat-entry ${origin} ${fontColor}`}>
+      <div className={`chat-entry ${origin} ${fontColor}`}>
         <h2 className="entry-name sender">{props.sender}</h2>
         <section className="entry-bubble">
           <p>{props.body}</p>