Redone UI, add leave and delete logic

src/Thread.css

@@ -1,10 +1,64 @@
 .thread-item {
   width: 100%;
+  white-space: pre-wrap;
+  margin-top: 25px !important;
+  font-size: 12px !important;
+  position: relative;
+}
+.thread-item.no-space {
+  margin-top: 0 !important;
 }
 .system-message {
   display: block;
   text-align: center;
   width: 100%;
   text-align: center;
-  color: rgba(100,100,100,0.8) !important;
-}
+  font-size: 12px;
+  margin-top: 7.5px !important;
+  color: rgba(100, 100, 100, 0.8) !important;
+}
+.my-message {
+  display: block;
+  width: fit-content;
+  text-align: right;
+  margin-left: auto !important;
+  margin-right: 5px !important;
+  margin-top: 5px !important;
+  padding: 2.5px 10px !important;
+  border-radius: 13px;
+  max-width: 60%;
+  word-wrap: break-word;
+  background-color: rgb(49, 49, 49);
+}
+.party-message {
+  display: block;
+  width: fit-content;
+  max-width: 60%;
+  word-wrap: break-word;
+  margin-top: 5px !important;
+  padding: 2.5px 10px !important;
+  border-radius: 13px;
+  background-color: rgb(88, 88, 88);
+}
+.thread-item .name {
+  color: rgb(149, 149, 149);
+  font-size: 10px !important;
+}
+.time {
+  position: absolute;
+  bottom: 50%;
+  opacity: 0;
+  transition: all ease-in-out 0.3s;
+}
+.party-message ~ .time {
+  right: 0;
+}
+.party-message:hover ~ .time {
+  opacity: 1;
+}
+.my-message ~ .time {
+  left: 0;
+}
+.my-message:hover ~ .time {
+  opacity: 1;
+}