style changes

src/layout/card/NitroCardView.scss

@@ -4,6 +4,17 @@ $nitro-card-tabs-height: 33px;
 .nitro-card {
     pointer-events: all;
     resize: both;
+
+    &.theme-dark {
+        padding: 2px;
+        background-color: #1C323F;
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        border-radius: 0.25rem;
+    }
+
+    &.theme-primary {
+        border: $border-width solid $border-color;
+    }
 }
 
 .nitro-card-responsive {
@@ -15,10 +26,6 @@ $nitro-card-tabs-height: 33px;
     pointer-events: none;
     overflow: hidden;
 
-    .theme-primary {
-        border: $border-width solid $border-color;
-    }
-
     @include media-breakpoint-down(lg) {
         
         .draggable-window {

src/layout/card/content/NitroCardContentView.scss

@@ -3,6 +3,10 @@
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
+
+    &.theme-dark {
+        background-color: #1C323F !important;
+    }
 }
 
 @include media-breakpoint-down(lg) {

src/layout/card/content/NitroCardContentView.tsx

@@ -4,11 +4,11 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
 
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
-    const { children = null, className = '', ...rest } = props;
+    const { theme = 'primary',  children = null, className = '', ...rest } = props;
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid ${ theme === 'primary' ? 'bg-light' : ''} content-area d-flex flex-column overflow-auto theme-${theme} ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );

src/layout/card/content/NitroCardContextView.types.ts

@@ -2,4 +2,6 @@ import { DetailsHTMLAttributes } from 'react';
 
 
 export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
-{}
+{
+    theme?: string;
+}

src/layout/card/header/NitroCardHeaderView.scss

@@ -15,6 +15,11 @@
         }
     }
 
+    &.theme-dark {
+        background-color: #3d5f6e !important;
+        color: #fff;
+    }
+
     .bg-tertiary-split {
         position: relative;
         border-bottom: 2px solid darken($quaternary, 5);

src/layout/card/header/NitroCardHeaderView.tsx

@@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, onCloseClick = null } = props;
+    const { headerText = null, onCloseClick = null, theme= 'primary' } = props;
     const { simple = false } = useNitroCardContext();
 
     const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
@@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 
     return (
         <div className="drag-handler container-fluid bg-primary">
-            <div className="row nitro-card-header overflow-hidden">
+            <div className={`row nitro-card-header overflow-hidden theme-${theme}`}>
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-white text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>

src/layout/card/header/NitroCardHeaderView.types.ts

@@ -3,5 +3,6 @@ import { MouseEvent } from 'react';
 export interface NitroCardHeaderViewProps
 {
     headerText: string;
+    theme?: string;
     onCloseClick: (event: MouseEvent) => void;
 }

src/views/chat-history/ChatHistoryView.scss

@@ -2,48 +2,23 @@
 {
     width: 300px;
 
-    padding: 2px;
-    background-color: #1C323F;
-    border: 2px solid rgba(255, 255, 255, 0.5);
-    border-radius: 0.25rem;
-
-    .container-fluid
-    {
-        .nitro-card-header
-        {
-            background-color: #3d5f6e;
-            color: #fff;
-        }
-
-        background-color: #1C323F;
-        
-    }
-
     .chat-history-content
     {
-        background-color: #1C323F;
 
         .chat-history-container
         {
-            background-color: #1C323F;
             min-height: 200px;
 
             .chat-history-list
             {
                 .chathistory-entry
                 {
-                    .head-container
+                    .light {
-                    {
+                        background-color: #121f27;
-                        height: 44px;
-                        width: 42px;
                     }
 
-                    .friend-bar-item-head {
+                    .dark {
-                        top: -30px;
+                        background-color: #0d171d;
-                        left: 15px;
-                        pointer-events: none;
-                        height: 44px;
-                        width: 42px;
                     }
                 }
             }

src/views/chat-history/ChatHistoryView.tsx

@@ -70,6 +70,8 @@ export const ChatHistoryView: FC<{}> = props =>
     {
         const item = chatHistoryState.chats[props.index];
 
+        const isDark = (props.index % 2 === 0);
+
         return (
             <CellMeasurer
                 cache={cache}
@@ -80,26 +82,17 @@ export const ChatHistoryView: FC<{}> = props =>
             >
                 <div key={props.key} style={props.style} className="row 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="col-auto text-center">{item.timestamp}</div>
+                        <div className="p-1">{item.timestamp}</div>
-                        <div className="col-auto justify-content-start username">
+                        <div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
-                            <span className="fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: item.name }} />
+                        <div className="p-1 text-break text-wrap">{item.message}</div>
-                        </div>
+                    </div>
-                        <div className="col justify-content-start h-100">
-                            <span className="text-break text-wrap h-100">{item.message}</span>
-                        </div>
-                    </>
                     }
                     {(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
-                    <>
+                    <div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
-                        <div className="col-auto text-center">{item.timestamp}</div>
+                        <div className="p-1">{item.timestamp}</div>
-                        <div className="col-auto justify-content-start username">
+                        <div className="p-1 fw-bold cursor-pointer">{item.name}</div>
-                            <span className="fw-bold cursor-pointer">{item.name}</span>
+                    </div>
-                        </div>
-                        <div className="col justify-content-start h-100">
-                            <span className="text-break text-wrap h-100">{item.message}</span>
-                        </div>
-                    </>
                     }
                     
                 </div>
@@ -141,9 +134,9 @@ export const ChatHistoryView: FC<{}> = props =>
         <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
             <ChatHistoryMessageHandler />
             {isVisible &&
-            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
+            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }  theme={'dark'} >
-                <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
+                <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
-                <NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
+                <NitroCardContentView className="chat-history-content" theme={'dark'}>
                     <div className="row w-100 h-100 chat-history-container">
                             <AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
                                 {({ height, width }) => 

src/views/chat-history/utils/Utilities.ts

@@ -1,5 +1,5 @@
 export const currentDate = () =>
 {
     const currentTime = new Date();
-    return `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+    return `${currentTime.getHours().toString().padStart(2, '0')}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
 }

src/views/mod-tools/views/chatlog/ChatlogView.scss

@@ -22,6 +22,10 @@
                     width: $username-col-width;
                 }
 
+                &.highlighted {
+                    border: 1px solid $red;
+                }
+
                 .message {
                     word-break: break-all;
                 }

src/views/mod-tools/views/chatlog/ChatlogView.tsx

@@ -22,7 +22,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                 parent={props.parent}
                 rowIndex={props.index}
             >
-                <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                <div key={props.key} style={props.style} className={'row chatlog-entry justify-content-start ' + (item.hasHighlighting ? 'highlighted' : '')}>
                     <div className="col-auto text-center">{item.timestamp}</div>
                     <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
                     <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>