Re-orga Chat Box

frontend/src/chat/chat.css

@@ -2,38 +2,52 @@
 
 .btn-style {
   @apply
-  w-[100px] 
-  h-[32px] 
-  border-2 border-black 
+  w-[100px]
+  h-[32px]
+  border-1 
+  border-gray-500
   rounded-3xl
+  bg-gray-500
+  text-white
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
   hover:bg-blue-200
-  active:bg-white
-  text-black 
-  cursor-pointer;
+  active:bg-gray-400
+  active:translate-y-[1px]
+  active:shadow-[0_2px_0_0_black];
 }
 
 .send-btn-style {
   @apply 
   w-[50px] 
   h-[50px] 
-  border-2 border-black 
+  border-1 
+  border-gray-500
   rounded-3xl
   hover:bg-blue-200 
-  active:bg-white
-  text-black
-  cursor-pointer;
+  bg-red-100 
+  text-red-700
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  active:bg-gray-400
+  active:translate-y-[1px]
+  active:shadow-[0_2px_0_0_black];;
 }
 
 
 .chatbox-style {
   @apply
-  w-[600px]
-  h-[150px] /* increase height if needed */
-  p-[10px]
-  border-1 border-black
-  shadow-sm
+  w-[650px]
+  h-[300px] /* increase height if needed */
+  p-[8px]
+  border-1
+  border-black
+  shadow-2xl 
   text-left
-  text-gray-800
+  text-gray-700
+  bg-white 
   rounded-3xl
   overflow-y-auto
   whitespace-pre-line
@@ -49,9 +63,11 @@
   p-[10px]
   border-1 border-black
   shadow-sm
+  flex-1
   rounded-3xl
-  focus:bg-gray-300
-  hover:bg-blue-200 
+  focus:bg-blue-300
+  hover:bg-blue-200
+  bg-white 
   text-gray-800;
 }
 
@@ -73,7 +89,7 @@
   left-1/2 
   -translate-x-1/2 
   -translate-y-1/2 
-  bg-white w-[650px] 
+  bg-gray-200 w-[850px] 
   p-6 rounded-xl 
   shadow-2xl 
   text-center z-50;
@@ -84,6 +100,14 @@
   cursor-pointer
 }
 
+.title {
+  @apply
+  text-6xl 
+  font-bold
+  text-gray-800
+}
+
+
 p {
   @apply
   text-black