catStafInfo

src/actions/getStaffByCategoryIdAction.js

@@ -0,0 +1,35 @@
+import * as types from '../constants/actionTypes'
+
+const axios = require('axios')
+
+const CategoryRequestById = payload => ({
+	type: types.CATEGORY_REQUEST_BY_ID,
+	payload
+});
+
+const CategoryRequestSuccessById = payload => ({
+	type: types.CATEGORY_REQUEST_SUCCESS_BY_ID,
+	payload
+});
+
+const CategoryRequestFailById = payload => ({
+	type: types.CATEGORY_REQUEST_FAIL_BY_ID,
+	payload
+});
+
+export const getCategorysDataById = (payload) => {
+	console.log(payload)
+	return dispatch => {
+		dispatch(CategoryRequestById());
+		return axios.get(`http://127.0.0.1:2000/api/categories?id=${payload}`)
+			.then(res => {
+				setTimeout(() => {
+					dispatch(CategoryRequestSuccessById(res))
+				}, Math.random() * 1000);
+			})
+			.catch(err => {
+				dispatch(CategoryRequestFailById(err));
+			})
+
+	};
+};

src/common/authRenderField.js

@@ -5,7 +5,7 @@ export const authRenderField = ({input, meta: {touched, error}, label, type, pla
         {console.log(input.value)} 
         <label className="form__input-label" htmlFor="origin">
             {label}
-            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
+            <input  className="input" type = {type} placeholder = {placeholder} {...input} />
         </label>
         {touched && error && <span>{error}</span>}
     </div>

src/common/regRenderField.js

@@ -2,10 +2,9 @@ import React from "react";
 
 export const regRenderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
     <div className="form__input-box">
-    {console.log(input.value)}
         <label className="form__input-label" htmlFor="origin">
             {label}
-            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
+            <input  className="input" type = {type} placeholder = {placeholder} {...input} />
         </label>
         {touched && error && <span>{error}</span>}
     </div>

src/components/AllStaffs/index.js

@@ -24,6 +24,7 @@ class AllStaffs extends Component {
                     {inputStaffs.map((el,key)=>(
                         <Link to={`/staff/${el.id}`} key={key}>
                             <div className="staff">
+                                <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />
                                 {el.title} {el.price}
                             </div>
                         </Link> 

src/components/Auth/authButtons.js

@@ -1,18 +1,23 @@
-import React, {Component} from "react"
-import {Link} from "react-router-dom"
+import React, { Component } from "react"
+import { Link } from "react-router-dom"
 
 class Authbuttons extends Component {
-  render() {
-    return (
-        <div className="auth__button">
-
-        
-          <Link to="/auth"  > <button className = "button btn1">Войти</button></Link>
-          <Link to="/registration" > <button className = "button btn2">Зарегистрироваться</button></Link>
-
-        </div>
-    )
-  }
+    render() {
+        return (
+            <div className="auth__button">
+                <Link to="/auth"  >
+                    <button className="button btn1">
+                        Войти
+                    </button>
+                </Link>
+                <Link to="/registration" >
+                    <button className="button btn2">
+                        Зарегистрироваться
+                    </button>
+                </Link>
+            </div>
+        )
+    }
 }
 
 export default Authbuttons;

src/components/Auth/registration.js

@@ -3,89 +3,95 @@ import { Field, reduxForm } from 'redux-form'
 
 import Authbuttons from './authButtons'
 
-import {regValidate} from '../../utils/regValidate'
-import {regRenderField} from '../../common/regRenderField'
-
-
-
+import { regValidate } from '../../utils/regValidate'
+import { regRenderField } from '../../common/regRenderField'
 
 const RegistrForm = props => {
 
+    const { handleSubmit, pristine, reset, postUsersData } = props
 
-  const { handleSubmit, pristine, reset, postUsersData } = props
-  const submit = (values) =>{
-    values.avatar = "https://site.com"
-    values.isAdmin = 1
-    values.description = "gfdfgdgdf"
-    postUsersData(values)
-  
-}
-  return (
-    <div>
-      <Authbuttons />
-      <form onSubmit={handleSubmit(submit)} className="form">
-        <div>
-          <div>
-            <Field
-              name="login"
-              component={regRenderField}
-              type="text"
-              placeholder="Логин"
-              className="input"
-            />
-          </div>
+    const submit = (values) => {
+        values.avatar = "https://site.com"
+        values.isAdmin = 0
+        values.description = "bad_boy"
+        postUsersData(values)
+    }
 
-          <div>
-            <Field
-              name="password"
-              component={regRenderField}
-              type="password"
-              placeholder="Пароль"
-              className="input"
-              />
-          </div>
+    return (   
+        <div className="formdiv">
+            <div>
+            <Authbuttons />
+            <form onSubmit={handleSubmit(submit)} className="form">
+                <div>
+                    <div>
+                        <Field
+                            name="login"
+                            component={regRenderField}
+                            type="text"
+                            placeholder="Логин"
+                            className="input"
+                        />
+                    </div>
 
-          <div>
-            <Field
-              name="name"
-              component={regRenderField}
-              type="text"
-              placeholder="Имя"
-              className="input"
-            />
-          </div>
-          <div>
-            <Field
-              name="phone"
-              component={regRenderField}
-              type="text"
-              placeholder="+380XXXXXXXX"
-              className="input"
-            />
-          </div>
-          <div>
-            <Field
-              name="email"
-              component={regRenderField}
-              type="email"
-              placeholder="email@example.com"
-              className="input"
-            />
-          </div>
-        </div>
-        <div>
-          <button type="submit" disabled={pristine} className="button">
-            Отправить
-          </button>
-          <button type="button" disabled={pristine} onClick={reset} className="button">
-            Очистить поля
-          </button>
+                    <div>
+                        <Field
+                            name="password"
+                            component={regRenderField}
+                            type="password"
+                            placeholder="Пароль"
+                            className="input"
+                        />
+                    </div>
+
+                    <div>
+                        <Field
+                            name="name"
+                            component={regRenderField}
+                            type="text"
+                            placeholder="Имя"
+                            className="input"
+                        />
+                    </div>
+                    <div>
+                        <Field
+                            name="phone"
+                            component={regRenderField}
+                            type="text"
+                            placeholder="+380XXXXXXXX"
+                            className="input"
+                        />
+                    </div>
+                    <div>
+                        <Field
+                            name="email"
+                            component={regRenderField}
+                            type="email"
+                            placeholder="email@example.com"
+                            className="input"
+                        />
+                    </div>
+                </div>
+                <div>
+                    <button type="submit" 
+                        disabled={pristine} 
+                        className="button"
+                    >
+                        Отправить
+                    </button>
+                    <button type="button" 
+                        disabled={pristine} 
+                        onClick={reset} 
+                        className="button"
+                    >
+                        Очистить поля
+                    </button>
+                </div>
+            </form>
+            </div>
         </div>
-        </form>
-      </div>
 
-  )
+    )
 }
 
-export default reduxForm({ form: 'registrForm', validate: regValidate})(RegistrForm)
+export default reduxForm({ form: 'registrForm', validate: regValidate })(RegistrForm)
 

src/components/CategoryStaffs/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+
+import Loader from 'react-loader-spinner';
+import AddNewStaff from '../../components/BtnAddNewStaff'
+
+class CategoryStaffs extends Component {
+    
+    render() {
+        const { infoCategory, isFetching } = this.props
+        console.log(infoCategory)
+
+        let data;
+            if(isFetching===true){
+                
+                data = <div className="loader"> 
+                    <Loader type="Triangle"
+                        color="#FD7F71"
+                        height="100"	
+                        width="100"
+                    /> 
+                </div> 
+            }
+            else{
+                data = <div className="staffs">
+                    {infoCategory.map((el,key)=>(
+                        <Link to={`/staff/${el.id}`} key={key}>
+                            <div className="staff">
+                                <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />
+                                {el.title} {el.price}
+                            </div>
+                        </Link> 
+                    ))}    
+                </div>
+            }
+        return (
+
+           <div className="content">
+
+                {data}
+                <AddNewStaff/>
+           </div> 
+            
+        );
+    }
+}
+
+export default CategoryStaffs;

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -3,59 +3,66 @@ import { Field, reduxForm } from 'redux-form';
 import { Link } from "react-router-dom";
 
 const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewStaff } = props
+    const { handleSubmit, pristine, reset, submitting, AddNewStaff, allCategory} = props
     
     const submit = values => {
         values.img = "http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg"
         values.staff = "Машина"
         values.state = 1
         values.userId = 1
-        values.categoryId = 1
+        
         AddNewStaff(values)
     };
-
+    console.log(allCategory)
     return (
-        <form onSubmit={handleSubmit(submit)}>
+        <div className="formdiv">
             <div>
-
-                <div>
+                <form onSubmit={handleSubmit(submit)} className="form">
                     <Field
                         name="title"
                         component="input"
                         type="text"
                         placeholder="Название"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <div>
+
                     <Field
                         name="description"
                         component="input"
                         type="text"
                         placeholder="Описание"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <div>
+
                     <Field
                         name="price"
                         component="input"
                         type="number"
                         placeholder="Цена"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <button type="submit" disabled={pristine || submitting}>
-                    <Link to="/" >Submit</Link>
-                </button>
-                <button type="button" disabled={pristine || submitting} onClick={reset}>
-                    <Link to="/" >Clear Values</Link>
-                </button>
+
+                    <Field
+                        name="categoryId"
+                        component="select"
+                        
+                        className="input"
+                    >
+                        
+                        {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
+                    </Field>
+
+                    <div>
+                        <button type="submit" disabled={pristine || submitting} className="button" >
+                            Submit
+                        </button>
+                        <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
+                            Clear Values
+                        </button>
+                    </div>
+                </form>
             </div>
-        </form>
+        </div>
     )
 }
 

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -1,17 +1,32 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../../../actions/categoryAction';
+
+import { bindActionCreators } from 'redux';
 
 import MDSpinner from "react-md-spinner";
 
 import Form from '../FormAddNewStaff/SendingStaffForm'
 
 class FormAddNewStaff extends Component {
-    render() {
+    componentDidMount() {
+        this.props.getCategoriesData();
         
-        const { isFetching, AddNewStaff } = this.props
+    }
+    render() {
         
+        const { isFetching, AddNewStaff, allCategory } = this.props
+        let data;
+        if (allCategory.data===undefined){
+            data = []
+        }
+        else{ 
+            const category = allCategory.data.filter(el => el.parentId !== 0)
+            data = <Form AddNewStaff={AddNewStaff} allCategory={category}/>
+        }
         return (
             <div>
-               <Form AddNewStaff={AddNewStaff} />
+               {data}
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
  
 
@@ -20,4 +35,13 @@ class FormAddNewStaff extends Component {
     }
 }
 
-export default FormAddNewStaff;
+const mapStateToProps = state =>({
+    allCategory: state.category.allCategory,
+})
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default FormAddNewStaff = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FormAddNewStaff);

src/components/Header/Myprofile.js

@@ -1,25 +1,23 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import { Avatar } from 'antd';
+
 class Myprofile extends Component {
+
     render() {
         return (
-
-
-        <div className="header__auth">
-            <Link to="/auth" className="link">
-                <div className="header__auth__container">
-                    <div className="avatar">
-                        <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
-                    </div>
-                    <div>
-                        Мой профиль
-                    </div>
-
-
-                </div>    
-            </Link>    
-        </div>
+            <div className="header__auth">
+                <Link to="/auth" className="link">
+                    <div className="header__auth__container">
+                        <div className="avatar">
+                            <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
+                        </div>
+                        <div className="text">
+                            Мой профиль
+                        </div>
+                    </div>    
+                </Link>    
+            </div>
         );
     }
 }

src/components/Header/logo.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from '../../img/logoBazar.png';
 import { Link } from "react-router-dom";
+
 class HeaderLogo extends Component {
     render() {
         return (

src/components/Header/searchLine.js

@@ -2,112 +2,32 @@ import React, { Component } from 'react';
 
 import { Link } from "react-router-dom";
 
-
-
-
-//     axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Одежда",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "0"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/staffs',
-//     {
-//         "title": "Куртка зимняя",
-//         "description": "Очень теплая",
-//         "staff": "Стаф. Не знаю, что вы хотите тут, но я сделал",
-//         "price": "80000",
-//         "state": "1",
-//         "img": "https://militarist.ua/upload/tmp/resize_420_420/ed8006d3e4b83a6643cd16a3247463de.jpg",
-//         "userId": "1",
-//         "categoryId": "3"
-//     }
-    
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Женская",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "1"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Мужская одежда",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "1"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-
-
-
-
 class SearchLine extends Component {
     
-    changeHandler = (e)=>{
-            const { changeInputValue, searchStaff } = this.props
-            changeInputValue(e.target.value)
-             searchStaff(e.target.value)
-            
-        }
-    send = () =>{
-            const { inputData, searchStaff } = this.props
-            //console.log(this.props)
-            searchStaff(inputData)
+    changeHandler = e => {
+        this.props.changeInputValue(e.target.value)
+        this.props.searchStaff(e.target.value)        
+    }
+    
+    send = () => {
+        const { inputData, searchStaff } = this.props
+        searchStaff(inputData)
     } 
 
-    // <div class="search-input">
-    //     <input type="text">
-    //     <span class="highlight"></span>
-    //     <span class="bar"></span>
-    //     <label>Search here</label>
-    //     <span class="glyphicon glyphicon-search"></span>
-    //     <span class="glyphicon glyphicon-remove"></span>
-    // </div>
-
     render() {
         const { inputData } = this.props
         return (
-
             <div className="header__searchLine">
                 <input onChange={this.changeHandler}  className="searchInput" placeholder="Что будем покупать?"/>
                     <Link to = {`/search/${inputData}`} >
                         <button onClick={this.send} className="searchBtn" > 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" className="icon">
-                                <rect className="fill-none" width="32" height="32"/>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" className="icon">
+                                <rect className="fill-none" width="30" height="30"/>
                                     <path className="fill-currentcolor" d="M29.82861,24.17139,25.56519,19.908A13.0381,13.0381,0,1,0,19.908,25.56525l4.26343,4.26337a4.00026,4.00026,0,0,0,5.65723-5.65723ZM5,14a9,9,0,1,1,9,9A9.00984,9.00984,0,0,1,5,14Z"/>
                             </svg>
                         </button>
                     </Link>
             </div>
-
         );
     }
 }

src/components/LeftMenu/PodCategory.js

@@ -15,7 +15,7 @@ class PodCatygory extends Component {
         this.podCaty = allCategory.filter(el => el.parentId === categoryId)
 
         let datacat = this.podCaty.map((el, key) =>
-            <Link to={`/staff/${el.id}`}  key={`podCaty${key}`}>
+            <Link to={`/category/staff/${el.id}`}  key={`podCaty${key}`}>
                 <li key={`${el.id}`} className="ant-menu-item" role="menuitem" style={{"paddingLeft": "48px"}}>
                     {el.title}
                 </li>

src/constants/actionTypes.js

@@ -15,6 +15,11 @@
     export const ADD_NEW_CATEGORY_REQUEST_SUCCESS = "ADD_NEW_CATEGORY_REQUEST_SUCCESS";
     export const ADD_NEW_CATEGORY_REQUEST_FAIL = "ADD_NEW_CATEGORY_REQUEST_FAIL";
 
+    //getStaffByCategoryIdAction
+    export const CATEGORY_REQUEST_BY_ID = "CATEGORY_REQUEST_BY_ID";
+    export const CATEGORY_REQUEST_SUCCESS_BY_ID = "CATEGORY_REQUEST_SUCCESS_BY_ID";
+    export const CATEGORY_REQUEST_FAIL_BY_ID = "CATEGORY_REQUEST_FAIL_BY_ID";
+
 //Staff
     //staffAction
     export const GET_STAFF_INFO_DATA = "GET_STAFF_INFO_DATA";

src/container/CategoryStaffInfo.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/getStaffByCategoryIdAction";
+import { bindActionCreators } from "redux";
+
+import CategoryStaffs from '../components/CategoryStaffs'
+import LeftMenu from '../container/LeftMenu'
+import Header from '../container/Header'
+
+class CategoryStaffInfo extends Component {
+    constructor(props){
+        super(props)
+        
+       
+    }
+    componentDidMount(){
+        const { getCategorysDataById, match } = this.props
+        getCategorysDataById(match.params.id)
+        
+        console.log(this.state)
+    }
+
+    componentDidUpdate(prevProps){
+        const { getCategorysDataById, match } = this.props
+        if(prevProps.match.params.id !==match.params.id ){
+            getCategorysDataById(match.params.id)
+        }
+    }
+
+    render() {
+        const {  infoCategory, isFetching  } = this.props
+        console.log(this.props)
+        
+       
+        return (
+            <div>
+                <Header />
+                <div className="contentDiv">
+                    <LeftMenu />
+                    <CategoryStaffs infoCategory={infoCategory} isFetching={isFetching}  />
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+
+    infoCategory: state.categoryById.infoCategory,
+    isFetching: state.categoryById.isFetching,
+    trigger: state.categoryById.trigger,
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+  export default CategoryStaffInfo = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(CategoryStaffInfo);

src/container/Header.js

@@ -6,14 +6,19 @@ import 'antd/dist/antd.css';
 
 import { connect } from 'react-redux';
 import * as actions from "../actions/searchStaffAction";
+import { getUsersData } from '../actions/usersAuthActions'
 import { bindActionCreators } from "redux";
 
 class Header extends Component {
-    render() {  
+    render() { 
+        const { inputData, searchStaff, changeInputValue } = this.props
         return (
             <div className="header">
                <HeaderLogo />
-               <SearchLine {...this.props}/>
+               <SearchLine inputData={inputData}
+                    searchStaff={searchStaff}
+                    changeInputValue={changeInputValue} 
+                />
                <Myprofile/>
             </div>
         );
@@ -22,10 +27,11 @@ class Header extends Component {
 
 const mapStateToProps = state => ({
         inputData: state.searchStaff.inputData,
-        isFetching: state.searchStaff.isFetching
+        isFetching: state.searchStaff.isFetching,
+        
   });
   
-  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
   
   export default Header = connect(
         mapStateToProps,

src/container/renderRegistration.js

@@ -1,27 +1,27 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
-import { connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import RegistrForm from "../components/Auth/registration";
 import * as actions from "../actions/usersRegistrActions";
 
-class RenderRegistration extends Component {      
-        render() {
-          return (
-            <div>
-              <RegistrForm {...this.props} />
-            </div>       
-          );
-        }
-  }
-  
+class RenderRegistration extends Component {
+    render() {
+        return (
+            <Fragment>
+                <RegistrForm {...this.props} />
+            </Fragment>
+        );
+    }
+}
+
 
 const mapStateToProps = state => ({
-  });
-  
+});
+
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
-  
+
 export default RenderRegistration = connect(
-      mapStateToProps,
-      mapDispatchToProps
-  )(RenderRegistration);
+    mapStateToProps,
+    mapDispatchToProps
+)(RenderRegistration);

src/reducer/categoryById.js

@@ -0,0 +1,38 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    infoCategory: [],
+    isFetching: false,
+    error: null,
+    
+  };
+
+  export default (state = initState, { type, payload }) => {
+      console.log(payload)
+      switch (type) {
+        
+        case types.CATEGORY_REQUEST_BY_ID: {
+          return {
+          ...state,
+          isFetching: true,
+          infoCategory: [],
+          }
+        } 
+        case types.CATEGORY_REQUEST_SUCCESS_BY_ID: { 
+          return {
+          ...state,
+          isFetching: false,
+          infoCategory: payload.data.staffs,
+          
+          }
+        }
+        case types.CATEGORY_REQUEST_FAIL_BY_ID: {
+          return {
+          ...state,
+          isFetching: false,
+          error: "ERROR"
+          }
+        }
+        default: return state;    
+    }
+  };

src/reducer/index.js

@@ -12,6 +12,7 @@ import searchStaffById from './searchStaffById'
 
 import category from './category'
 import addCategory from './addCategory'
+import categoryById from './categoryById'
 
 export default  combineReducers({
     usersRegistr: usersRegistration,
@@ -26,6 +27,7 @@ export default  combineReducers({
 
     category,
     addCategory,
+    categoryById,
 
     form: formReducer
 })

src/router.js

@@ -8,6 +8,7 @@ import MainPage from "./container/MainPage";
 // import Form from './components/Auth/index'
 // import RegistrForm from './components/Auth/registration'
 import MainPageStaffInfo from './container/MainPageStaffInfo'
+import CategoryStaffInfo from './container/CategoryStaffInfo'
 
 import SearchStaffs from './container/SearchStaff'
 
@@ -24,6 +25,7 @@ export default () => (
             <Route path="/authorisation" exact component={RenderAuthorisation} />
             <Route path="/auth" exact component= {RenderAuthorisation}/>
             <Route path="/registration" exact component={RenderRegistration} />
+            <Route path="/category/staff/:id" exact component={CategoryStaffInfo} />
             <Route path="/staff/:id" exact component={MainPageStaffInfo} />
             <Route path="/search/:title" exact component={SearchStaffs} />
                 <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />

src/style/abstracts/variables.scss

@@ -20,7 +20,4 @@ $color-grey-transparent: rgba(247, 249, 251, 0.7);
 $color-shadow:#d4d4d4;
 $el-color:#FD7F71;
 // BASE
-$color-backgtound: #f5f8fb;
-$box-shadow: 0 0 16px 0 $color-shadow;
-$input-box-shadow: 0 8px 16px rgba($color-black, 0.1);
-$layout-border-radius: 2px;
+$color-backgtound: #f5f8fb;

src/style/base/_base.scss

@@ -3,97 +3,9 @@
 *:before {
 	margin: 0;
 	padding: 0;
-	-webkit-box-sizing: inherit;
-	box-sizing: inherit;
+	box-sizing:border-box;
 }
-
-html {
-	font-size: 62.5%;
-}
-
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
-	padding: 0;
-	margin: 0;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-fieldset,
-img {
-	border: 0;
-}
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-strong,
-th,
-var {
-	font-weight: normal;
-	font-style: normal;
-}
-ol,
-ul {
-	list-style: none;
-}
-caption,
-th {
-	text-align: left;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: normal;
-	font-size: 100%;
-}
-
-abbr,
-acronym {
-	border: 0;
-}
-
-body {
-	font-family: "roboto", sans-serif;
-	line-height: 1.7;
-	box-sizing: border-box;
-	background: $color-backgtound;
-	background-color: #f6f8f9;
-	min-width: 320px;
-	max-width: 1350px;
-}
-
-a:hover {
-	text-decoration: none;
-}
-
-button {
-	cursor: pointer;
+body{
+	// max-width: 1140px;
+	margin: 0 auto ;
 }

src/style/base/_typography.scss

@@ -1,14 +0,0 @@
-.h1-tag {
-	font-size: 3rem;
-	margin-bottom: 4rem;
-
-	&--add {
-		color: $color-blue-light-dark;
-		cursor: pointer;
-		margin-left: 2rem;
-
-		&:hover {
-			color: $color-blue-dark;
-		}
-	}
-}

src/style/components/_allStaff.scss

@@ -77,6 +77,10 @@
 // }
 
 
-
+.imgStaff{
+    width: 100%;
+    padding: 5px ;
+   
+}
   
 

src/style/components/_formLogin.scss

@@ -13,6 +13,7 @@
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
+    
 }
 
 h1, .input::-webkit-input-placeholder, .button {
@@ -37,7 +38,8 @@ h1 {
     box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
     padding-bottom: 40px;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: rgba(247, 240, 240, 0.7);;
+    
     h1 {
         box-sizing: border-box;
         padding: 20px;
@@ -70,6 +72,8 @@ h1 {
     }
 }
 
+
+
 .button {
     border: none;
     background: $el-color;
@@ -78,7 +82,7 @@ h1 {
     padding: 6px;
     width: 200px;
     color: white;
-    margin-left: 25px;
+    margin: 25px auto;
     box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
     &:hover { 
         transform: translateY(-3px);

src/style/components/_header.scss

@@ -10,19 +10,6 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-			
-		.div{
-			width: 100%;		
-		}
-
-		.input{
-			width: 60%;	
-		}
-
-		.link{
-			width: 20%;
-		}
-
 	}
 
 	&__auth {
@@ -38,7 +25,12 @@
 			align-items: center;
 
 			.avatar{
-				padding: 5px;
+				padding-right: 5px;
+			}
+
+			.text{
+				color: $el-color;
+				font-size: 18px;
 			}
 		}
 	}