small fixes

Author: ReDBrother

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

@@ -2,6 +2,7 @@ $body-bg: #e5e5e5;
 $success: #82b792;
 $cb-text-color: #999;
 $cb-border-color: #4c4c5a;
+$cb-border-radius: 0.5rem;
 $cb-success: #32CD32;
 $cb-hovered-success: #28a428;
 $cb-bg-panel: #2a2a35;
@@ -381,7 +382,7 @@ a {
 .cb-user-dark-offline {
   border: 0.2rem solid transparent;
   border-color: var(--gray);
-  border-radius: 0.5rem;
+  border-radius: $cb-border-radius;
 }
 
 .cb-timer-progress {
@@ -1101,13 +1102,6 @@ div.cb-dropdown-menu {
   color: var(--green) !important;
 }
 
-.cb-user-offline {
-  color: var(--white) !important;
-  border: 0.2rem solid transparent;
-  border-color: var(--gray);
-  border-radius: 0.5rem;
-}
-
 .cb-timer-progress {
   position: absolute;
   top: 0;
@@ -2992,8 +2986,15 @@ a.cb-text:hover {
 
 .rbc-overlay {
   color: white;
+  background-color: $cb-bg-panel;
   border-color: $cb-border-color;
-  border-radius: 0.5rem;
+  border-radius: $cb-border-radius;
+}
+
+.rbc-overlay-header {
+  background-color: $cb-bg-highlight-panel;
+  border-top-left-radius: $cb-border-radius;
+  border-top-right-radius: $cb-border-radius;
 }
 
 /* Event background (default is usually blue) */

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

@@ -57,7 +57,7 @@ const InfiniteScrollableGames = memo(({ className, tableClassName, games }) => {
     <>
       <div ref={tableRef} className={className} data-testid="scroll">
         <table className={tableClassName}>
-          <thead className="sticky-top">
+          <thead className="cb-text sticky-top">
             <tr>
               <th className="p-3 border-0">Level</th>
               <th className="px-1 py-3 border-0 text-center" colSpan={2}>Players</th>
@@ -71,25 +71,25 @@ const InfiniteScrollableGames = memo(({ className, tableClassName, games }) => {
 
               return (
                 <tr key={game.id}>
-                  <td className="p-3 align-middle text-nowrap">
+                  <td className="p-3 align-middle text-nowrap cb-border-color">
                     <GameLevelBadge level={game.level} />
                   </td>
-                  <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate">
+                  <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate cb-border-color">
                     <div className="d-flex align-items-center">
                       <ResultIcon icon={player1.icon} />
                       <UserInfo className={cn({ 'pl-4': !player1.icon })} user={player1.data} truncate="true" />
                     </div>
                   </td>
-                  <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate">
+                  <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate cb-border-color">
                     <div className="d-flex align-items-center">
                       <ResultIcon icon={player2.icon} />
                       <UserInfo className={cn({ 'pl-4': !player2.icon })} user={player2.data} truncate="true" />
                     </div>
                   </td>
-                  <td className="px-1 py-3 align-middle text-nowrap">
+                  <td className="px-1 py-3 align-middle text-nowrap text-white cb-border-color">
                     {moment.utc(game.finishesAt).local().format('MM.DD HH:mm')}
                   </td>
-                  <td className="px-1 py-3 align-middle">
+                  <td className="px-1 py-3 align-middle cb-border-color">
                     <a type="button" className="btn btn-secondary btn-sm rounded-lg" href={`/games/${game.id}`}>
                       Show
                     </a>

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

@@ -1,11 +1,46 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
+import axios from 'axios';
+import { camelizeKeys } from 'humps';
 
 import i18n from '../../../i18n';
 
 import TournamentListItem, { activeIcon } from './TournamentListItem';
 
 const contestDatesText = 'Season: Oct 14 - Dec 21';
 
+const UserLogo = ({ user, size = '40px' }) => {
+  const [userInfo, setUserInfo] = useState();
+  const avatarUrl = user.avatarUrl || userInfo?.avatarUrl || '/assets/images/logo.svg';
+
+  useEffect(() => {
+    const userId = user.id;
+    const controller = new AbortController();
+
+    axios
+      .get(`/api/v1/user/${userId}/stats`, {
+        signal: controller.signal,
+      })
+      .then(response => {
+        if (!controller.signal.aborted) {
+          setUserInfo(camelizeKeys(response.data.user));
+        }
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [setUserInfo, user.id]);
+
+  return (
+    <img
+      style={{ width: size, height: size }}
+      alt="Avatar Logo"
+      src={avatarUrl}
+    />
+  );
+};
+
 const SeasonProfilePanel = ({
   upcomingTournaments = [], liveTournaments = [], user, controls,
 }) => (
@@ -83,8 +118,8 @@ const SeasonProfilePanel = ({
     <div className="col-12 col-lg-4 col-md-4 d-flex flex-column my-2 my-lg-0 my-md-0">
       <div className="cb-bg-panel cb-rounded">
         <div className="text-center p-2 py-3">
-          <img style={{ width: '32px', height: '32px' }} alt="Avatar Logo" src={user.avatarUrl || '/assets/images/logo.svg'} />
-          <span className="clan-tag mt-2">F-445633</span>
+          <UserLogo user={user} />
+          <span className="clan-tag mt-2">{user.name}</span>
           <span className="h1 clan-title m-0 text-white text-uppercase">
             Clan
             {': '}

services/app/apps/codebattle/assets/js/widgets/pages/profile/UserStatCharts.jsx

@@ -64,7 +64,7 @@ function UserStatCharts({ stats }) {
   return (
     <div className="row justify-content-center pb-4">
       <div className="col-12 col-lg-7 mb-sm-n5 mb-lg-0">
-        <ResponsiveContainer aspect={1}>
+        <ResponsiveContainer className="text-white" aspect={1}>
           <RadarChart
             cx="50%"
             cy="50%"

services/app/apps/codebattle/assets/js/widgets/pages/tournament/StageTitle.jsx

@@ -17,7 +17,7 @@ function StageTitle({ stage, hideDescription = false }) {
 
   return hideDescription
     ? capitalize(mapStagesToTitle[stage])
-    : `Раунд ${(stage + 1)}`;
+    : `Round ${(stage + 1)}`;
 }
 
 export default memo(StageTitle);