chat module styling

Ans155 · Jun 25, 2023 · 0278b86 · 0278b86
1 parent 29ecc71
commit 0278b86
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 174 deletions.
diff --git a/components/Friend/Chat/Chat.module.css b/components/Friend/Chat/Chat.module.css
@@ -1,87 +1,122 @@
-.Chat{
-    position:absolute;
-    top:14rem;
-    left:40rem;
+.Chat {
+    position: absolute;
+    top: 14rem;
+    left: 40rem;
     padding: 2rem;
-    background-color: rgba(0, 0, 0, 0.25);
-    border-radius: .5rem;
-    width:50%
-
-}
-
-.Chat_box{
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0.5rem;
+    width: 50%;
+  }
+
+  .Chat_box {
     display: grid;
     grid-template-columns: 1fr;
     height: 50vh;
     width: 80%;
     margin: 0 auto;
     overflow-y: scroll;
-}
-
-.Chat_box_right_p,
-.Chat_box_left_p{
-    background-color: #f182035b;
+  }
+  
+  .Chat_box_right_p,
+  .Chat_box_left_p {
+    background-color: #dcf8c6;
     padding: 1rem;
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+    border-radius: 0.5rem;
     position: relative;
-}
-
-.Chat_box_left_title{
+    color: #333;
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    max-width: 70%;
+    word-wrap: break-word;
+  }
+
+  .Chat_box_left_p {
+    background-color: white;
+    color: #333;
+  }
+
+  .Chat_box_left_title {
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 1rem;
-
-}
-.Chat_box_send_img{
+    color: #666;
+    margin-bottom: 0.5rem;
+  }
+
+  .Chat_box_left_title img,
+  .Chat_box_right_p img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+
+  .Chat_box_left_title span,
+  .Chat_box_right_p span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .Chat_box_left_title small,
+  .Chat_box_right_p small {
+    font-size: 0.8rem;
+    color: #888;
+  }
+
+  .Chat_box_send_img {
     display: flex;
     align-items: center;
     gap: 1rem;
-}
-
-.Chat_box_send_img input {
+  }
+  
+  .Chat_box_send_img input {
     width: 100%;
-    background-color: #f182035b;
+    background-color: white;
     outline: none;
     border: none;
     padding: 0.5rem;
-    color: #f18203;
+    color: #333;
     border-radius: 1rem;
-}
-
-.Chat_user_info{
-        display: flex;
-        align-items: center;
-        gap: 2rem;
-        line-height: 1;
-}
-
-.Chat_user_info_box h4,
-.Chat_user_info_box p{
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .Chat_user_info {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    line-height: 1;
+  }
+
+  .Chat_user_info_box h2,
+  .Chat_user_info_box p {
     line-height: 0;
-
-}
-
-@media only screen and (max-width: 35em){
-    .Chat{
-        position:inherit;
-        top:25rem;
-        left:2rem;
-        padding: 2rem;
-        background-color: rgba(0, 0, 0, 0.25);
-        border-radius: .5rem;
-        width:70%
+    color: white;
+  }
+  
+  @media only screen and (max-width: 35em) {
+    .Chat {
+      position: inherit;
+      top: 25rem;
+      left: 2rem;
+      padding: 2rem;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 0.5rem;
+      width: 70%;
     }
-    .Chat p{
-        font-size: .8rem;
-
+
+    .Chat p {
+      font-size: 0.8rem;
+      color: white;
     }
-    .Chat small{
-        font-size: .8rem;
+
+    .Chat small {
+      font-size: 0.8rem;
+      color: white;
     }
-    .show{
-        display: none;
+
+    .show {
+      display: none;
     }
-}
+  }
+