add_gradient_panel

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

@@ -39,6 +39,11 @@ $dark-red: #b00020;
   background-color: #0C0F1E !important;
 }
 
+.cb-bg-dark {
+  background-color: #0C0F1E !important;
+  background: linear-gradient(135deg, #242424 0%, #151515 100%);
+}
+
 // Example custom classes for your text
 .battle-title {
   color: $warning; // or #fffb47 if you want a brighter yellow

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

@@ -108,6 +108,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-left: -10px;
 }
 
 .rank-caption {

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

@@ -35,6 +35,7 @@ $cb-border-color: #4c4c5a;
 // $cb-border-color: rgba(255, 255, 255, 0.15);
 
 $cb-bg-panel: #2a2a35;
+$cb-bg-panel-background: linear-gradient(135deg, #2a2a35 0%, #171720 100%);
 // $cb-bg-panel: #291c1c;
 // $cb-bg-panel: #1c2129;
 
@@ -185,7 +186,11 @@ input[type="range"] {
 }
 
 .dark-bg {
-  background: $dark;
+  background-color: $dark;
+}
+
+.cb-bg-dark {
+  background-color: #1a1a1a;
 }
 
 .bg-winner {
@@ -331,7 +336,7 @@ a {
 }
 
 .cb-heatmap-background {
-  background-color: $cb-bg-panel;
+  background: $cb-bg-panel-background;
 }
 
 .react-calendar-heatmap {
@@ -419,9 +424,8 @@ a {
 }
 
 .cb-user-dark-offline {
-  border: 0.2rem solid transparent;
   border-color: var(--gray);
-  border-radius: $cb-border-radius;
+  border-radius: 50%;
 }
 
 .cb-timer-progress {
@@ -1115,7 +1119,14 @@ a:hover {
 }
 
 .dropdown-item.cb-dropdown-item {
-  &:hover {
+  color: white;
+
+  &:disabled,
+  &.disabled {
+    color: $text-muted;
+  }
+
+  &:hover:not(:disabled):not(.disabled) {
     background-color: $cb-bg-panel;
   }
 }
@@ -2049,9 +2060,19 @@ a:hover {
   border-radius: 0.5rem;
 }
 
+
+
 .cb-bg-panel {
   background-color: $cb-bg-panel;
 
+  &:not(.cb-toolbar):not(.cb-slider-timeline) {
+    background: $cb-bg-panel-background;
+  }
+
+  &.form-control {
+    background-color: $cb-bg-highlight-panel;
+  }
+
   &.form-control:hover,
   &.form-control:focus {
     background-color: $cb-bg-panel;
@@ -2438,7 +2459,7 @@ a.cb-text:hover {
 }
 
 .card.cb-card {
-  background-color: $cb-bg-panel;
+  background-color: transparent;
   border-color: $cb-border-color;
 
   & .card-header {

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

@@ -103,9 +103,8 @@ function InvitesContainer() {
       >
         {({ ref, ...triggerHandler }) => (
           <Button
-            variant="dark"
             {...triggerHandler}
-            className="attachment mx-2"
+            className="bg-transparent border-0 attachment mx-2"
           >
             <img
               ref={ref}

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

@@ -13,7 +13,7 @@ const TournamentPreviewPanel = ({
   end,
 }) => (
   <div className={className}>
-    <div className="d-flex flex-column cb-bg-panel cb-rounded p-3">
+    <div className="d-flex flex-column border cb-border-color cb-rounded p-3">
       <span>{`Start Date: ${dayjs(start).format('MMMM DD, YYYY')}`}</span>
       <span>{`Time: ${dayjs(start).format('hh:mm A')} - ${dayjs(end).format('hh:mm A')}`}</span>
       {tournament.grade !== grades.open

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

@@ -30,11 +30,11 @@ const TournamentTimer = ({ date = new Date(), label, children }) => {
   }
 
   return (
-    <>
+    <span className="d-inline-flex">
       {label}
       {' '}
-      <span className="text-monospace">{dayjs.duration(duration).format('HH:mm:ss')}</span>
-    </>
+      <span className="text-monospace text-warning ml-2">{dayjs.duration(duration).format('HH:mm:ss')}</span>
+    </span>
   );
 };
 

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

@@ -15,7 +15,7 @@ function UserLabel({ user }) {
   );
   const onlineIndicatorClassName = cn('mr-1', {
     'cb-user-online': isOnline,
-    'cb-user-offline': !isOnline,
+    'cb-user-dark-offline': !isOnline,
   });
 
   return (

services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx

@@ -81,10 +81,10 @@ function ChatWidget() {
 
   return (
     <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
-      <div className="d-flex flex-wrap flex-sm-nowrap cb-bg-panel shadow-sm h-100 cb-rounded">
+      <div className="d-flex cb-bg-panel shadow-sm h-100 cb-rounded">
         <div
           className={cn(
-            'd-none d-lg-flex d-md-flex d-sm-flex flex-column flex-grow-1 position-relative p-0 h-100 mh-100 rounded-left',
+            'd-flex flex-column flex-grow-1 position-relative p-0 h-100 mh-100 rounded-left',
             'cb-game-chat-container cb-messages-container cb-text',
           )}
         >

services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx

@@ -48,7 +48,7 @@ const EditorToolbar = ({
   <>
     <div
       ref={toolbarRef}
-      className="cb-bg-panel cb-border-color rounded-top"
+      className="cb-bg-panel cb-toolbar cb-border-color rounded-top"
       data-player-type={type}
     >
       <div className={toolbarClassNames} role="toolbar">

services/app/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.jsx

@@ -69,7 +69,7 @@ const ActiveGames = ({
 
   return (
     <>
-      <div className="d-none d-md-block table-responsive rounded-bottom cb-bg-panel cb-rounded">
+      <div className="d-none d-md-block table-responsive rounded-bottom cb-rounded">
         <table className="table table-striped mb-0">
           <thead className="text-center text-white">
             <tr>

services/app/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 const CodebattleLeagueDescription = () => (
   <section className="container my-3">
-    <div className="cb-bg-panel cb-rounded p-3 text-center">
+    <div className="p-3 text-center">
       <h2 className="text-white m-0">Codebattle League</h2>
       <p className="text-white mt-2 mb-3">
         Challenge the best! Participate in the Competition tournaments, defeat
@@ -15,7 +15,7 @@ const CodebattleLeagueDescription = () => (
 
       {/* Toggle for Rules/Details */}
       <button
-        className="btn btn-secondary cb-btn-secondary"
+        className="btn btn-secondary cb-btn-secondary cb-rounded"
         type="button"
         data-toggle="collapse"
         data-target="#leagueProtocol"
@@ -397,6 +397,6 @@ const CodebattleLeagueDescription = () => (
       </div>
     </div>
   </section>
-  );
+);
 
 export default CodebattleLeagueDescription;

services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx

@@ -64,7 +64,7 @@ function ChatGroupedPlayersList({ players, displayMenu, mode }) {
 
 const chatHeaderClassName = cn(
   'col-lg-8 col-md-8 d-flex flex-column position-relative',
-  'p-0 cb-bg-panel rounded-left h-sm-100 cb-lobby-widget-container w-100',
+  'p-0 rounded-left h-sm-100 cb-lobby-widget-container w-100',
 );
 
 function LobbyChat({
@@ -119,7 +119,7 @@ function LobbyChat({
 
   return (
     <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
-      <div className="d-flex flex-column flex-lg-row flex-md-row rounded shadow-sm mt-2">
+      <div className="d-flex flex-column flex-lg-row flex-md-row cb-bg-panel cb-rounded shadow-sm mt-2">
         <div
           className={chatHeaderClassName}
         >
@@ -129,7 +129,7 @@ function LobbyChat({
         </div>
         <div className={
           cn(
-            'col-lg-4 col-md-4 p-0 pb-3 pb-sm-4 cb-bg-panel cb-players-container',
+            'col-lg-4 col-md-4 p-0 pb-3 pb-sm-4 cb-players-container',
             'border-left cb-border-color rounded-right',
           )
         }

services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx

@@ -155,7 +155,7 @@ const LobbyWidget = () => {
       <Modal
         show={showCreateGameModal}
         onHide={handleCloseCreateGameModal}
-        contentClassName="cb-bg-highlight-panel"
+        contentClassName="cb-bg-panel"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title>Create a game</Modal.Title>
@@ -167,7 +167,7 @@ const LobbyWidget = () => {
       <Modal
         show={showJoinGameModal}
         onHide={handleCloseJoinGameModal}
-        contentClassName="cb-bg-highlight-panel cb-join-game-modal"
+        contentClassName="cb-bg-panel cb-join-game-modal"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title>Join a game</Modal.Title>

services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx

@@ -67,7 +67,7 @@ const SeasonProfilePanel = ({
             <div>
               {liveTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center align-items-center pt-2 cb-bg-panel">
+                  <div className="d-flex justify-content-center align-items-center pt-2">
                     <span className="text-white text-uppercase h4">
                       Live Tournaments
                     </span>
@@ -86,7 +86,7 @@ const SeasonProfilePanel = ({
               )}
               {seasonTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center pt-2 cb-bg-panel">
+                  <div className="d-flex justify-content-center pt-2">
                     <span className="text-white text-uppercase h4">
                       Upcoming Tournaments
                     </span>