update

src/ts/components/Console/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import Button from 'ts/components/UiKit/components/Button';
 import notificationsStore from 'ts/components/Notifications/store';
-import localization from 'ts/helpers/Localization';
+import { t } from 'ts/helpers/Localization';
 import copyInBuffer from 'ts/helpers/copyInBuffer';
 
 import style from './index.module.scss';
@@ -30,10 +30,10 @@ function Console({ className, textForCopy, children }: IConsoleProps) {
           className={`${style.console_copy}`}
           onClick={() => {
             copyInBuffer(textForCopy);
-            notificationsStore.show(localization.get('uiKit.console.notification'));
+            notificationsStore.show(t('uiKit.console.notification'));
           }}
         >
-          {localization.get('uiKit.console.button')}
+          {t('uiKit.console.button')}
         </Button>
       ) : null}
     </div>

src/ts/components/DataLoader/styles/scroll.module.scss

@@ -1,18 +1,20 @@
 @import 'src/styles/variables';
 
-.infinite_scroll_border_top,
-.infinite_scroll_border_bottom {
-  position: sticky;
-  z-index: 3;
-  background-color: var(--color-white);
-}
+.infinite_scroll_border {
+  &_top,
+  &_bottom {
+    position: sticky;
+    z-index: 3;
+    background-color: var(--color-white);
+  }
 
-.infinite_scroll_border_top {
-  top: 0;
-  height: var(--space-s);
-}
+  &_top {
+    top: 0;
+    height: var(--space-s);
+  }
 
-.infinite_scroll_border_bottom {
-  bottom: -2px;
-  height: var(--space-s);
+  &_bottom {
+    bottom: -2px;
+    height: var(--space-s);
+  }
 }

src/ts/components/GameBanner/index.module.scss

@@ -5,7 +5,7 @@
   display: block;
   width: 100%;
   height: 300px;
-  margin: var(--space-xxl) auto 0;
+  margin: 0 auto;
 
   user-select: none;
 

src/ts/components/Quize/components/Answer.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { getRandom } from 'ts/helpers/random';
 
 import IAnswer from '../interfaces/Answer';
 import style from '../styles/answer.module.scss';
@@ -14,6 +16,7 @@ function Answer({
   mode,
   onClick,
 }: IAnswerProps): React.ReactElement | null {
+  const [iconIndex] = useState(getRandom(5));
   const className = [style.quize_answer_wrapper];
   const textClasName = [style.quize_answer_text];
 
@@ -32,7 +35,7 @@ function Answer({
       >
         <img
           className={style.quize_answer_icon}
-          src="./assets/games/quize/balloon.png"
+          src={`./assets/games/quize/balloon_${iconIndex}.png`}
         />
         <figcaption className={textClasName.join(' ')}>
           {answer.title}

src/ts/components/Quize/components/Question.tsx

@@ -69,7 +69,10 @@ function Question({
   return (
     <div className={stylePage.quize_question}>
       <div className={stylePage.quize_question_body}>
-        <div className={style.quize_title}>
+        <div
+          className={style.quize_title}
+          style={{ backgroundImage: 'url(./assets/games/quize/cloud_big.png)' }}
+        >
           {question.title}
         </div>
         <div className={style.quize_question_answer}>

src/ts/components/Quize/components/index.tsx

@@ -114,8 +114,16 @@ function QuizePage({
   return (
     <div
       className={style.quize_container}
-      style={{ backgroundImage: 'url(./assets/games/quize/air.jpg)' }}
+      style={{ backgroundImage: 'url(./assets/games/quize/cloud_bg.png)' }}
     >
+      <div
+        className={style.quize_cloud_bg}
+        style={{ backgroundImage: 'url(./assets/games/quize/cloud_bg.png)' }}
+      />
+      <div
+        className={style.quize_cloud}
+        style={{ backgroundImage: 'url(./assets/games/quize/cloud.png)' }}
+      />
       <div className={className}>
         {page}
       </div>

src/ts/components/Quize/styles/answer.module.scss

@@ -46,17 +46,21 @@
 
   &_text {
     --temp-bg: var(--color-white);
+    --temp-text: var(--color-black);
 
     &_selected {
-      --temp-bg: var(--color-13);
+      --temp-bg: #5F9C92;
+      --temp-text: var(--color-white);
     }
 
     &_correct {
-      --temp-bg: var(--color-23);
+      --temp-bg: #267A05;
+      --temp-text: var(--color-white);
     }
 
     &_error {
-      --temp-bg: var(--color-12);
+      --temp-bg: #DD5F00;
+      --temp-text: var(--color-white);
     }
 
     font-size: var(--font-m);
@@ -71,8 +75,9 @@
     margin: var(--space-xxs) auto 0;
 
     text-align: center;
+    border: 2px solid #6E605E;
     border-radius: var(--border-radius-m);
-    color: var(--color-black);
+    color: var(--temp-text);
     background-color: var(--temp-bg);
 
     &:before {

src/ts/components/Quize/styles/index.module.scss

@@ -17,6 +17,35 @@
     background-repeat: repeat;
   }
 
+  &_cloud,
+  &_cloud_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    background-position: 0 0;
+    background-size: auto 100%;
+    background-repeat: repeat;
+
+    animation-name: quize_cloud;
+    animation-iteration-count: infinite;
+    animation-fill-mode: none;
+  }
+
+  &_cloud_bg {
+    animation-duration: 170s;
+  }
+
+  &_cloud {
+    animation-duration: 70s;
+  }
+
   &_slider {
     position: absolute;
     display: block;
@@ -50,23 +79,28 @@
     font-weight: 100;
 
     display: block;
-    width: 500px;
+    width: 433px;
     padding: var(--space-xxl) 64px;
     margin: 0 auto;
 
     line-height: 1.5;
     box-sizing: border-box;
     text-align: center;
+    text-shadow: 0 0 5px var(--color-white), 0 0 5px var(--color-white), 0 0 5px var(--color-white);
 
     color: var(--color-black);
-    background-color: var(--color-white);
+    // background-color: var(--color-white);
+
+    background-position: center left;
+    background-size: auto 80%;
+    background-repeat: repeat-x;
   }
 
   &_title {
     font-size: var(--font-l);
     margin: 0 auto var(--space-xxl);
-    border-radius: var(--border-radius-m);
-    background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(240, 174, 122, 0.5) 100%);
+    border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
+    // background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255, 255, 255, 1) 10%, rgba(240, 174, 122, 0.5) 100%);
   }
 
   &_description {
@@ -111,3 +145,11 @@
   }
 }
 
+@keyframes quize_cloud {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -200px 0;
+  }
+}

src/ts/components/Recommendations/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Title from 'ts/components/Title';
-import localization from 'ts/helpers/Localization';
+import { t } from 'ts/helpers/Localization';
 import Banner from 'ts/components/Banner';
 
 import Card from './components/Card';
@@ -50,7 +50,7 @@ function Recommendations({
     cards = addBannerInRandomIndex(cards);
   }
 
-  const title = localization.get('recommendations.title');
+  const title = t('recommendations.title');
   const className = mode === 'print'
     ? `${style.recommendations_container} scroll_x ${style.recommendations_container_for_print}`
     : `${style.recommendations_container} scroll_x`;

src/ts/helpers/Localization/index.ts

@@ -85,3 +85,7 @@ const localization = new Localization();
 window.localization = localization;
 
 export default localization;
+
+export function t(code: string): string {
+  return localization.get(code);
+}

src/ts/interfaces/Pagination.ts

@@ -9,11 +9,6 @@ export interface IPagination<TYPE> {
   content: TYPE[];
 }
 
-export interface IPaginationProps {
-  pageNumber: number;
-  pageSize: number;
-}
-
 export interface IPaginationRequest {
   page?: number;
   size?: number;

src/ts/pages/Team/components/FileAnalytics/index.tsx

@@ -6,7 +6,7 @@ import ICommonPageProps from 'ts/components/Page/interfaces/CommonPageProps';
 import Extension from './Extension';
 import Type from './Type';
 
-const FileAnalitics = observer(({
+const FileAnalytics = observer(({
   mode,
 }: ICommonPageProps): React.ReactElement | null => {
   return (
@@ -17,4 +17,4 @@ const FileAnalitics = observer(({
   );
 });
 
-export default FileAnalitics;
+export default FileAnalytics;

src/ts/pages/Team/components/Top.tsx

@@ -33,10 +33,8 @@ const TeamBuilding = observer((): React.ReactElement => {
 
   return (
     <>
-
-      <Title title="Квиз"/>
       <Quize />
-      <Title title="Скорость закрытия задач"/>
+      {/*<Title title="Скорость закрытия задач"/>*/}
       <Races tracks={tracks} />
       <Title title="Максимальная длинна подписи коммита"/>
       <SwimmingPool tracks={maxMessageLength}/>

src/ts/pages/Team/index.tsx

@@ -13,7 +13,7 @@ import Scope from './components/Scope';
 import Tempo from './components/Tempo';
 import Total from './components/Total';
 import Files from './components/Files';
-import FileAnalitics from './components/FileAnalitics';
+import FileAnalytics from './components/FileAnalytics';
 import Type from './components/Type';
 import Week from './components/Week';
 import Month from './components/Month';
@@ -36,7 +36,7 @@ function getViewById(page?: string) {
   if (page === 'hours') return <Hours mode={mode}/>;
   if (page === 'files') return <Files/>;
   if (page === 'removedFiles') return <Files type="removed" />;
-  if (page === 'extension') return <FileAnalitics mode={mode}/>;
+  if (page === 'extension') return <FileAnalytics mode={mode}/>;
   if (page === 'release') return <Release mode={mode}/>;
   if (page === 'commits') return <Commits/>;
   if (page === 'changes') return <Changes/>;

src/ts/pages/Welcome/index.tsx

@@ -6,7 +6,7 @@ import {
   getStringFromFileList,
   getStringsForParser,
 } from 'ts/components/DropZone/helpers';
-import localization from 'ts/helpers/Localization';
+import { t } from 'ts/helpers/Localization';
 import dataGripStore from 'ts/store/DataGrip';
 
 import style from './styles/index.module.scss';
@@ -15,11 +15,11 @@ function WarningInfo() {
   return (
     <h4 className={style.welcome_warning}>
       <Description
-        text={localization.get('page.welcome.warning1')}
+        text={t('page.welcome.warning1')}
         className={style.welcome_warning_text}
       />
       <Description
-        text={localization.get('page.welcome.warning2')}
+        text={t('page.welcome.warning2')}
         className={style.welcome_warning_text}
       />
     </h4>
@@ -36,22 +36,22 @@ function Welcome() {
       <section className={style.welcome}>
         <div className={style.welcome_row}>
           <h2 className={style.welcome_first_title}>
-            {localization.get('page.welcome.step1')}
+            {t('page.welcome.step1')}
           </h2>
           <Console
             className={style.welcome_console}
             textForCopy={command}
           />
           <Description
-            text={localization.get('page.welcome.description')}
+            text={t('page.welcome.description')}
             className={`${style.welcome_description}`}
           />
           <h2 className={style.welcome_last_title}>
-            {localization.get('page.welcome.step2') === 'page.welcome.step2'
+            {t('page.welcome.step2') === 'page.welcome.step2'
               ? ''
-              : localization.get('page.welcome.step2')}
+              : t('page.welcome.step2')}
             <label className={style.welcome_title_link}>
-              {localization.get('page.welcome.step3')}
+              {t('page.welcome.step3')}
               <input
                 multiple
                 type="file"
@@ -64,7 +64,7 @@ function Welcome() {
                 }}
               />
             </label>
-            {localization.get('page.welcome.step4')}
+            {t('page.welcome.step4')}
           </h2>
         </div>
       </section>