Merge pull request #8 from MyBaBB/Dark-Mode

Dark mode

package.json

@@ -7,11 +7,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "firebase": "^10.12.2",
+    "firebase": "^10.12.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "tools": "^0.0.0",
     "web-vitals": "^2.1.4"
   },

src/ChatApp.css

@@ -1,10 +1,24 @@
+
+
+
+
+
+
+
+
 body {
     margin: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #f4f7f6;
     color: #333;
 }
 
+.dark-text {
+    color: #fff;
+}
+.light-text {
+    color: #333;
+}
 #chat-container {
     width: 90%;
     max-width: 1000px;
@@ -18,24 +32,28 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: relative;
+    border: 2px solid skyblue;
 }
 
 #header {
     text-align: center;
     padding: 20px 0;
     background-color: skyblue;
     color: white;
-    border-bottom: 1px solid #e0e0e0;
+    border: 2px solid #e0e0e0; 
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     z-index: 2;
     position: relative;
 }
 
+
+
 #header h1 {
     margin: 0;
     font-size: 45px;
     font-family: 'Arial Black', Gadget, sans-serif;
+
 }
 
 #message-areas {
@@ -45,6 +63,21 @@ body {
     padding: 20px;
     position: relative;
     overflow: hidden; 
+    background-color: #f9f9f9;
+}
+@media  all and (max-width: 600px){
+
+
+#message-areas {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 20px;
+    position: relative;
+    overflow: hidden; 
+    background-color: #f9f9f9;
+
+}
 }
 
 .message-area {
@@ -58,11 +91,14 @@ body {
     overflow: hidden; 
     display: flex;
     flex-direction: column;
+     border: 1px solid skyblue;
+
 }
 
 .message-content-area {
     overflow-y: auto; 
-    height: calc(100% - 40px); 
+    height: calc(100% - 40px);
+
 }
 
 .message-area h2 {
@@ -116,28 +152,47 @@ body {
 
 .message.user .message-content {
     background-color: #e0f7fa;
+    word-wrap: break-word;
 }
 
 .message.ai .message-content {
     background-color: #fff8e1;
+    word-wrap: break-word;
+}
+
+.dark-mode #input-container {
+    background-color: black;
+    color: #fff;
+    border-top: 1px solid transparent;
 }
 
 #input-container {
     display: flex;
     padding: 20px;
-    background-color: #f4f7f6;
     border-top: 1px solid #e0e0e0;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
-}
-
-#user-input {
+   }
+   @media screen and (max-width: 500px){
+    #input-container {
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        padding: 20px;
+
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+   } 
+}
+  #user-input {
     flex-grow: 1;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
 }
 
 #send-btn {
@@ -153,6 +208,31 @@ body {
     font-size: 16px;
 }
 
+
+#send-btn {
+    margin-left: 10px;
+    padding: 10px 20px;
+    border: none;
+    background-color: skyblue;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s;
+    font-size: 16px;
+}
+@media screen and (max-width: 500px) {
+    #send-btn {
+
+      margin: 15px auto 0px ;   
+    }
+}
+
 #send-btn:hover {
     background-color: #007bff;
 }
+@media screen and (max-width: 600px) {
+    #response-area {
+        margin-top: 20px;
+      }
+}

src/ChatApp.js

@@ -4,7 +4,9 @@ import "./ChatApp.css";
 import ReactMarkdown from 'react-markdown';
 import defaultUserIcon from './default-user-icon.svg';
 import aiAvatarIcon from './ai-avatar.svg';
-
+import DarkButton from './Components/DarkButton';
+import './Components/DarkButton.css';
+
 const MODEL_NAME = "gemini-1.5-flash";
 const API_KEY = process.env.REACT_APP_API_KEY;
 
