redesign chat

src/components/Alert.jsx

@@ -59,7 +59,6 @@ const Alert = () => {
         show={show}
         onClick={close}
       />
-      (render || open) && (
       <div
         className={(show) ? 'Alert show' : 'Alert'}
         onTransitionEnd={() => {

src/components/ChatMessage.jsx

@@ -42,10 +42,10 @@ function ChatMessage({
 
   return (
     <li className="chatmsg" ref={refEmbed}>
-      {(!isInfo && !isEvent)
-        && (
-          <div className="chathead" key="ch">
-            <span className="chatname">
+      <div className="msgcont">
+        <span className={className}>
+          {(!isInfo && !isEvent) && (
+            <span className="chatname" key="name">
               <img
                 alt=""
                 title={country}
@@ -78,13 +78,12 @@ function ChatMessage({
                 {name}
               </span>:
             </span>
-            <span className="chatts">
-              {getDateTimeString(ts)}
-            </span>
-          </div>
-        )}
-      <div className={className} key="cm">
-        <MarkdownParagraph refEmbed={refEmbed} pArray={pArray} />
+          )}
+          <MarkdownParagraph refEmbed={refEmbed} pArray={pArray} />
+        </span>
+        <span className="chatts">
+          {getDateTimeString(ts)}
+        </span>
       </div>
     </li>
   );

src/components/ModWatchtools.jsx

@@ -267,7 +267,7 @@ function ModWatchtools() {
       {(rows && columns && types) && (
         <React.Fragment key="pxltable">
           <div className="modaldivider" />
-          <table style={{ fontSize: 11 }} >
+          <table style={{ fontSize: 11 }}>
             <thead>
               <tr>
                 {columns.slice(1).map((col, ind) => (

src/components/Window.jsx

@@ -49,7 +49,7 @@ const Window = ({ id }) => {
     dispatch(cloneWindow(id));
   }, [dispatch]);
 
-  const toggleMaximize = useCallback((evt) => {
+  const toggleMaximize = useCallback(() => {
     setRender(false);
   }, [dispatch]);
 

src/styles/default.css

@@ -638,12 +638,18 @@ tr:nth-child(even) {
     left: 0px;
     right: 0px;
     bottom: 0px;
-    height: 95%;
-    width: 90%;
     transform: none;
     max-width: none;
     max-height: none;
-    padding: 5%;
+    outline: none;
+    border: none;
+    border-radius: inherit;
+  }
+
+  .modal {
+    height: 100%;
+    width: 100%;
+    padding: 0;
   }
 }
 
@@ -679,6 +685,7 @@ tr:nth-child(even) {
 .chatname {
   font-size: 13px;
   white-space: nowrap;
+  padding-right: 4px;
 }
 .chatts {
   color: #83839f;
@@ -687,20 +694,18 @@ tr:nth-child(even) {
   text-align: right;
 }
 .chatmsg {
-  background-color: #eaeaea;
   font-size: 13px;
   user-select: text;
-  padding: 5px 0 0 0;
-}
-.chatmsg:nth-child(even) {
-  background-color: #f2f2f2;
+  padding: 7px 0 0 2px;
 }
 .chatmsg:hover {
   background-color: #dadada;
 }
+.msgcont {
+  display: flex;
+}
 .msg {
   color: #2d2d2d;
-  padding-left: 15px;
   overflow-y: clip;
   overflow-x: hidden;
 }

src/styles/theme-dark-round.css

@@ -136,14 +136,8 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  background-color: #393939;
-}
-.chatmsg:nth-child(even) {
-  background-color: #414141;
-}
 .chatmsg:hover {
-  background-color: #393939;
+  background-color: #2525252b;
 }
 .msg {
   color: #f3f3f3;

src/styles/theme-dark-sstraight.css

@@ -141,14 +141,8 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  background-color: #393939;
-}
-.chatmsg:nth-child(even) {
-  background-color: #414141;
-}
 .chatmsg:hover {
-  background-color: #393939;
+  background-color: #2525252b;
 }
 .msg {
   color: #f3f3f3;

src/styles/theme-dark.css

@@ -121,14 +121,8 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  background-color: #393939;
-}
-.chatmsg:nth-child(even) {
-  background-color: #414141;
-}
 .chatmsg:hover {
-  background-color: #393939;
+  background-color: #2525252b;
 }
 .msg {
   color: #f3f3f3;