Merge pull request #2228 from hexlet-codebattle/improve_styles_and_fix_saving_game

improve_styles_and_fix_saving_game

Author: ReDBrother

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

@@ -80,7 +80,6 @@ $fa-font-path: '/fonts';
 
 @import 'fonts';
 @import 'tournaments';
-@import 'taskComponent';
 @import 'grades';
 
 .katex .rlap>.inner {
@@ -1118,16 +1117,27 @@ a:hover {
   border-radius: 0.50rem;
 }
 
-.dropdown-item.cb-dropdown-item {
-  color: white;
+#tasklang-dropdown {
 
-  &:disabled,
-  &.disabled {
-    color: $text-muted;
+  &-toggle,
+  &-menu {
+    min-width: 4.375rem;
   }
+}
 
-  &:hover:not(:disabled):not(.disabled) {
-    background-color: $cb-bg-panel;
+.dropdown-menu,
+.cb-dropdown-menu {
+  & .dropdown-item.cb-dropdown-item {
+    color: white;
+
+    &:hover:not(:active):not(.active) {
+      background-color: $cb-bg-panel;
+    }
+
+    &:active,
+    &.active {
+      background-color: $cb-bg-panel;
+    }
   }
 }
 
@@ -2542,3 +2552,17 @@ a.cb-text:hover {
 .cb-subtle-background {
   background: radial-gradient(circle at 50% 0%, #3a3b40 0%, $cb-bg-panel 100%);
 }
+
+.cb-blur {
+  background: rgba(0, 0, 0, .3);
+  backdrop-filter: blur(16px);
+}
+
+.arrow::after,
+.bs-popover-bottom .arrow::after {
+  border-bottom-color: rgba(0, 0, 0);
+
+  .cb-blur & {
+    border-bottom-color: rgba(0, 0, 0, .3);
+  }
+}

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

@@ -49,12 +49,14 @@ export const customStyle = {
   menu: provided => ({
     ...provided,
     color: 'white',
-    backgroundColor: '#2a2a35',
+    backgroundColor: 'rgba(0, 0, 0, .3)',
+    backdropFilter: 'blur(16px)',
   }),
   option: provided => ({
     ...provided,
     color: 'white',
-    backgroundColor: '#2a2a35',
+    backgroundColor: 'transparent',
+
     ':hover': {
       backgroundColor: '#3a3f50',
     },

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

@@ -57,7 +57,7 @@ function PopoverStickOnHover({
         shouldUpdatePosition
       >
         <Popover
-          className="cb-bg-panel cb-text cb-rounded"
+          className="cb-blur cb-text cb-rounded"
           trigger="click"
           onMouseEnter={() => {
             setShowPopover(true);

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

@@ -9,7 +9,7 @@ const CopyEditorButton = ({ editor }) => {
   const text = i18n.t('Copy');
 
   const handleCopyClick = () => {
-    copy(editor.value);
+    copy(editor.text);
   };
 
   return (

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

@@ -203,7 +203,7 @@ function GameActionButtons({
           <FontAwesomeIcon icon="ellipsis-v" className="mr-1" />
         </Dropdown.Toggle>
 
-        <Dropdown.Menu className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat bg-dark">
+        <Dropdown.Menu className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-blur">
           <ResetButtonDropDownItem onSelect={handleReset} status={resetBtnStatus} />
           {showGiveUpBtn && <GiveUpButtonDropdownItem onSelect={modalShow} status={giveUpBtnStatus} />}
         </Dropdown.Menu>

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

@@ -50,7 +50,6 @@ function CommonBattleInfoWidget({
     taskLanguage,
     handleSetLanguage,
     hideContribution: !!tournamentId,
-    hideGuide: !!tournamentId,
     hideContent: isRestricted,
   };
 

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

@@ -5,13 +5,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
 
 import i18n from '../../../i18n';
 import GameLevelBadge from '../../components/GameLevelBadge';
 import ModalCodes from '../../config/modalCodes';
 import PageNames from '../../config/pageNames';
-import { actions } from '../../slices';
 import useTaskDescriptionParams from '../../utils/useTaskDescriptionParams';
 
 import ContributorsList from './ContributorsList';
@@ -29,33 +27,12 @@ const renderTaskLink = name => {
   );
 };
 
-function ShowGuideButton() {
-  const dispatch = useDispatch();
-  const guideShow = () => {
-    dispatch(actions.updateGameUI({ isShowGuide: true }));
-  };
-
-  return (
-    <button
-      type="button"
-      className="btn btn-outline-secondary cb-btn-outline-secondary btn-sm mx-2 text-nowrap cb-rounded"
-      onClick={guideShow}
-      data-toggle="tooltip"
-      data-placement="top"
-      title="Show guide"
-    >
-      {i18n.t('Show guide')}
-    </button>
-  );
-}
-
 function TaskAssignment({
   task,
   taskLanguage,
   taskSize = 0,
   handleSetLanguage,
   changeTaskDescriptionSizes,
-  hideGuide = false,
   hideContribution = false,
   hideContent = false,
   hidingControls = false,
@@ -124,7 +101,6 @@ function TaskAssignment({
                 {i18n.t('Expand')}
               </button>
             )}
-            {!hideGuide && <ShowGuideButton />}
             {changeTaskDescriptionSizes && !hidingControls && (
               <div
                 className="btn-group align-items-center ml-2 mr-auto"

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

@@ -34,7 +34,6 @@ const TaskDescriptionModal = NiceModal.create(() => {
           task={task}
           taskLanguage={taskLanguage}
           handleSetLanguage={handleSetLanguage}
-          hideGuide
           hideContribution
           fullSize
         />

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

@@ -16,6 +16,7 @@ const TaskLanguagesSelection = ({
       key={language}
       active={language === displayLanguage}
       onClick={handleSetLanguage(language)}
+      className="cb-dropdown-item"
     >
       <span translate="no">{`${language.toUpperCase()}`}</span>
     </Dropdown.Item>
@@ -30,7 +31,7 @@ const TaskLanguagesSelection = ({
       >
         {displayLanguage.toUpperCase()}
       </Dropdown.Toggle>
-      <Dropdown.Menu id="tasklang-dropdown-menu" className="cb-bg-highlight-panel cb-border-color text-white">
+      <Dropdown.Menu id="tasklang-dropdown-menu" className="cb-blur">
         {avaibleLanguages.map(renderLanguage)}
       </Dropdown.Menu>
     </Dropdown>