@@ -154,12 +156,15 @@ const ChatApp = () => {
 
   return (
     <div id="chat-container">
+
       <div id="header">
-        <h1>gitNarrator</h1>
+      <DarkButton />
+        <h1 className="title">gitNarrator</h1>
+
       </div>
       <div id="message-areas">
         <div id="user-message-area" className="message-area">
-          <h2>User Messages</h2>
+          <h2 className='userMessages'>User Messages</h2>
           <div className="message-content-area" ref={userMessageAreaRef}>
             {messages.map((message, index) => (
               message.sender === 'user' && (
@@ -176,8 +181,10 @@ const ChatApp = () => {
             <div ref={conversationEndRef}></div>
           </div>
         </div>
+
+
         <div id="response-area" className="message-area">
-          <h2>AI Responses</h2>
+          <h2 className='aiResponses'>AI Responses</h2>
           <div className="message-content-area" ref={aiResponseAreaRef}>
             {messages.map((message, index) => (
               message.sender === 'ai' && (
@@ -191,19 +198,24 @@ const ChatApp = () => {
                 </div>
               )
             ))}
-            <div ref={conversationEndRef}></div>
+            <div ref={conversationEndRef}></div>   
           </div>
+
         </div>
       </div>
       <div id="input-container">
         <input
+          className='user-input'
           type="text"
           id="user-input"
           ref={userInputRef}
           onKeyUp={handleKeyUp}
-          style={{ fontSize: 20 }}
+          style={{ fontSize: 20,  width: "90%" }}
+
           placeholder="What GitHub project would you like Brian to write about?"
+
         />
+
         <button id="send-btn" onClick={sendMessage}>
           Send
         </button>

src/Components/DarkButton.css

@@ -0,0 +1,125 @@
+
+
+  body.dark-mode {
+    background-color: black;
+    color: black;
+  }
+
+  @media screen and (max-width: 454px) {
+    .title {
+      font-size: 22px !important;
+    }
+  }
+  .title {    
+    text-shadow: 2px 2px 4px #000000;   
+
+   } 
+  .dark-mode .title {
+    color: skyblue !important; ;
+  }
+   .dark-mode #header {
+    background-color: black;
+    border: 1px solid skyblue;
+
+  }
+
+
+  .dark-mode-button {
+    appearance: none;
+    background-color:transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    height: 30px;
+    outline: none;
+    position: relative;
+    width: 30px;
+  }
+
+   body {
+    transition: background-color 1s ease;
+  }
+  @media screen and (max-width: 554px) {
+    .buttonWrapper {
+      top:1.2rem !important;
+      right: 1.5rem !important;
+    }
+
+  }
+  .buttonWrapper {
+      position: absolute;
+      top:2.2rem;
+      right: 2.5rem;
+      width: -moz-fit-content;
+      width: fit-content;
+
+  }
+
+.dark-mode ::placeholder {
+  color: skyblue;
+
+}
+.dark-mode .message.user .message-content {
+  word-wrap: break-word;
+  background-color: #081729;
+  color: skyblue;
+  text-shadow: 1px 1px 2px #000000;
+  letter-spacing: 1.15px;
+  margin-top: .25rem;
+}
+
+.dark-mode .message.ai .message-content {
+  background-color: #081729;
+  color: skyblue;
+
+  margin-top: .25rem;
+}
+
+.dark-mode .message-area   {
+  background-color: #1d1d1d;
+} 
+.dark-mode .avatar img    {
+  background-color: rgb(42, 105, 130);
+  border: 2px solid skyblue;
+
+
+} 
+.dark-mode .aiResponses,
+.dark-mode .userMessages {
+  background-color: black;
+  border-radius: 0px 0px 5px 5px;
+  color: lightblue;
+  text-shadow: 1px 1px 2px #000000;
+  border-bottom: black;
+}
+@media screen and (max-width: 454px) {
+.dark-mode .aiResponses,
+.dark-mode .userMessages {
+  font-size: 18px;
+  background-color: black;
+  border-radius: 0px 0px 5px 5px;
+  color: lightblue;
+  text-shadow: 1px 1px 2px #000000;
+  border-bottom: black;
+}
+}
+.dark-mode #send-btn:hover {
+ background-color: #007bff;
+
+
+}
+.dark-mode #send-btn  {
+ background-color: #0f2a4e;
+ text-shadow: 1px 1px 2px #000000;
+ color: lightblue;
+ /* background-color: #007bff; */
+}
+ .dark-mode #message-areas {
+  background-color: black;
+ }   
+
+.dark-mode  #user-input   {
+  background-color: #1d1d1d !important;
+  border: 1px solid skyblue !important;
+  color: white !important;  
+}