Merge pull request #2227 from hexlet-codebattle/add_gradient_panel

add_gradient_panel

Author: ReDBrother

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>