chat page style fixes

neu-cs4530 · Nov 30, 2024 · ad60483 · ad60483
1 parent fb6419a
commit ad60483
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 29 deletions.
diff --git a/client/src/components/layout/index.css b/client/src/components/layout/index.css
@@ -5,7 +5,7 @@
 }
 
 .right_main {
-  width: 85%;
+  width: 88%;
   overflow: auto;
 }
 

diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css
@@ -3,9 +3,8 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
   min-height: 90vh;
-  background-color: #FFFCF5;
+  background-color:#f5f5f5;
   overflow-y: scroll;
 }
 
@@ -17,7 +16,7 @@
 
 .ruled-paper {
   background-size: 100% 3em;
-  background-color: #FFFCF5;
+  background-color: #f5f5f5;
   flex-grow: 1;
   width: 100%;
   padding-top: 0.2rem;
@@ -33,7 +32,7 @@
 }
 
 .community-title {
-  margin: 0 auto; /* Horizontally center */
+  margin: 0 auto;
   background: #6D89B0;
   text-align: start;
   padding: 10px;
@@ -47,6 +46,7 @@
   padding: 20px;
   font-size: 24px;
   font-weight: bold;
+  white-space: nowrap;
 }
 
 .chat-header {
@@ -82,18 +82,20 @@
 
 .chat-text-user, .chat-text-me {
   display: inline-block;
-  font-size: 24px;
-  max-width: 100%;
-  white-space: nowrap;
   font-size: 18px;
+  max-width: 80%;
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
   padding: 3px 15px;
   margin-bottom: 10px;
   clear: both;
 }
 
 .chat-text-user {
   text-align: left !important;
-  background: #f1f1f1;
+  background: #cfcfcf;
   color: #000 !important;
   border-radius: 20px 20px 20px 3px;
   margin-left: 10px;
@@ -119,10 +121,9 @@
   color: white;
 }
 
-.search-bar {
+.search-bar-users {
   width: 100%;
   padding: 8px;
-  margin-bottom: 16px;
   font-size: 16px;
   border-radius: 4px;
   border: 1px solid #ccc;
@@ -134,43 +135,46 @@
 }
 
 .send {
-  background: #BABDE2;
-  border-radius: 10px;
-  padding: 5px;
+  background: #6D89B0;
+  border: none;
+  border-radius: 4px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
   color: white;
+  cursor: pointer;
+  transition: background 0.3s ease;
   margin-right: 20px;
-  font-size: 24px;
-  font-weight: bold;
 }
 
 .send:hover {
-  background-color: #9498B5;
+  background-color: #546a8d;
 }
-
 .search-container {
   position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  gap: 0px;
   width: 100%;
   padding-top: 10px;
+  box-sizing: border-box;
 }
 
 .dropdown-list {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  margin-left: 16%;
-  margin-right: 3%;
-  flex-wrap: wrap;
-  justify-content: center;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
   background-color: white;
   color: black;
   border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  overflow: hidden;
 }
 
 .dropdown-item {
   padding: 8px 12px;
-  width: 100%;
   cursor: pointer;
 }
 

diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx
@@ -38,7 +38,7 @@ const ChatPage = () => {
             <div className='search-container'>
               <span className='chat-title'>chatting now: </span>
               <input
-                className='username-chat'
+                className='search-bar-users'
                 id='searchBar'
                 placeholder='Search username...'
                 type='text'

diff --git a/client/src/components/main/questionPage/question/index.css b/client/src/components/main/questionPage/question/index.css
@@ -3,6 +3,7 @@
   flex-direction: row;
   border-top: 1px dashed #466694;
   margin-bottom: 20px;
+  margin-right: 10px;
   padding: 10px;
   transition: transform 0.2s;
   cursor: pointer;

diff --git a/client/src/index.css b/client/src/index.css
@@ -14,5 +14,6 @@ html {
 body,
 #root {
   height: 100%;
+  width: 100%;
   background-color: #f5f5f5;
 }