Modify tabs

services/app/assets/css/style.scss

@@ -252,6 +252,14 @@ a {
 
 .cb-height-info {
   height: 300px;
+  .nav-link.active {
+    color: black;
+    border-bottom: 1px;
+    background-color: white;
+  }
+  .nav-link:hover {
+    color: #b60314;
+  }
 }
 
 .cursor-pointer {
@@ -363,3 +371,13 @@ a {
   animation-name: scale;
   animation-duration: 0.7s;
 }
+
+.nav-tabs {
+  border-bottom: 1px solid black;
+  .nav-item.active,
+  .nav-item:hover {
+    border-top: 1px solid black;
+    border-right: 1px solid black;
+    border-left: 1px solid black;
+  }
+}

services/app/assets/js/widgets/components/Task.jsx

@@ -1,12 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import ReactMarkdown from 'react-markdown';
 import i18n from '../../i18n';
-import Timer from './Timer';
-import CountdownTimer from './CountdownTimer';
 import ContributorsList from './ContributorsList';
-import GameContext from '../containers/GameContext';
 
 const renderTaskLink = name => {
   const link = `https://github.com/hexlet-codebattle/battle_asserts/tree/master/src/battle_asserts/issues/${name}.clj`;
@@ -30,23 +27,7 @@ const renderGameLevelBadge = level => (
   </div>
 );
 
-const TimerContainer = ({ time, timeoutSeconds, gameStatusName }) => {
-  const { current } = useContext(GameContext);
-
-  if (current.matches('game_over')) {
-    return gameStatusName;
-  }
-
-  if (timeoutSeconds) {
-    return <CountdownTimer time={time} timeoutSeconds={timeoutSeconds} />;
-  }
-
-  return <Timer time={time} />;
-};
-
-const Task = ({
- task, time, gameStatusName, timeoutSeconds,
-}) => {
+const Task = ({ task }) => {
   if (_.isEmpty(task)) {
     return null;
   }
@@ -62,15 +43,7 @@ const Task = ({
               <span className="card-subtitle mb-2 text-muted">{task.name}</span>
             </div>
           </h6>
-          <div className="card-text">
-            {time && (
-            <TimerContainer
-              time={time}
-              timeoutSeconds={timeoutSeconds}
-              gameStatusName={gameStatusName}
-            />
-)}
-          </div>
+
         </div>
         <div className="d-flex align-items-stretch flex-column">
           <div className="card-text mb-0  h-100  overflow-auto">

services/app/assets/js/widgets/containers/InfoWidget.jsx

@@ -1,10 +1,27 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import ChatWidget from './ChatWidget';
 import Task from '../components/Task';
 import { gameTaskSelector, gameStatusSelector, leftExecutionOutputSelector } from '../selectors';
 import Output from '../components/ExecutionOutput/Output';
 import OutputTab from '../components/ExecutionOutput/OutputTab';
+import CountdownTimer from '../components/CountdownTimer';
+import Timer from '../components/Timer';
+import GameContext from './GameContext';
+
+const TimerContainer = ({ time, timeoutSeconds, gameStatusName }) => {
+  const { current } = useContext(GameContext);
+
+  if (current.matches('game_over')) {
+    return gameStatusName;
+  }
+
+  if (timeoutSeconds) {
+    return <CountdownTimer time={time} timeoutSeconds={timeoutSeconds} />;
+  }
+
+  return <Timer time={time} />;
+};
 
 const InfoWidget = () => {
   const taskText = useSelector(gameTaskSelector);
@@ -19,9 +36,13 @@ const InfoWidget = () => {
       <div className="col-12 col-lg-6 p-1 cb-height-info">
         <div className="d-flex flex-column h-100">
           <nav>
-            <div className="nav nav-tabs bg-gray text-uppercase font-weight-bold text-center" id="nav-tab" role="tablist">
+            <div
+              className="nav nav-tabs bg-gray text-uppercase font-weight-bold text-center"
+              id="nav-tab"
+              role="tablist"
+            >
               <a
-                className="nav-item nav-link flex-grow-1 active  text-black rounded-0 py-2 px-5"
+                className="nav-item nav-link col-3 active rounded-0 px-1 py-2"
                 id="task-tab"
                 data-toggle="tab"
                 href="#task"
@@ -32,16 +53,25 @@ const InfoWidget = () => {
                 Task
               </a>
               <a
-                className="nav-item nav-link flex-grow-1 text-black rounded-0 p-2 block"
+                className="nav-item nav-link col-3 rounded-0 px-1 py-2"
                 id={`${idOutput}-tab`}
                 data-toggle="tab"
                 href={`#${idOutput}`}
                 role="tab"
                 aria-controls={`${idOutput}`}
                 aria-selected="false"
               >
-                {isShowOutput && <OutputTab sideOutput={leftOutput} side="left" />}
+                Output
               </a>
+              <div
+                className="rounded-0 text-center bg-white col-6 text-black px-1 py-2"
+              >
+                <TimerContainer
+                  time={startsAt}
+                  timeoutSeconds={timeoutSeconds}
+                  gameStatusName={gameStatusName}
+                />
+              </div>
             </div>
           </nav>
           <div className="tab-content flex-grow-1 overflow-auto " id="nav-tabContent">
@@ -53,9 +83,6 @@ const InfoWidget = () => {
             >
               <Task
                 task={taskText}
-                time={startsAt}
-                timeoutSeconds={timeoutSeconds}
-                gameStatusName={gameStatusName}
               />
             </div>
             <div
@@ -64,7 +91,12 @@ const InfoWidget = () => {
               role="tabpanel"
               aria-labelledby={`${idOutput}-tab`}
             >
-              {isShowOutput && <Output sideOutput={leftOutput} />}
+              {isShowOutput && (
+                <>
+                  <OutputTab sideOutput={leftOutput} side="left" />
+                  <Output sideOutput={leftOutput} />
+                </>
+              )}
             </div>
 
           </div>