add event modal and fix some styles

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

@@ -55,13 +55,11 @@
 }
 
 .cb-custom-event-td:not(:last-child)::after {
-  background-color: gray;
   right: 0;
   top: 8px;
 }
 
 .cb-custom-event-nav-item:not(:first-child):not(.active)::after {
-  background-color: white;
   left: 0;
   top: 13px;
 }

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

@@ -2178,7 +2178,8 @@ a.cb-text:hover {
   background-color: $cb-success;
   border-color: $cb-success;
 
-  &:hover {
+  &:hover:not(:disabled),
+  &:hover:not(.disabled) {
     background-color: $cb-hovered-success;
     border-color: $cb-hovered-success;
   }
@@ -2187,7 +2188,8 @@ a.cb-text:hover {
 .cb-btn-outline-success {
   border-color: $cb-success;
 
-  &:hover {
+  &:hover:not(:disabled),
+  &:hover:not(.disabled) {
     background-color: $cb-hovered-success;
     border-color: $cb-hovered-success;
   }
@@ -2500,3 +2502,7 @@ a.cb-text:hover {
 //   background-color: rgba(90, 123, 151, 0.2);
 // }
 //
+
+.btn-link {
+  color: white;
+}

services/app/apps/codebattle/assets/js/i18n/dayjs.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+
+export default dayjs;

services/app/apps/codebattle/assets/js/widgets/App.jsx

@@ -150,7 +150,9 @@ export const TournamentsSchedulePage = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <Suspense>
-        <TournamentsSchedule />
+        <NiceModal.Provider>
+          <TournamentsSchedule />
+        </NiceModal.Provider>
       </Suspense>
     </PersistGate>
   </Provider>

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

@@ -9,7 +9,7 @@ import * as selectors from '../selectors';
 
 import LanguageIcon from './LanguageIcon';
 
-const customStyle = {
+export const customStyle = {
   control: provided => ({
     ...provided,
     color: 'white',
@@ -24,6 +24,10 @@ const customStyle = {
       borderColor: '#4c4c5a',
     },
   }),
+  singleValue: provider => ({
+    ...provider,
+    color: 'white',
+  }),
   indicatorsContainer: provided => ({
     ...provided,
     height: '29px',
@@ -39,14 +43,17 @@ const customStyle = {
   }),
   input: provided => ({
     ...provided,
+    color: 'white',
     height: '21px',
   }),
   menu: provided => ({
     ...provided,
+    color: 'white',
     backgroundColor: '#2a2a35',
   }),
   option: provided => ({
     ...provided,
+    color: 'white',
     backgroundColor: '#2a2a35',
     ':hover': {
       backgroundColor: '#3a3f50',

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

@@ -62,11 +62,11 @@ function UserInfo({
   const content = useMemo(() => <UserPopoverContent user={user} />, [user]);
 
   if (!user?.id) {
-    return <span className="text-secondary">John Doe</span>;
+    return <span className="text-white">John Doe</span>;
   }
 
   if (user?.id === 0) {
-    return <span className="text-secondary">{user.name}</span>;
+    return <span className="text-white">{user.name}</span>;
   }
 
   const isOnline = presenceList.some(({ id }) => id === user?.id);

services/app/apps/codebattle/assets/js/widgets/config/modalCodes.js

@@ -8,6 +8,7 @@ const modalCodes = {
   premiumRestrictionModal: 'premium_restriction_modal',
   awardModal: 'award_modal',
   eventStageModal: 'event_stage_modal',
+  calendarEventModal: 'calendar_event_modal',
 };
 
 export default modalCodes;

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

@@ -35,6 +35,13 @@ const AnimationModal = NiceModal.create(() => {
   const currentUserId = useSelector(state => currentUserIdSelector(state));
   const tournamentId = useSelector(state => state.game.gameStatus.tournamentId);
 
+  useEffect(() => {
+    if (modal.visible) {
+      NiceModal.hide(ModalCodes.premiumRestrictionModal);
+      NiceModal.hide(ModalCodes.taskDescriptionModal);
+    }
+  }, [modal.visible]);
+
   const currentPlayer = players[currentUserId];
 
   if (!currentPlayer || currentPlayer.result === 'undefined') {
@@ -48,13 +55,6 @@ const AnimationModal = NiceModal.create(() => {
     : i18n.t("If you read this you've lost the game");
   const buttonText = result === 'won' ? i18n.t('GG') : i18n.t("I'll be back");
 
-  useEffect(() => {
-    if (modal.visible) {
-      NiceModal.hide(ModalCodes.premiumRestrictionModal);
-      NiceModal.hide(ModalCodes.taskDescriptionModal);
-    }
-  }, [modal.visible]);
-
   return (
     <Modal
       show={modal.visible}

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

@@ -55,8 +55,8 @@ const OutputTab = ({ sideOutput, large = false }) => {
 
   return (
     <>
-      {isShowMessage && <span className="font-weight-bold small mr-3">{assertsStatusMessage}</span>}
-      <span className={`p-2 bg-${statusColor}`}>{message}</span>
+      {isShowMessage && <span className="font-weight-bold text-white small mr-3">{assertsStatusMessage}</span>}
+      <span className={`p-2 text-white bg-${statusColor}`}>{message}</span>
     </>
   );
 };