From 92e3719ac50db3784f6d43522d15e5014c5c6bb0 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Wed, 22 Dec 2021 21:13:30 -0300
Subject: [PATCH] Finish Chat History Styling (for now)

---
 src/assets/images/icons/small-room.png     | Bin 0 -> 413 bytes
 src/assets/styles/icons.scss               |   6 ++++++
 src/views/chat-history/ChatHistoryView.tsx |  21 +++++++++++----------
 3 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/icons/small-room.png

diff --git a/src/assets/images/icons/small-room.png b/src/assets/images/icons/small-room.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8bbbccc0b9d5fb2912bfdbfdfc0eafb8e5482d1
GIT binary patch
literal 413
zcmV;O0b>4%P)<h;3K|Lk000e1NJLTq000pH000mO1^@s6@G+EM00004b3#c}2nYxW
zd<bNS0001AdQ@0+Qek%>aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8
zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa
zx)o>}E!d0z008MpL_t(Ijg^zJ4go<BhQAXP5{*Q85*=z$@DvxdMyo;P0aQn$)u_cQ
zXuJZI5Gs@!?I~n7_HK8NznaYK_ht67=iyHDReQEWwm}52-z-(55%jH0)&+<2nHos1
z5%gs{CG%WxyV(NZ_PBGpUH}*mM~TfmAhN-d+vBcklPn{{a6Y5mY$XKoRQ(E7zoK0=
z<2e6w;vZJa@w`=aAz%AXBJiNsQN6`#XO(FZ6D*OQ$RL-LluIuooG$ykljwO^12CP8
zt(!;$o=igkiuJDk*jzFbEQ`ed1Eb6aCkmI$2B%3hS=!k*ZKh#uq%a8r00000NkvXX
Hu0mjfF5#eK

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index a53d7b2b..21a92c90 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -303,6 +303,12 @@
         height: 15px;
     }
 
+    &.icon-small-room {
+        background: url("../images/icons/small-room.png");
+        width: 17px;
+        height: 16px;
+    }
+
     &.icon-arrows {
         background: url("../images/icons/arrows.png");
         width: 17px;
diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
index f80ddbbd..acb432ea 100644
--- a/src/views/chat-history/ChatHistoryView.tsx
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -80,18 +80,19 @@ export const ChatHistoryView: FC<{}> = props =>
                 parent={props.parent}
                 rowIndex={props.index}
             >
-                <div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
+                <div key={props.key} style={props.style} className="chathistory-entry justify-content-start">
                     {(item.type === ChatEntryType.TYPE_CHAT) &&
-                    <div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
-                        <div className="p-1">{item.timestamp}</div>
-                        <div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
-                        <div className="p-1 text-break text-wrap">{item.message}</div>
+                    <div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
+                        <div className="text-muted">{item.timestamp}</div>
+                        <div className="cursor-pointer d-flex text-nowrap" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
+                        <div className="text-break text-wrap flex-grow-1">{item.message}</div>
                     </div>
                     }
                     {(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
-                    <div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
-                        <div className="p-1">{item.timestamp}</div>
-                        <div className="p-1 fw-bold cursor-pointer">{item.name}</div>
+                    <div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
+                        <div className="text-muted">{item.timestamp}</div>
+                        <i className="icon icon-small-room" />
+                        <div className="cursor-pointer text-break text-wrap">{item.name}</div>
                     </div>
                     }
                     
@@ -134,9 +135,9 @@ export const ChatHistoryView: FC<{}> = props =>
         <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
             <ChatHistoryMessageHandler />
             {isVisible &&
-            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }  theme={'dark'} >
+            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} >
                 <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
-                <NitroCardContentView className="chat-history-content" theme={'dark'}>
+                <NitroCardContentView className="chat-history-content p-0" theme={'dark'}>
                     <div className="row w-100 h-100 chat-history-container">
                             <AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
                                 {({ height, width }) =>