rewrite lobby

Author: ReDBrother

services/app/apps/codebattle/assets/css/style.scss

@@ -307,7 +307,14 @@ a {
 }
 
 .cb-user-offline {
-  color: var(--white) !important;
+  color: var(--white);
+  border: 0.2rem solid transparent;
+  border-color: var(--gray);
+  border-radius: 0.5rem;
+}
+
+.cb-user-dark-offline {
+  color: var(--dark);
   border: 0.2rem solid transparent;
   border-color: var(--gray);
   border-radius: 0.5rem;
@@ -782,6 +789,7 @@ main {
   width: 250px;
   min-width: 250px;
 }
+
 @media screen and (min-width: $md) {
   .main-nav {
     padding-left: clamp(0.25rem, 1vw, 0.5rem);
@@ -1521,6 +1529,27 @@ a {
     opacity: 1;
     background: var(--light);
   }
+
+  .nav-item.cb-nav-item.active {
+    color: var(--white);
+  }
+
+  .nav-item.cb-nav-item.active,
+  .nav-item.cb-nav-item:hover {
+    background-color: #1c1c24;
+    // border-top: 1px solid black;
+    // border-right: 1px solid black;
+    // border-left: 1px solid black;
+  }
+
+  .nav-item.cb-nav-item:not(.active) {
+    color: var(--black);
+  }
+
+  .nav-item.cb-nav-item:not(.active):hover {
+    color: var(--black);
+    background: var(--gray);
+  }
 }
 
 .popover {
@@ -2636,3 +2665,83 @@ a:hover {
   padding: 20px 16px;
   border-radius: 25px;
 }
+
+.clan-title {
+  font-size: 14px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.clan-tag {
+  font-size: 24px;
+  display: block;
+}
+
+/* Stats Grid - The main data display */
+.stats-grid {}
+
+.stat-item {
+  text-align: center;
+  border-right: 1px solid #3a3a45;
+  /* Vertical dividers */
+  padding: 0 5px;
+}
+
+.stat-item:last-child {
+  border-right: none;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  /* Accent color for key numbers */
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 11px;
+}
+
+.cb-font-size-small {
+  font-size: 12px;
+}
+
+.cb-rounded {
+  border-radius: 8px;
+}
+
+.cb-bg-panel {
+  background-color: #2a2a35;
+}
+
+.cb-bg-highlight-panel {
+  background-color: #1c1c24;
+}
+
+.cb-border-color {
+  border-color: #4c4c5a !important;
+}
+
+.cb-text {
+  color: #999;
+  font-family: 'Arial', sans-serif;
+}
+
+.cb-text-success {
+  color: #4CAF50;
+}
+
+.cb-text-danger {
+  color: #f04c5c;
+}
+
+.cb-btn-success {
+  background-color: #4CAF50;
+  border-color: #4CAF50;
+}
+
+.cb-level-badge {
+  width: auto;
+  height: auto;
+}

services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx

@@ -8,20 +8,23 @@ import * as selectors from '../selectors';
 
 import Rooms from './Rooms';
 
-export default function ChatHeader({ showRooms = false, disabled = false }) {
+export default function ChatHeader({ showRooms = false, mode, disabled = false }) {
   const currentUserIsAdmin = useSelector(selectors.currentUserIsAdminSelector);
 
   const handleCleanBanned = () => {
     pushCommand({ type: pushCommandTypes.cleanBanned });
   };
 
+  const showBorder = showRooms || (currentUserIsAdmin && !disabled);
+
   const headerClassName = cn('d-flex align-items-center', {
-    'border-bottom': showRooms || (currentUserIsAdmin && !disabled),
+    'border-bottom border-dark': showBorder && mode !== 'dark',
+    'border-bottom cb-border-color': showBorder && mode === 'dark',
   });
 
   return (
     <div className={headerClassName}>
-      {showRooms && !disabled && <Rooms disabled={disabled} />}
+      {showRooms && !disabled && <Rooms mode={mode} disabled={disabled} />}
       {currentUserIsAdmin && !disabled && (
         <button
           type="button"

services/app/apps/codebattle/assets/js/widgets/components/ChatInput.jsx

@@ -1,9 +1,10 @@
 import React, {
- useState, useEffect, useCallback, useRef,
+  useState, useEffect, useCallback, useRef,
 } from 'react';
 
 import data from '@emoji-mart/data';
 import BadWordsNext from 'bad-words-next';
+import cn from 'classnames';
 import { SearchIndex, init } from 'emoji-mart';
 import i18next from 'i18next';
 import isEmpty from 'lodash/isEmpty';
@@ -30,7 +31,7 @@ const getTooltipVisibility = async msg => {
   return !isEmpty(await SearchIndex.search(colons));
 };
 
-export default function ChatInput({ inputRef, disabled = false }) {
+export default function ChatInput({ inputRef, mode, disabled = false }) {
   const [isPickerVisible, setPickerVisibility] = useState(false);
   const [isMaxLengthExceeded, setMaxLengthExceeded] = useState(false);
   const [isTooltipVisible, setTooltipVisibility] = useState(false);
@@ -39,6 +40,16 @@ export default function ChatInput({ inputRef, disabled = false }) {
   const activeRoom = useSelector(selectors.activeRoomSelector);
   const badwordsRef = useRef(new BadWordsNext());
 
+  const inputClassName = cn('form-control h-auto border-right-0 rounded-left', {
+    'bg-dark cb-border-color text-white': mode === 'dark',
+    'border-gray': mode !== 'dark',
+    'is-invalid': isMaxLengthExceeded,
+  });
+  const emojiBtnClassName = cn('btn border-left-0 border-right-0 px-2 py-0', {
+    'bg-white border-gray': mode !== 'dark',
+    'cb-border-color border': mode === 'dark',
+  });
+
   useEffect(() => {
     let mounted = true;
     async function loadBadwords() {
@@ -74,8 +85,8 @@ export default function ChatInput({ inputRef, disabled = false }) {
     } else {
       setMaxLengthExceeded(false);
     }
-      setText(value);
-      setTooltipVisibility(await getTooltipVisibility(value));
+    setText(value);
+    setTooltipVisibility(await getTooltipVisibility(value));
   };
 
   const handleSubmit = e => {
@@ -148,13 +159,11 @@ export default function ChatInput({ inputRef, disabled = false }) {
 
   return (
     <form
-      className="border-top input-group mb-0 p-2"
+      className="border-top border-dark input-group mb-0 p-2"
       onSubmit={handleSubmit}
     >
       <input
-        className={`form-control h-auto border-gray border-right-0 rounded-left ${
-          isMaxLengthExceeded ? 'is-invalid' : ''
-        }`}
+        className={inputClassName}
         placeholder="Be nice in chat!"
         value={text}
         onChange={handleChange}
@@ -187,7 +196,7 @@ export default function ChatInput({ inputRef, disabled = false }) {
       <div className="input-group-append border-left rounded-right">
         <button
           type="button"
-          className="btn bg-white border-gray border-left-0 border-right-0 px-2 py-0"
+          className={emojiBtnClassName}
           onClick={togglePickerVisibility}
         >
           <em-emoji id="grinning" size={20} />

services/app/apps/codebattle/assets/js/widgets/components/ChatUserInfo.jsx

@@ -4,7 +4,9 @@ import useHover from '../utils/useHover';
 
 import UserInfo from './UserInfo';
 
-function ChatUserInfo({ user, displayMenu, className = '' }) {
+function ChatUserInfo({
+ user, displayMenu, className = '', mode,
+}) {
   const [ref, hovered] = useHover();
 
   return (
@@ -21,7 +23,7 @@ function ChatUserInfo({ user, displayMenu, className = '' }) {
       onClick={displayMenu}
       onKeyPress={displayMenu}
     >
-      <UserInfo user={user} hovered={hovered} hideInfo hideOnlineIndicator />
+      <UserInfo user={user} mode={mode} hovered={hovered} hideInfo hideOnlineIndicator />
     </div>
   );
 }

services/app/apps/codebattle/assets/js/widgets/components/Messages.jsx

@@ -21,15 +21,17 @@ const getKey = (id, time, name, index) => {
   return `${id}-${time}-${name}-${index}`;
 };
 
-function Messages({ messages, displayMenu = () => {}, disabled = false }) {
+function Messages({
+  messages, displayMenu = () => { }, disabled = false, className = '',
+}) {
   const listRef = useRef();
   const minScrollHeight = 20;
   const [, setScrollHeight] = useState(0);
   const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
   const stayScrolledData = useStayScrolled(listRef);
   const { stayScrolled } = stayScrolledData;
   const scrollBottom = useMemo(
-    () => stayScrolledData.scrollBottom || (() => {}),
+    () => stayScrolledData.scrollBottom || (() => { }),
     [stayScrolledData.scrollBottom],
   );
   const [isNearBottom, setIsNearBottom] = useState(true);
@@ -88,6 +90,12 @@ function Messages({ messages, displayMenu = () => {}, disabled = false }) {
     },
   );
 
+  const messageClassName = cn(
+    className,
+    'overflow-auto pt-0 pl-3 pr-2',
+    'position-relative cb-messages-list flex-grow-1',
+  );
+
   if (disabled) {
     return (
       <div
@@ -107,13 +115,13 @@ function Messages({ messages, displayMenu = () => {}, disabled = false }) {
     <>
       <ul
         ref={listRef}
-        className="overflow-auto pt-0 pl-3 pr-2 position-relative cb-messages-list flex-grow-1"
+        className={messageClassName}
         onScroll={scrollHandler}
       >
         {messages.map((message, index) => {
           const {
- id, userId, name, text, type, time, meta,
-} = message;
+            id, userId, name, text, type, time, meta,
+          } = message;
 
           const key = getKey(id, time, name, messages.length - index);
 

services/app/apps/codebattle/assets/js/widgets/components/Rooms.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import cn from 'classnames';
 import i18next from 'i18next';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import Dropdown from 'react-bootstrap/Dropdown';
@@ -8,24 +9,29 @@ import { useDispatch, useSelector } from 'react-redux';
 import * as selectors from '../selectors';
 import { actions } from '../slices';
 
-export default function Rooms({ disabled }) {
+export default function Rooms({ disabled, mode }) {
   const dispatch = useDispatch();
 
   const rooms = useSelector(selectors.roomsSelector);
   const activeRoom = useSelector(selectors.activeRoomSelector);
 
+  const dropdownClassName = cn('h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat', {
+    'cb-bg-highlight-panel': mode === 'dark',
+  });
+
   return (
     <>
       <Dropdown as={ButtonGroup} title="" disabled={disabled}>
         <Dropdown.Toggle className="rounded-top" split variant="secondary" id="dropdown-rooms" disabled={disabled}>
           <span className="mr-2">{i18next.t(activeRoom.name)}</span>
         </Dropdown.Toggle>
 
-        <Dropdown.Menu className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat">
+        <Dropdown.Menu className={dropdownClassName}>
           {
             rooms.map(room => (
               <Dropdown.Item
                 href="#"
+                className={mode === 'dark' ? 'cb-text' : ''}
                 key={room.targetUserId || room.name}
                 onSelect={() => dispatch(actions.setActiveRoom(room))}
               >

services/app/apps/codebattle/assets/js/widgets/components/SystemMessage.jsx

@@ -5,7 +5,7 @@ import cn from 'classnames';
 function SystemMessage({ text, meta }) {
   const statusClassName = cn('text-small', {
     'text-danger': ['error', 'failure'].includes(meta?.status),
-    'text-success': meta?.status === 'success',
+    'cb-text-success': meta?.status === 'success',
     'text-muted': meta?.status === 'event',
   });
 

services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx

@@ -47,6 +47,7 @@ function UserPopoverContent({ user }) {
 function UserInfo({
   className,
   user,
+  mode,
   banned = false,
   lang,
   hovered = false,
@@ -74,11 +75,17 @@ function UserInfo({
     'cb-opacity-50': loading,
     'text-danger': banned,
   });
+  const linkClassName = cn(className, {
+    'text-white': !banned && mode === 'dark',
+    'text-danger': banned,
+  });
 
   if (hideInfo) {
     return (
       <UserName
         className={userClassName}
+        linkClassName={linkClassName}
+        mode={mode}
         hovered={hovered}
         user={user}
         lang={lang}
@@ -100,6 +107,8 @@ function UserInfo({
       <div>
         <UserName
           className={userClassName}
+          linkClassName={linkClassName}
+          mode={mode}
           hovered={hovered}
           user={user}
           lang={lang}