From fa7f5fab69a9ac0e11f9660c6c50aae7655302f2 Mon Sep 17 00:00:00 2001
From: Judy Ye <judyy.ye@gmail.com>
Date: Sun, 12 Nov 2023 23:18:53 -0800
Subject: [PATCH] Add media queries and conditionals to chat window

---
 src/components/Chat/Chat.css | 66 ++++++++++++++++++++++++++++++++++++
 src/components/Chat/Chat.js  |  8 ++---
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css
index e69de29..7edb694 100644
--- a/src/components/Chat/Chat.css
+++ b/src/components/Chat/Chat.css
@@ -0,0 +1,66 @@
+.chat {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 0rem .2rem .2rem 0rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.name.hidden {
+  display: none;
+}
+
+.greetings.hidden {
+  display: none;
+}
+
+.see-message-btn,
+.enter
+ {
+  background: linear-gradient(to bottom, #c9d1d8 5%, #dee9e7 100%);
+  border-radius: 3.5px;
+  border: 1.5px solid #000000;
+  color: black;
+  font-weight: bold;
+  font-size: 1em;
+  padding: 0.2em .4em;
+  cursor: pointer;
+}
+
+#nickname {
+  font-size: 1em;
+  padding: 0.2em .4em;
+}
+
+.see-message-btn.hidden {
+  display: none;
+}
+
+@media screen and (max-width: 585px) {
+  .see-message-btn,
+  .enter
+   {
+    border: 1px solid #000000;
+    font-size: .85em;
+    padding: 0.2em .3em;
+  }
+  
+  #nickname {
+    font-size: .85em;
+    padding: 0.1em .3em;
+  }
+}
+
+@media screen and (max-width: 300px) {
+  .see-message-btn,
+  .enter
+   {
+    max-width:15em;
+  }
+  
+  #nickname {
+    max-width: 8.4em;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
index 9a9bad5..384bd72 100644
--- a/src/components/Chat/Chat.js
+++ b/src/components/Chat/Chat.js
@@ -29,10 +29,10 @@ export default function Chat({subscription, allMessages}) {
   
   return (
     <div className='chat'>
-       <button className='see-message-btn' onClick={openPopOutChat}>See Messages</button>
+       <button className={`see-message-btn ${chatOpen ? 'hidden' : ''}`} onClick={openPopOutChat}>See Messages</button>
     {chatOpen && <ChatWindow allMessages={allMessages} currentMessage={currentMessage} setCurrentMessage={setCurrentMessage} handleSubmitMessage={handleSubmitMessage} openPopOutChat={openPopOutChat} />}
       {!hasNickname ? (
-        <div>
+        <div className={`name ${chatOpen ? 'hidden' : ''}`}>
           <label htmlFor="nickname" />
           <input
             id="nickname"
@@ -42,10 +42,10 @@ export default function Chat({subscription, allMessages}) {
             value={nickname}
             onChange={(e) => setNickname(e.target.value)}
           />
-          <button onClick={handleNickname}>Enter</button>
+          <button className='enter' onClick={handleNickname}>Enter</button>
         </div>
       ) : (
-        <div>
+        <div className={`greetings ${chatOpen ? 'hidden' : ''}`}>
           <p>Greetings {nickname}</p>
         </div>
       )}