#78 Исправил баги

front/src/components/Account/Account.css

 h4 {
   margin: 2rem 0rem 1rem;
 }
+.table-wrap {
+  margin-top: 0;
+  padding-top: 0;
+  overflow: auto;
+  position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 
-.table-image > td,
-th {
+  overflow-y: auto; 
+  height: 250px;
+}
+.table-image > td,th {
   vertical-align: middle;
   text-align: center;
 }
+.table thead{
+  margin-top: 0;
+  padding-top: 0;
+}
 .table{
+  height: 100%;
+  text-align: center;
   margin: 0 auto;
-    border-collapse: collapse;
   font-size: 0.9em;
   font-family: sans-serif;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-    width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  border-collapse: collapse; width: 100%;
 }
-.table>thead{
+/* .table>thead{
     background-color: #009879;
-    color: #ffffff;
     text-align: left;
 
+} */
+.table th {
+  position: sticky; 
+  top: 0;
+  color: #ffffff;
+  background:#424141;
+}
+.table td, th {
+  padding: 0 5px;
+  box-sizing: border-box;
+  height: 40px;
 }
 .table,td,th {
   border: 1px solid black;
-    border-collapse: collapse;
-    padding: 5px;
-    height: 100%;
   text-align: center;
 }
 .flex-space {
@@ -63,13 +88,7 @@ th {
   box-shadow: 0 0 0 4px rgba(0, 0, 255, .2);
 }
 
-/* .dropdown {
-  position: relative;
-  display: inline-block;
-} */
-
 .dropdown-content {
-  /* display: none; */
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
@@ -85,6 +104,21 @@ th {
   display: block;
 }
 
-.dropdown a:hover {background-color: #ddd;}
+.dropdown a:hover {background-color: #ddd;} */
 
 .show {display: block;}
+
+/* @media screen and (max-width: 600px){
+  .table-wrap {
+    overflow: auto;
+    position: relative;
+  }
+  .table{
+    display: inline-block;
+    vertical-align: top;
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+} */
\ No newline at end of file

front/src/components/Account/Account.js

@@ -25,6 +25,7 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
  
   return (
     <>
+    <div className="table-wrap">
       <table className="table">
         <thead>
           <tr>
@@ -32,7 +33,7 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
             <th>Дата платежа</th>
             <th>Компания</th>
             <th>Назначение</th>
-            <th>Основание договора/счета</th>
+            <th>Договор/Счет</th>
             <th>Контрагент</th>
             <th>Приоритет</th>
             <th>Сумма платежа</th>
@@ -107,6 +108,7 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
           ))}
         </tbody>
       </table>
+    </div>
       {showModal.show && <Modal src={showModal.src} close={closeModal} />}
     </>
   );

front/src/components/Header/Header.css

 .Header {
     background: #2c2c2e;
-    padding: 5px 50px;
+    padding: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -13,8 +13,8 @@
     font-weight: bold;
     font-size: 16px;
     color: #c7c7cc;
-    margin-left: 20px;
     text-transform: capitalize;
+    margin: 10px auto;
 }
 .Header__link:active {
     color: #FF077D;
@@ -30,9 +30,65 @@
     margin-left: 10px;
     outline: none;
     cursor: pointer;
+    margin-bottom: 20px;
 }
 .Header__button-link {
     text-decoration: none;
     font-size: 12px;
     color: white;
 }
+.Header__menu{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    left: 0;
+    z-index: 100; 
+    background: #2c2c2e;
+    top:36px;
+    border-top: 1px solid red;
+}
+.Header__menu--none{
+    display: none;
+}
+.Header__accaunt{
+    top:52px;
+    justify-content: flex-end;
+    padding: 10px 10px 10px 10px;
+    z-index: 100;
+    border-bottom: 1px solid red;
+}
+
+@media screen and (min-width:600px){
+    .Header__menu{
+        flex-direction: row;
+    }
+    
+    .Header__link{
+        margin:0 20px 0 0;
+    }
+    .Header{
+        padding: 10px 50px;
+    }
+    .Header__button{
+        margin-bottom: 0;
+    }
+}
+@media screen and (min-width:1500px) {
+    .Header__menu{
+        position:unset;
+        display: flex;
+        padding-top:0;
+        background: inherit;
+        border-top: none;
+    }
+    .Header__accaunt{
+        border-bottom:none;
+    }
+    .Header{
+        padding: 5px 50px;
+    }
+    
+}
\ No newline at end of file

front/src/components/Header/Header.js

 import { Button, Menu, MenuItem } from "@material-ui/core";
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
 import logo from "../../assets/images/logo-white.svg";
 import "./Header.css";
@@ -8,6 +8,23 @@ import UserMenu from "./Menus/UserMenu/UserMenu";
 
 const Header = ({ user }) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
+  const [state,setState]=useState({menuShow:false,accauntShow:false})
+  const classNameOfAccaunt=state.accauntShow ? 'Header__menu Header__accaunt': 'Header__menu--none';
+  const classNameOfMenu=state.menuShow? 'Header__menu': 'Header__menu--none';
+
+  const [windowWidth,setWindowWidth]=useState(window.innerWidth);
+  const handleResize=e=>{
+    setWindowWidth(e.target.window.innerWidth);
+  }
+  useEffect(()=>{
+    window.addEventListener("resize", handleResize);
+  },[]);
+
+  useEffect(()=>{
+    if(windowWidth>1500){
+      setState({menuShow:true,accauntShow:true});
+    }
+  },[windowWidth])
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -16,12 +33,37 @@ const Header = ({ user }) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  const menuClick=()=>{
+    if(!state.menuShow){
+      setState(prevState=>{
+        return {...prevState,menuShow:true}
+      })
+    }
+    else{
+      setState(prevState=>{
+        return {...prevState,menuShow:false}
+      })
+    }
+  };
+  const accauntClick=()=>{
+    if(!state.accauntShow){
+      setState(prevState=>{
+        return {...prevState,accauntShow:true}
+      })
+    }
+    else{
+      setState(prevState=>{
+        return {...prevState,accauntShow:false}
+      })
+    }
+  }
   return (
     <div className="Header">
       <NavLink to="/">
         <img src={logo} alt="logo" />
       </NavLink>
-      <menu>
+      <button className={windowWidth>1500? 'Header__menu--none':"UserMenu__btn Header__burger"} onClick={menuClick}>Menu</button>
+      <menu className={classNameOfMenu}>
         {user && user.role.includes("viewAllPayments") && (
           <Fragment>
           <Button
@@ -112,7 +154,8 @@ const Header = ({ user }) => {
         )}
         
       </menu>
-      <div>{user ? <UserMenu user={user} /> : <AnonymousMenu />}</div>
+      <button className={windowWidth>1500? 'Header__menu--none':"UserMenu__btn Header__burger"} onClick={accauntClick}>Профиль</button>
+      <div className={classNameOfAccaunt}>{user ? <UserMenu user={user} /> : <AnonymousMenu />}</div>
     </div>
   );
 };

front/src/components/Header/Menus/UserMenu/UserMenu.css

 .UserMenu__title {
     color: white;
     margin: 0;
+    font-size: 16px;
 }
 .UserMenu__btn {
     border-radius: 18px;
@@ -13,3 +14,8 @@
     outline: none;
     cursor: pointer;
 }
+@media screen and (min-width:1200px){
+    .UserMenu__title{
+        font-size: 20px;
+    }
+}

front/src/components/RedirectToAuth/RedirectToAuth.css

 .Redirect {
     max-width: 500px;
-    margin: 0 auto;
+    margin: 50px auto;
+}
+.Redirect__inside{
+    display: flex;
+    flex-wrap: wrap;
 }
 .btn {
     text-decoration: none;
@@ -8,5 +12,19 @@
     padding: 10px;
     background: linear-gradient(64.35deg,#ff7488 9.2%,#ff077d 89.76%);
     color: white;
-    border-radius: 10px
+    border-radius: 10px;
+    /* display: inline; */
+}
+.Redirect__title{
+    font-size: 18px;
+}
+@media screen  and (min-width:600){
+    .Redirect__title{
+        font-size: 20px;
+    }
+}
+@media screen and (min-width:1500) {
+    .Redirect{
+        margin: 20px auto;
+    }
 }
\ No newline at end of file

front/src/components/RedirectToAuth/RedirectToAuth.js

@@ -6,11 +6,15 @@ const RedirectToAuth = () => {
     return (
         <Fragment>
             <div className='Redirect'>
-                <h1>Добро пожаловать во froot.kz</h1>
-                <p>Если у вас еще нет аккаунта, пройдите по странице
-                    <NavLink className='btn' to='/register'> Регистрация
-                    
-                    </NavLink></p><p> Если у вас уже имеется аккаунт <NavLink className='btn' to='/login'>Войти</NavLink></p>
+                <h1 className='Redirect__title'>Добро пожаловать во froot.kz</h1>
+                <div className='Redirect__inside'>
+                    <p className='Redirect__text'>Если у вас еще нет аккаунта, пройдите по странице</p>
+                    <NavLink className='btn' to='/register'> Регистрация</NavLink>
+                </div>
+                <div className='Redirect__inside'>
+                    <p> Если у вас уже имеется аккаунт </p>
+                    <NavLink className='btn' to='/login'>Войти</NavLink>
+                </div>
             </div>
         </Fragment>
     )

front/src/components/UI/Buttons/ButtonClose/ButtonClose.css

+.ButtonClose {
+    padding: 3px 3px 0 3px;
+    border-radius: 3px;
+    background: white;
+    margin-left: auto;
+}
+.ButtonClose:hover {
+    box-shadow: 0 0 10px 1px #9d9ea0;
+}
\ No newline at end of file

front/src/components/UI/Buttons/ButtonClose/ButtonClose.js

+import React from 'react'
+import icon from '../../../../assets/images/icon-close.png'
+import './ButtonClose.css'
+
+const ButtonClose = ({onClickHandler}) => {
+    return (
+        <button className="ButtonClose" onClick={onClickHandler}>
+            <img className="icon" src={icon}/>
+        </button>
+    )
+}
+
+export default ButtonClose

front/src/components/UI/Modal/Modal.css

 .Modal {
+    width: 80%;
+    padding: 20px;
     z-index: 500;
     border: 1px solid #ccc;
     background-color: white;
@@ -12,8 +14,22 @@
     transform: translate(-50%, -50%);
 }
 .Modal__container {
-    padding: 20px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+}
+.Modal__img {
+    width: 100%;
+    display: block;
+}
+@media screen and (max-width: 900px){
+    .Modal, .Modal__img {
+        width: 100%;
+    }
 }
-.Modal__content {
-    padding: 20px 0;
+@media screen and (max-width: 600px){
+    .Modal, .Modal__img {
+        max-width: 100%;
+    }
 }
\ No newline at end of file

front/src/components/UI/Modal/Modal.js

+import { RadioButtonChecked } from "@material-ui/icons";
 import React, { Fragment } from "react";
 import Backdrop from "../Backdrop/Backdrop";
+import ButtonClose from "../Buttons/ButtonClose/ButtonClose"
 import "./Modal.css";
 
 const Modal = ({ src, body, close}) => {
@@ -8,11 +10,8 @@ const Modal = ({ src, body, close}) => {
       <Backdrop close={close}/>
       <div className="Modal">
         <div className="Modal__container"> 
-          <button onClick={close}>
-            Close
-          </button>
-          {src? <img src={src}/> : body }
-             
+          {src? <img className="Modal__img" src={src}/> : body }
+          <ButtonClose onClickHandler={close}/>
         </div> 
       </div>
     </Fragment>

front/src/containers/AddPayment/AddPayment.css

@@ -13,10 +13,3 @@
     margin: 0;
     margin-bottom: 10px;
 }
-.AddPayment__close {
-    margin-left: auto;
-    padding: 3px 3px 0 3px;
-    border-radius: 3px;
-    background: white;
-}
-

front/src/containers/AddPayment/AddPayment.js

 import React from "react";
 import { useDispatch } from "react-redux";
 import { createPayment } from "../../store/actions/paymentAction";
-import icon from"../../assets/images/icon-close.png"
 import {push} from 'connected-react-router'
 import PaymentForm from "../../components/UI/Forms/PaymentForm/PaymentForm";
 import './AddPayment.css';
+import ButtonClose from "../../components/UI/Buttons/ButtonClose/ButtonClose";
 
 const AddPayment = () => {
   const dispatch = useDispatch();
@@ -18,9 +18,7 @@ const AddPayment = () => {
     <div className="AddPayment">
       <div className="flex-center">
         <h1 className="AddPayment__title">Создание заявки</h1>
-          <div className="AddPayment__close" onClick={closeHandler}>
-            <img className="icon" src={icon}/>
-          </div>
+        <ButtonClose onClickHandler={closeHandler}/>
       </div>      
       <PaymentForm
         onSubmit={paymentFormSubmit}/>

tatus

+commit 9cef7ddbfb05fda524fd5df7409da6023752a9bf (HEAD -> test-deploy, origin/test-deploy)
+Author: Elena Tsoy <ltsoy1120@gmail.com>
+Date:   Mon May 17 17:58:16 2021 +0600
+
+    #86 добавлены стили и адаптив таблице
+
+commit f5122f1e99a049954e7999911aa5e0319507cad4
+Author: Elena Tsoy <ltsoy1120@gmail.com>
+Date:   Fri May 14 22:13:51 2021 +0600
+
+    #84 тестирование api-news
+
+commit bdd6f2ee527ff972deada1627a7afa26a6693808
+Author: Elena Tsoy <ltsoy1120@gmail.com>
+Date:   Fri May 14 19:14:50 2021 +0600
+
+    #84 тестирование api-users
+
+commit 6eb1a123a71d59bb0a9ee5b9a67acd790d714812
+Author: Elena Tsoy <ltsoy1120@gmail.com>
+Date:   Fri May 14 12:54:39 2021 +0600
+
+    #84 тестирование api-payments
+
+commit 6b9cd4cd20508c1f359e727576c96be89409b1da
+Author: Askar Amantayev <askar.amantayev@gmail.com>
+Date:   Thu May 13 12:41:12 2021 +0600
+
+    #78 - в конфиг файле gitlab cicd добавил настройки для jest тестов
+
+commit 53c8abac7c291f2ac68310a156c4d495f6e36b16
+Author: Askar Amantayev <askar.amantayev@gmail.com>
+Date:   Thu May 13 12:37:11 2021 +0600
+
+    #78 - в конфиг файле фронта вернул настройки чтоб смотрел на сервер
+
+commit 5a57a383d4a64924d5b018fbf5693fe558faf2f6
+Author: Askar Amantayev <askar.amantayev@gmail.com>
+Date:   Thu May 13 12:33:54 2021 +0600
+
+    #78 - исправления - после отката на пред.версию вернул тесты jest на бэк
+
+commit 023f99ad8777f75231196fe500933caebcda0d78
+Author: dmitriy <calloftrust@gmail.com>
+Date:   Sun May 9 17:28:23 2021 +0600
+
+    #78 проверка cicd
+
+commit c20d7c212509a802e6271237a1152bd7b6af28c6
+Author: dmitriy <calloftrust@gmail.com>
+Date:   Sun May 9 17:18:27 2021 +0600
+
+    #78 проверка cicd
+
+commit f357a604b042cd0f24dba71b60b9da0c35ffcd4b
+Author: dmitriy <calloftrust@gmail.com>
+Date:   Sun May 9 17:14:22 2021 +0600
+
+    #78 проверка cicd
+
+commit cae5d8c4477895181acbf1685a7c9032ac8c6187
+Author: dmitriy <calloftrust@gmail.com>
+Date:   Sun May 9 17:08:36 2021 +0600
+
+    #78 проверка cicd