Vlad1

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -6,141 +6,75 @@ import { Menu, Icon, Carousel } from 'antd';
 class FullInfoAboutStaff extends Component {
     constructor(props) {
         super(props)
-        
+
         this.state = {
             count: 0,
         }
     }
 
-    // nextCount = () => {
-    //     // console.log(this.arr)
-    //     // console.log(this.arr.length)
-
-    //     if (this.state.count == this.arr.length - 1) {
-    //         this.setState({ count: 0 })
-    //         console.log("sdgdfg")
-    //     }
-    //     else {
-    //         this.setState({ count: this.state.count + 1 })
-    //     }
-
-    // }
-
-    // backCount = () => {
-    //     if (this.state.count === 0) {
-    //         this.setState({ count: this.arr.length - 1 })
-    //     }
-    //     else {
-    //         this.setState({ count: this.state.count - 1 })
-    //     }
-
-    // }
-
-    // componentDidMount(){
-    //     const { InfoStaff } = this.props
-    //     let str;
-
-    //     str = InfoStaff.map(el => {
-    //         console.log(el.img)
-    //         let str1 = el.img.substr(29)
-    //         for (var i = 0, b = 24; i < str1.length; i = i + 25) {
-
-    //             this.arr.push(str1.substr(i, b))
-    //         }
-
-    //     })
-    // }
-
     render() {
-        console.log(this.arr)
+
         const { InfoStaff, isFetching } = this.props
         let arr = [];
         let str;
-        // let str1
-        // let str2
-        // str = InfoStaff.map(el=> el.img.substr(0,29));
-        // str1 = InfoStaff.map(el=> el.img.substr(29,24));
-        // str2 = InfoStaff.map(el=> el.img.substr(54));
-        // console.log(str[0])
-        // console.log(str1[0])
-        // console.log(str2[0])
-
-
 
         str = InfoStaff.map(el => {
             console.log(el.img)
 
-             if(el.state){
-                let str1  = el.img.substr(29)  
-           
-                    for(var i = 0, b = 24; i < str1.length; i=i+25  ){
-                    
-                        arr.push({newStr:str1.substr(i,b),state:el.state,defaultStr:el.img})
-             }
-                }
-                else{
-                    arr.push({state:el.state,defaultStr:el.img})
+            if (el.state) {
+                let str1 = el.img.substr(29)
+
+                for (var i = 0, b = 24; i < str1.length; i = i + 25) {
+                    arr.push({ newStr: str1.substr(i, b), state: el.state, defaultStr: el.img })
                 }
-                
+            } else {
+                arr.push({ state: el.state, defaultStr: el.img })
+            }
+
         })
-        console.log(InfoStaff)
-        console.log(arr)
+
         let data1
         let data;
-            if(isFetching===true){
-                data = <div className="loader"> 
 
+        if (isFetching === true) {
+            data = <div className="loader">
                 <Loader type="Triangle"
                     color="#FD7F71"
                     height="100"
                     width="100"
-
                 />
             </div>
-        }
-        else {
-            data = InfoStaff.map((el, key) => (
-
-                <div>
-                    {/* <img src={str+str1} width="325" height="190" className="imgStaff"  alt="lorem" />
-                    <img src={str+str2} width="325" height="190" className="imgStaff"  alt="lorem" /> */}
-
-                    {el.title} {el.price} {el.description}
-                </div>)
-
+        } else {
+            data = InfoStaff.map((el, key) => <div className="divCenter">
+                <div className="flex-around">
+                    <p><b>Название: </b>{el.title} </p>
+                    <p><b>Цена: </b>{el.price}</p>
+                    <p><b>Описание: </b>{el.description}</p>
+                    <p><b>Контактное лицо: </b>{el.user.name}</p> 
+                    <p><b>Номер телефона: </b>{el.user.phone}</p>
+                </div>
+                {console.log(el.user)}
+            </div>
             )
             data1 = <div className="carusel">
-                    <Carousel effect="fade">
-                        {arr.map(el => <div>
-                            {el.state ? <img src={`http://127.0.0.1:2000/static/${el.newStr}`} className="fullImgStaff" alt="lorem" /> : 
-                            <img src={`${el.defaultStr}`} width="325" height="190" className="imgStaff"  alt="lorem" />}
-                        </div>)}   
-                    </Carousel>
-                </div>
-            
-            // arr.map(el => <div><img src={`http://127.0.0.1:2000/static/${el}`} className="fullImgStaff" alt="lorem" /></div>)
-            // data1 = arr.map(el => console.log() )
+                <Carousel effect="fade">
+                    {arr.map(el => <div>
+                        {el.state ? <img src={`http://127.0.0.1:2000/static/${el.newStr}`} className="fullImgStaff" alt="lorem" /> :
+                            <img src={`${el.defaultStr}`} width="325" height="190" className="imgStaff" alt="lorem" />}
+                    </div>)}
+                </Carousel>
+            </div>
         }
 
 
         return (
 
             <div className="staffinfo" >
-
-                {/* <div class="carusel">
-                    <div class="back but" onClick={this.backCount} ><Icon type="left" /></div>
-                    <div class="el-carusel">
-                        <img src={`http://127.0.0.1:2000/static/${this.arr[this.state.count]}`} width="325" height="190" className="fullImgStaff" alt="lorem" />
-                    </div>
-                    <div class="next but" onClick={this.nextCount} ><Icon type="left" /></div>
-                </div> */}
-
                 {data1}
-
                 {data}
             </div>
         );
-        }
+    }
 }
 
 export default FullInfoAboutStaff;

src/components/Auth/authButtons.js

@@ -6,13 +6,13 @@ class Authbuttons extends Component {
         return (
             <div className="auth__button">
                 <Link to="/auth" >
-                    <button className="button btn1">
-                        Войти
+                    <button className="buttonAuth">
+                        Вход
                     </button>
                 </Link>
                 <Link to="/registration" >
-                    <button className="button btn2">
-                        Зарегистрироваться
+                    <button className="buttonAuth">
+                        Регистрация
                     </button>
                 </Link>
             </div>

src/components/Auth/authorisation.js

@@ -1,28 +1,28 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
-import Authbuttons from './authButtons'
+import { Link } from "react-router-dom"
 
-import { Link, Redirect} from "react-router-dom"
+import Authbuttons from './authButtons'
 
-import {authValidate} from "../../utils/authValidate";
-import {authRenderField} from "../../common/authRenderField"
+import { authValidate } from "../../utils/authValidate";
+import { authRenderField } from "../../common/authRenderField"
 
 
 const Form = props => {
 
-    const { handleSubmit, getUsersData, pristine, inputData } = props
+    const { handleSubmit, getUsersData } = props
 
     const submit = (values) => {
-        
+
         getUsersData(values);
-       
-        
+
+
     }
     return (
         <div className="formdiv">
-            <Authbuttons />
-            <form className="form" >
-                <div>
+            <div>
+                <Authbuttons />
+                <form className="formAuth" >
                     <Field
                         name="email"
                         component={authRenderField}
@@ -30,8 +30,6 @@ const Form = props => {
                         placeholder="email@example.com"
                         className="input"
                     />
-                </div>
-                <div>
                     <Field
                         name="password"
                         component={authRenderField}
@@ -39,10 +37,13 @@ const Form = props => {
                         placeholder="Пароль"
                         className="input"
                     />
-                </div>
-               <button className="auth__submit-button" onClick={handleSubmit(submit)}><Link to="/">Войти</Link> </button>
-               
-            </form>
+                    <div className="center">
+                        <button className="buttonInAuth" onClick={handleSubmit(submit)}>
+                            <Link to="/" className="colorLink" >Войти</Link>
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
 
 
@@ -50,5 +51,4 @@ const Form = props => {
     );
 }
 
-export default reduxForm({ form: "authForm", validate: authValidate })(Form);
-// <button type="submit" className="button" disabled={pristine}>Отправить</button>
+export default reduxForm({ form: "authForm", validate: authValidate })(Form);

src/components/Auth/registration.js

@@ -20,67 +20,67 @@ const RegistrForm = props => {
     return (
         <div >
             <Authbuttons />
-            <form onSubmit={handleSubmit(submit)} className="form">
+            <form onSubmit={handleSubmit(submit)} className="formRegistr">
                 <div>
-                    <div>
-                        <Field
-                            name="login"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Логин"
-                            className="input"
-                        />
+                    <div className="divName">
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="name"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="Имя"
+                                className="inputName"
+                            />
+                        </div>
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="login"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="Логин"
+                                className="inputName"
+                            />
+                        </div>
                     </div>
-
-                    <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 className="divName">
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="email"
+                                component={regRenderField}
+                                type="email"
+                                placeholder="email@example.com"
+                                className="inputName"
+                            />
+                        </div>
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="phone"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="+380XXXXXXXX"
+                                className="inputName"
+                            />
+                        </div>
                     </div>
+                    <Field
+                        name="password"
+                        component={regRenderField}
+                        type="password"
+                        placeholder="Пароль"
+                        className="input"
+                    />
                 </div>
-                <div>
+                <div className="center">
                     <button type="submit"
+                        className="buttonInRegistration"
                         disabled={pristine}
-                        className="button"
                     >
-                        Отправить
+                        Зарегистрироваться
                     </button>
                     <button type="button"
+                        className="buttonInRegistration"
                         disabled={pristine}
                         onClick={reset}
-                        className="button"
                     >
                         Очистить поля
                     </button>

src/components/Btn/linkHome.js

@@ -0,0 +1,19 @@
+import React, { Component, Fragment } from 'react';
+
+import { Icon } from 'antd';
+import { Link } from "react-router-dom";
+
+class LinkHome extends Component {
+    render() {
+    
+        return (
+            <div>
+                <Link to="/" className="linkTopButton">
+                    <Icon type="home" style={{ fontSize: '30px' }} />
+                </Link>
+            </div>
+        );
+    }
+}
+
+export default LinkHome;

src/components/FormsAdd/FormAddNewCategory/SendingCategoryForm.js

@@ -1,59 +1,53 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
 
-
-
-
 const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewCategory } = props
+    const { handleSubmit, pristine, reset, submitting, AddNewCategory, allCategory, podcategory } = props
 
     const submit = values => {
         AddNewCategory(values)
     };
 
     return (
-        <form onSubmit={handleSubmit(submit)}>
-            <div>
-
-                <div>
-                    <Field
-                        name="title"
-                        component="input"
-                        type="text"
-                        placeholder="Название"
-                    />
-                </div>
-            </div>
-            <div>
-
-                <div>
-                    <Field
-                        name="description"
-                        component="input"
-                        type="text"
-                        placeholder="Описание"
-                    />
-                </div>
-            </div>
-            <div>
-                <div>
-                    <Field
-                        name="parentId"
-                        component="input"
-                        type="number"
-                        placeholder="Цена"
-                    />
+        <div className="formdiv">
+            <form onSubmit={handleSubmit(submit)} className="form">
+                <Field name="title"
+                    className="input"
+                    component="input"
+                    type="text"
+                    placeholder="Наименование Заголовка"
+                />
+                <Field name="description"
+                    className="input"
+                    component="input"
+                    type="text"
+                    placeholder="Icon"
+                />
+                <Field name="parentId"
+                    className="input"
+                    component="select"  
+                >
+                    <option >Выберите рубрику</option>
+                    <option value={0}> Новая рубрика</option>
+                    {podcategory.map(el => <option value={el.id}> {el.title}</option>)}
+                </Field>
+                <div className="buttonConteiner">
+                    <button type="submit"
+                        className="button"
+                        disabled={pristine || submitting}
+                    >
+                        Добавить
+                    </button>
+                    <button type="button"
+                        className="button"
+                        disabled={pristine || submitting}
+                        onClick={reset}
+                    >
+                        Очистить
+                    </button>
                 </div>
-            </div>
-            <div>
-                <button type="submit" disabled={pristine || submitting}>
-                    Submit
-        </button>
-                <button type="button" disabled={pristine || submitting} onClick={reset}>
-                    Clear Values
-        </button>
-            </div>
-        </form>
+            </form>
+        </div >
     )
 }
 

src/components/FormsAdd/FormAddNewCategory/index.js

@@ -1,21 +1,38 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../../../actions/categoryAction';
 
-import MDSpinner from "react-md-spinner";
+import { bindActionCreators } from 'redux';
 
+import MDSpinner from "react-md-spinner";
 import Form from '../FormAddNewCategory/SendingCategoryForm'
 
 class FormAddNewStaff extends Component {
+    componentDidMount() {
+        this.props.getCategoriesData(); 
+    }
+
     render() {
         
-        const { isFetching, AddNewCategory } = this.props
+        const { isFetching, AddNewCategory, allCategory, podcategory } = this.props
         
         return (
             <div>
-               <Form AddNewCategory={AddNewCategory} />
+               <Form AddNewCategory={AddNewCategory} allCategory={allCategory} podcategory={podcategory} />
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
             </div>
         );
     }
 }
 
-export default FormAddNewStaff;
+const mapStateToProps = state =>({
+    allCategory: state.category.allCategory,
+    podcategory: state.category.podcategory,
+})
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default FormAddNewStaff = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FormAddNewStaff);;

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -7,66 +7,63 @@ class SendingForm extends Component {
     constructor(props) {
         super(props)
 
-       this.state = { trig:false }
-       
+        this.state = { trig: false }
     }
-    
-    
 
-    onChange = e =>{
-        const { pushPhoto, base64 } = this.props      
-        this.setState({trig:true})
+    onChange = e => {
+        const { pushPhoto, base64 } = this.props
+        this.setState({ trig: true })
         let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name); 
-         pushPhoto(data)  
-            var file = e.target.files[0];
-            var reader = new FileReader();
-            reader.onloadend = function() {
-                base64(reader.result)         
-            }
-            reader.readAsDataURL(file);
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base64(reader.result)
+        }
+        reader.readAsDataURL(file);
     }
-    onChange1 = e =>{
-        const { pushPhoto, base641 } = this.props      
-        this.setState({trig:true})
+    onChange1 = e => {
+        const { pushPhoto, base641 } = this.props
+        this.setState({ trig: true })
         let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name); 
-         pushPhoto(data)  
-            var file = e.target.files[0];
-            var reader = new FileReader();
-            reader.onloadend = function() {
-                base641(reader.result)         
-            }
-            reader.readAsDataURL(file);
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base641(reader.result)
+        }
+        reader.readAsDataURL(file);
     }
-    onChange2 = e =>{
-        const { pushPhoto, base642 } = this.props      
-        this.setState({trig:true})
+    onChange2 = e => {
+        const { pushPhoto, base642 } = this.props
+        this.setState({ trig: true })
         let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name); 
-         pushPhoto(data)  
-            var file = e.target.files[0];
-            var reader = new FileReader();
-            reader.onloadend = function() {
-                base642(reader.result)         
-            }
-            reader.readAsDataURL(file);
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base642(reader.result)
+        }
+        reader.readAsDataURL(file);
     }
-    onChange3 = e =>{
-        const { pushPhoto, base643 } = this.props      
-        this.setState({trig:true})
+    onChange3 = e => {
+        const { pushPhoto, base643 } = this.props
+        this.setState({ trig: true })
         let data = new FormData();
-       if( e.target.files[0] == undefined ) {
-           return 
-       }
-        data.append('image',e.target.files[0], e.target.files[0].name); 
-         pushPhoto(data)  
-            var file = e.target.files[0];
-            var reader = new FileReader();
-            reader.onloadend = function() {
-                base643(reader.result)         
-            }
-            reader.readAsDataURL(file);
+        if (e.target.files[0] == undefined) {
+            return
+        }
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base643(reader.result)
+        }
+        reader.readAsDataURL(file);
 
     }
 
@@ -74,64 +71,54 @@ class SendingForm extends Component {
         const { AddNewStaffAction, getUser, photo } = this.props
         //const { image } = this.state
 
-        
-        if(!this.state.trig){
+        if (!this.state.trig) {
             values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
             values.state = 0
+        } else {
+            values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`;
+            values.state = 1
         }
-        else{
-            values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`; 
-            values.state = 1 
-         }
         //values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`  
 
         values.staff = "Машина"
-       
+
         values.userId = getUser.id
         console.log(values)
         AddNewStaffAction(values)
 
     };
-    render(){
-        
-         const { handleSubmit, pristine, reset, submitting, allCategory, photo, base64Photo, addOrnot, base64Photo1, base64Photo2, base64Photo3, addOrnot1, addOrnot2, addOrnot3 } = this.props
-         
-        
-        
-    return (
-        
+    render() {
+
+        const { handleSubmit, pristine, reset, submitting, allCategory, base64Photo, addOrnot, base64Photo1, base64Photo2, base64Photo3, addOrnot1, addOrnot2, addOrnot3 } = this.props
+
+        return (
+
 
             <div className="formdiv">
                 <form onSubmit={handleSubmit(this.submit)} className="form">
-                    <Field
-                        name="title"
+                    <Field name="title"
                         component="input"
                         type="text"
                         placeholder="Название"
                         className="input"
                     />
 
-                    <Field
-                        name="description"
+                    <Field name="description"
                         component="textarea"
                         type="text"
                         placeholder="Описание"
                         className="textarea"
                     />
 
-                    <Field
-                        name="price"
+                    <Field name="price"
                         component="input"
                         type="number"
                         placeholder="Цена"
                         className="input"
                     />
 
-
-                    <Field
-                        name="categoryId"
+                    <Field name="categoryId"
                         component="select"
-
                         className="input"
                     >
                         <option >Выберите рубрику</option>
@@ -139,42 +126,46 @@ class SendingForm extends Component {
                     </Field>
 
 
-                            <div className="file">
-                                <label className='upload-zone zone1'>
-                                {addOrnot ? <img src={base64Photo} style={{"width": "80px", "height": "80px"}}></img> : <i>&nbsp;</i>}
-                                    <input type='file' className='files'  onChange={this.onChange}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone2'>
-                                {addOrnot1 ? <img src={base64Photo1} style={{"width": "80px", "height": "80px"}}></img> : <i>&nbsp;</i>}
-                                    <input type='file' className='files'  onChange={this.onChange1}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone3'>
-                                {addOrnot2 ? <img src={base64Photo2} style={{"width": "80px", "height": "80px"}}></img> : <i>&nbsp;</i>}
-                                    <input type='file' className='files'  onChange={this.onChange2}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone4'>
-                                {addOrnot3 ? <img src={base64Photo3} style={{"width": "80px", "height": "80px"}}></img> : <i>&nbsp;</i>}
-                                    <input type='file' className='files'  onChange={this.onChange3}/>
-                                    
-                                </label>
-                            </div> 
-                            
-                            
+                    <div className="file">
+                        <label className='upload-zone zone1'>
+                            {addOrnot ? <img src={base64Photo} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange} />
+
+                        </label>
+                        <label className='upload-zone zone2'>
+                            {addOrnot1 ? <img src={base64Photo1} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange1} />
+
+                        </label>
+                        <label className='upload-zone zone3'>
+                            {addOrnot2 ? <img src={base64Photo2} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange2} />
+
+                        </label>
+                        <label className='upload-zone zone4'>
+                            {addOrnot3 ? <img src={base64Photo3} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange3} />
+
+                        </label>
+                    </div>
+
+
                     <div className="buttonConteiner">
-                        <button type="submit" disabled={pristine || submitting} className="button" >
-                            Submit
+                        <button type="submit"
+                            className="button"
+                            disabled={pristine || submitting}
+                        >
+                            Добавить
                         </button>
-                        <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
-                            Clear Values
+                        <button type="button"
+                            className="button"
+                            disabled={pristine || submitting}
+                            onClick={reset}
+                        >
+                            Очистить
                         </button>
                     </div>
-
-
                 </form>
-
             </div>
 
         )
@@ -187,7 +178,7 @@ export default reduxForm({
 // const mapStateToProps = (state, props) => ({
 //     form: props.formId
 //   });
-  
+
 //   const component = reduxForm({ enableReinitialize: true })(SendingForm);
-  
+
 //   export default connect(mapStateToProps)(component);

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -33,12 +33,12 @@ class FormAddNewStaff extends Component {
     }
 }
 
+
 const mapStateToProps = state =>({
     allCategory: state.category.allCategory,
 })
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
-
 export default FormAddNewStaff = connect(
     mapStateToProps,
     mapDispatchToProps

src/components/Modal/index.js

@@ -2,14 +2,14 @@ import React, { Component } from "react";
 import { Modal } from "antd";
 
 export default class EditModal extends Component {
-	render() {
-		
-		
-		const { visible, onOk, onCancel, error } = this.props;
-		  return (
-			<Modal title="" visible={visible} onCancel={onCancel} onOk={onOk} >
-				{error==="error" ? <h4>Не все поля были заполнены</h4> : <h4>Ваше объявление успешно добавлено</h4>}
-			</Modal>
-		  );
-	}
+    render() {
+
+        const { visible, onOk, onCancel, error } = this.props;
+        
+        return (
+            <Modal title="" visible={visible} onCancel={onCancel} onOk={onOk} >
+                {error === "error" ? <h4>Не все поля были заполнены</h4> : <h4>Ваше объявление успешно добавлено</h4>}
+            </Modal>
+        );
+    }
 }

src/container/Header.js

@@ -11,31 +11,32 @@ import { bindActionCreators } from "redux";
 
 class Header extends Component {
 
-    render() { 
+    render() {
         const { inputData, searchStaff, changeInputValue, name, getUser, id } = this.props
         return (
             <div className="header">
-               <HeaderLogo />
-               <SearchLine inputData={inputData}
+                <HeaderLogo />
+                <SearchLine inputData={inputData}
                     searchStaff={searchStaff}
-                    changeInputValue={changeInputValue} 
+                    changeInputValue={changeInputValue}
+                />
+                <Myprofile name={name}
+                    getUser={getUser}
+                    id={id}
                 />
-                <Myprofile name = {name} getUser={ getUser } id={ id } />
-
             </div>
         );
     }
 }
 
 const mapStateToProps = state => ({
-        inputData: state.searchStaff.inputData,
-        isFetching: state.searchStaff.isFetching,
-        
-  });
-  
-  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
-  
-  export default Header = connect(
-        mapStateToProps,
-        mapDispatchToProps
-  )(Header);
+    inputData: state.searchStaff.inputData,
+    isFetching: state.searchStaff.isFetching,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
+
+export default Header = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Header);

src/container/UserProfile.js

@@ -36,19 +36,27 @@ class UserProfile extends Component {
         }
     }
     render() {
-        console.log(this.props)
+
         const { getUser } = this.props
         const { staffs } = this.props.getUser
+
         return (
 
             <Fragment>
-                <Header getUser={ getUser } />
+                <Header getUser={getUser} />
                 <div className="menuAndContent">
-                    {staffs !== undefined && <div className="profil"><h2>{getUser.name}</h2>
-                        {staffs.map((el, key) => <div key={key}> {el.title} </div>)}
-                        <Link to="/activeStaffs">Активные Товары</Link>
-                        <button onClick={this.singOut}><Link to="/">Выход</Link></button>
-                    </div>}
+                    <div className="profil">
+                        <h2>{getUser.name}</h2>
+                        <div className="profilData">
+                            <p>{getUser.login}</p>
+                            <p>{getUser.email}</p>
+                            <p>{getUser.phone}</p>
+                            <div className="buttonConteiner">
+                                <Link to="/activeStaffs"><button className="profilLink">Активные Товары</button></Link>
+                                <button className="profilBtn" onClick={this.singOut}><Link to="/">Выход</Link></button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </Fragment>
 

src/container/activeStaffs.js

@@ -3,47 +3,64 @@ import React, { Component } from 'react';
 import { getUsersDataById } from "../actions/getUserById"
 import { deleteStaffById } from "../actions/getStaffByIdAction"
 import { Link } from "react-router-dom";
+import { Menu, Icon, Carousel } from 'antd';
 import { connect } from 'react-redux';
 
 import { bindActionCreators } from "redux";
+
+import Header from '../container/Header'
+
 const axios = require('axios')
+
 class activeStaffs extends Component {
-   
+
     componentDidMount() {
         const { getUsersDataById } = this.props
-               
-               
 
-              let localS = JSON.parse(localStorage.getItem("login"));
-                if(localS===null){
+        let localS = JSON.parse(localStorage.getItem("login"));
+        if (localS === null) {
 
-                }
-                else{
-                    getUsersDataById(localS)
-                }     
+        }
+        else {
+            getUsersDataById(localS)
+        }
     }
-    deleteStaff = (id) =>{
-        
-        
-       
-        axios.delete(`http://127.0.0.1:2000/api/staffs`,id).then(res => console.log(res))
+    deleteStaff = (id) => {
+        axios.delete(`http://127.0.0.1:2000/api/staffs`, id).then(res => console.log(res))
     }
     render() {
+
         const { getUser, deleteStaffById } = this.props
-            const { staffs } = getUser
-       console.log(this.props)
+        const { name, isAdmin, id } = this.props
+        const { staffs } = getUser
+
         return (
-            <div>
-               {staffs!==undefined && staffs.reverse().map((el,key)=>  <div className="staff" key={key}>
-                            <Link to={`/activeStaffs/${el.id}`}><button >Редактирование</button></Link>
-                            <button onClick={()=>this.deleteStaff(el.id)}>Удалить объявление</button>
-                             {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
+            <div >
+                <Header name={name} getUser={getUser} id={id} />
+
+                <div className="menuAndContent">
+                    <div className="contentStaffs">
+                        <div className="staffs">
+                            {staffs !== undefined && staffs.reverse().map((el, key) => <div className="staff" key={key}>
+                                {el.state ? <img src={el.img.substr(0, 53)} width="325" height="190" className="imgStaff" alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff" alt="lorem" />}
                                 <div className="titlleAndPrice">
                                     <h4>{el.title}</h4>
                                     <h4>Цена: {el.price}</h4>
                                 </div>
+                                <div className="titlleAndPrice">
+                                    <Link to={`/activeStaffs/${el.id}`} className="allMyStaff">
+                                        <Icon type="edit" style={{ fontSize: '30px' }} />
+                                    </Link>
+                                    <button className="Exit" onClick={() => this.deleteStaff(el.id)} >
+                                        <Icon type="delete" style={{ fontSize: '30px' }} />
+                                    </button>
+                                </div>
+                            </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
 
-                            </div> )}
             </div>
         );
     }
@@ -51,7 +68,8 @@ class activeStaffs extends Component {
 
 const mapStateToProps = state => ({
     getUser: state.getUserById.getUser,
-    
+    params: state.getUserById.params,
+
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ getUsersDataById, deleteStaffById }, dispatch);

src/container/renderAuthorisation.js

@@ -1,16 +1,18 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
 import { connect} from 'react-redux';
 
 import Form from "../components/Auth/authorisation";
+import LinkHome from "../components/Btn/linkHome"
 import { getUsersData } from "../actions/usersAuthActions";
 
 class RenderAuthorisation extends Component {      
     render() {
       return (
-        <div>
+        <Fragment>
+          <LinkHome />
           <Form {...this.props} />
-        </div>       
+        </Fragment>       
       );
     }
 }

src/container/renderRegistration.js

@@ -2,13 +2,16 @@ import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 
-import RegistrForm from "../components/Auth/registration";
 import * as actions from "../actions/usersRegistrActions";
 
+import RegistrForm from "../components/Auth/registration";
+import LinkHome from "../components/Btn/linkHome"
+
 class RenderRegistration extends Component {
     render() {
         return (
             <div className="formdiv">
+                <LinkHome />
                 <RegistrForm {...this.props} />
             </div>
         );

src/reducer/category.js

@@ -24,7 +24,8 @@ export default (state = initState, { type, payload }) => {
                 ...state,
                 isFetching: false,
                 allCategory: payload,
-                mainCategory: payload.data.filter(el => el.parentId === 0)
+                mainCategory: payload.data.filter(el => el.parentId === 0),
+                podcategory: payload.data.filter(el => el.parentId === 0),
             }
         }
 

src/router.js

@@ -4,10 +4,6 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from "redux";
 
 
-
-
-
-
 import MainPage from "./container/MainPage";
 
 import RenderAuthorisation from "./container/renderAuthorisation"
@@ -24,10 +20,7 @@ import redactorForm from './container/redactorForm'
 // import RegistrForm from './components/Auth/registration'
 // import UserProtect from './components/usersProtectPage/'
 // import UserProfile from './components/Header/Myprofile'
-
-
 import PrivateRoute from './components/usersProtectPage/PrivateRoute'
-
 import userProfile from  './container/UserProfile'
 
 import { getUsersDataById } from "./actions/getUserById"
@@ -43,7 +36,7 @@ class Router extends Component {
        const { inputData, trig, params} = this.props
       
        return (
-    <div>
+    <Fragment>
 	    <Switch>
             <PrivateRoute path="/"   data= { inputData } params = {params} exact component={MainPage} />
             {/* <Route path="/" exact component={MainPage} /> */}
@@ -61,7 +54,7 @@ class Router extends Component {
             <Route path="/activeStaffs/:id" exact component={ redactorForm } />
            
 	    </Switch>
-    </div>
+    </Fragment>
        )
    }
 

src/style/base/_base.scss

@@ -7,7 +7,7 @@
 }
 body{
 	min-width: 980px;
-	max-width: 1400px;
+	max-width: 1520px;
 	width: 100%;
 	margin: 0 auto ;
 	background: $color-backgtound;

src/style/components/_allStaff.scss

@@ -6,7 +6,6 @@
         width: 100%;
         padding: 10px;
     }
-
     .staffs{
         margin: 0 auto;
         display: flex;
@@ -14,7 +13,6 @@
         align-content: center; 
         flex-wrap: wrap;
     }
-
     .staff{
         width: 350px;
         height: 250px;
@@ -39,11 +37,11 @@
 
         }    
     }
-
     .imgStaff{
         width: 100%;
         height: 80%;
         padding: 5px ;
+        border-radius: 15px;
        
     }
     .staffinfo{
@@ -235,6 +233,14 @@
   .ant-carousel .slick-slide h3 {
     color: #fff;
   }
-
+.divCenter{
+    width: 55%;
+    margin: 0 auto;
+}
+.flex-around{
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+}
  
 

src/style/components/_form.scss

@@ -1,24 +1,43 @@
+// All Form 
 .formdiv{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-	font-size: 20px;
+	  font-size: 20px;
     background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
     
-    .form {
+    .form{
+      box-sizing: border-box;
+      width: 500px;
+      box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+      padding: 1px 0 40px 0;
+      border-radius: 3px;
+      background-color: rgba(247, 240, 240, 0.7);
+    }
+
+    .formAuth {
         box-sizing: border-box;
-        width: 500px;
+        width: 625px;
         box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
-        padding-bottom: 40px;
+        padding: 1px 0 40px 0;
         border-radius: 3px;
         background-color: rgba(247, 240, 240, 0.7);
         
     }
+    
+    .formRegistr {
+      box-sizing: border-box;
+      width: 625px;
+      box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+      padding: 1px 0 40px 0;
+      border-radius: 3px;
+      background-color: rgba(247, 240, 240, 0.7);
+  }
 
     .input {
         margin: 20px auto;
@@ -29,8 +48,8 @@
         border-bottom: solid 1px $color;
         transition: all 0.3s cubic-bezier(.64,.09,.08,1);
         background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
-        background-position: -400px 0;
-        background-size: 400px 100%;
+        background-position: -500px 0;
+        background-size: 500px 100%;
         background-repeat: no-repeat;
         color: darken($color, 1%);
         &:focus {
@@ -44,6 +63,7 @@
                 visibility: visible !important;
             }
         }
+
         option{
             background: rgba(247, 240, 240, 0.7);
             border-radius: 3px;
@@ -51,6 +71,7 @@
         select::-ms-expand { /* for IE 11 */
             appearance: none;
         }
+        
     }
     
     .textarea {
@@ -90,26 +111,8 @@
         display: flex;
         justify-content: center;
     }
-
-    .button {
-        border: none;
-        background: $color;
-        cursor: pointer;
-        border-radius: 3px;
-        padding: 6px;
-        margin: 10px 30px;
-        width: 80%;
-        color: white;
-        margin-left: 25px;
-        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
-        &:hover { 
-          transform: translateY(-3px);
-          box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
-        }
-    }
-
 }
-
+  
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
   -webkit-appearance: none; 
@@ -117,11 +120,11 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .upload-zone {
-    padding: 3px;
-    cursor: pointer;
-    position: absolute;
-    left: 33%;
-    top: 60%;
+  padding: 3px;
+  cursor: pointer;
+  position: absolute;
+  left: 38%;
+  top: 70%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
@@ -137,8 +140,18 @@ input[type=number]::-webkit-outer-spin-button {
     -moz-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
-  }
-  .upload-zone:before {
+    img{
+      position: absolute;
+      width: 75px;
+      height: 75px;
+      bottom: 6px;
+      border-radius: 15px;
+      left: 3px;
+      top: 3px;
+    }
+}
+
+.upload-zone:before {
     display: block;
     width: 80px;
     height: 80px;
@@ -156,88 +169,269 @@ input[type=number]::-webkit-outer-spin-button {
     -moz-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
-  }
-  .upload-zone:hover {
+}
+
+.upload-zone:hover {
     background: $color;
-  }
-  .upload-zone:hover:before {
+}
+
+.upload-zone:hover:before {
     border-color: #fff;
-  }
-  .upload-zone:hover i:before, .upload-zone:hover i:after {
-    background: #fff;
-  }
-  .upload-zone i {
-    display: block;
-    width: 20%;
-    height: 20%;
-    -webkit-border-radius: 50%;
-    -ms-border-radius: 50%;
-    -moz-border-radius: 50%;
-    -o-border-radius: 50%;
-    border-radius: 50%;
+}
+
+.upload-zone:hover i:before, .upload-zone:hover i:after {
+  background: #fff;
+}
+  
+.upload-zone i {
+  display: block;
+  width: 20%;
+  height: 20%;
+  -webkit-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+
+  img{
     position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    -webkit-transition: 0.3s;
-    -ms-transition: 0.3s;
-    -moz-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
+    width: 75px;
+    height: 75px;
+    bottom: 6px;
+    border-radius: 15px;
+    left: 6px;
   }
-  .upload-zone i:before, .upload-zone i:after {
+}
+  
+.upload-zone i:before, .upload-zone i:after {
+  background: $color;
+  top: 50%;
+  left: 50%;
+  content: " ";
+  display: block;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.upload-zone i:before {
+  width: 100%;
+  height: 3px;
+}
+  
+.upload-zone i:after {
+  width: 3px;
+  height: 100%;
+}
+
+.upload-zone input[type='file'] {
+  display: none;
+}
+  
+.zone2{
+  left: 46%;
+  top: 70%;
+}
+  
+.zone3{
+  left: 54%;
+  top: 70%;
+}
+
+.zone4{
+  left: 62%;
+  top: 70%;
+}
+   
+//Page auth
+  
+  .buttonAuth {
+    border: none;
     background: $color;
-    top: 50%;
-    left: 50%;
-    content: " ";
-    display: block;
-    -webkit-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-transition: 0.3s;
-    -ms-transition: 0.3s;
-    -moz-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-  }
-  .upload-zone i:before {
-    width: 100%;
-    height: 3px;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 20px;
+    width: 50%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
   }
-  .upload-zone i:after {
-    width: 3px;
-    height: 100%;
+  .buttonInAuth {
+    border: none;
+    background: $color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 5px;
+    width: 50%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
+    .colorLink{
+      text-decoration: none;
+      color: white;
+    }
   }
-  .upload-zone input[type='file'] {
-    display: none;
+  .center{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
   }
   
-   .zone2{
-    left: 43%;
-    top: 60%;
+  //Page registrateon
+
+  .buttonInRegistration {
+    border: none;
+    background: $color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 7px;
+    width: 40%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
+    .colorLink{
+      text-decoration: none;
+      color: white;
+    }
+  }
+  .divName{
+    margin: 0 40px;
+    display: flex;
+    justify-content: space-between;
+
   }
-  .zone3{
-    left: 53%;
-    top: 60%;
+  .inputName{
+    width: 90%;
   }
-  .zone4{
-    left: 63%;
-    top: 60%;
+
+  .form__input-box{
+    span{
+      color: red;
+      position: relative;
+      left: 160px;
+      bottom: 85px;
+    }
   }
-  .auth__button{
+  //all
+  
+  .linkTopButton{
+    position:fixed;
+    top:20px;
+    left:50px;  
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    display: block;
+    width: 50px;
+    height: 50px;
+    line-height:50px;
+    text-align:center;
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
+    border-radius: 25px;
+    background: #FD7F71;
+    cursor: pointer;
+    transform: translate3d(0, 0, 0);
+    animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover > i {
+        color:#fff;
+        text-shadow: 3px 3px 3px rgba(0,0,0,.35);
+      }
+      &:focus > i {
+        color:#fff;
+      }
+      @keyframes pulse {
+        to {
+          box-shadow: 0 0 0 12px transparent, 0 0 0 24px rgba(227, 115, 14, 0);
+        }
+      }
     
-  }
+}
+  // .button {
+    //   border: none;
+    //   background: $color;
+    //   cursor: pointer;
+    //   border-radius: 3px;
+    //   padding: 6px;
+    //   margin-bottom: 10px;
+    //   width: 80%;
+    //   color: white;
+    //   margin-left: 25px;
+    //   box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    //   &:hover { 
+      //     transform: translateY(-3px);
+      //     box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+      //   }
+      // }
+      // .btn1{
+        //     width: 180px;
+        //       margin-left: 0px;
+        //       border-radius: 0px;
+        //       padding-bottom: 10px;
+        //       padding-top: 10px;
+        //   }
+        //   .btn2{
+          //     width: 180px;
+          //       margin-left: 0px;
+          //       border-radius: 0px;
+          //       padding-bottom: 10px;
+          //       padding-top: 10px;
+          //   }
+          
+          .button {
+              border: none;
+              background: $color;
+              cursor: pointer;
+              border-radius: 3px;
+              padding: 6px;
+              margin: 10px 30px;
+              width: 90%;
+              color: white;
+              margin-left: 25px;
+              box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+              &:hover { 
+                transform: translateY(-3px);
+                box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+              }
+          }

src/style/components/_header.scss

@@ -1,5 +1,6 @@
 .header {
 	display:flex;
+	
 
 	&__logo {
 		width: 20%;
@@ -127,4 +128,4 @@
       	width: 32px;
 		height: 32px; 
 	} 
-}
+}

src/style/components/_leftMenu.scss

@@ -1,37 +1,19 @@
 .ant-layout-sider-children{
-    background: $el-color;  
+    background: $el-color; 
+    height: 110%; 
 }
 .ant-menu-submenu-title{
-    background: $el-color;  
+    font-size: 20px;
+    background: $el-color; 
+    margin: 0;
+        &:hover {
+            background: rgb(223, 111, 98);
+            margin: 0;
+        }
 }
 .ant-menu-dark{
-    color: rgba(255, 255, 255, 0.9);
-    background: $el-color;
-
-    &:hover {
-        background: rgb(223, 111, 98);
-    }
-}
-
-.ant-menu .ant-menu-sub .ant-menu-inline{
     background: $el-color;
-    // color: rgba(255, 255, 255, 0.9);
-
-    & a :hover{
-        background: rgb(223, 111, 98);
-    }
-
-    .ant-menu-item{
-        background: $el-color;
-        color: rgba(255, 255, 255, 0.9);
-        
-        .ant-menu-item:hover {
-            background: #f0f0f0;
-        }
-    }
-    
 }
-
 .ant-layout-sider-trigger {
     position: fixed;
     text-align: center;
@@ -44,10 +26,8 @@
     z-index: 1;
     transition: all 0.2s;
 }
-
 .ant-menu .ant-menu-sub .ant-menu-inline{
     & :hover{
-        background: #e06b62;
-    }
-    
-}
+        background: #db5b51d2;
+    }  
+}

src/style/components/_userProfil.scss

@@ -8,7 +8,75 @@
     color: #FD7F71;
     border-radius: 10px;
     background-color: #fff; 
+    font-size: 20px;
     h2{
         text-align: center;
     }
-}
+    .profilData{
+        width: 50%;
+        margin: 0 auto;
+    }
+    .buttonConteiner{
+        display: flex;
+        justify-content: space-around;
+    }
+    .profilLink{
+        border: none;
+        background: rgb(99, 206, 99);
+        cursor: pointer;
+        border-radius: 3px;
+        padding: 20px;
+        width: 210px;
+        color: white;
+        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+        &:hover { 
+        transform: translateY(-3px);
+        box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+        }
+    }
+    .profilBtn{
+        border: none;
+        background: rgb(207, 56, 40);
+        cursor: pointer;
+        border-radius: 3px;
+        padding: 20px;
+        width: 210px;
+        color: black;
+        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+        &:hover { 
+        transform: translateY(-3px);
+        box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+        }
+    }
+
+}
+
+.allMyStaff{
+    border: none;
+    cursor: pointer;
+    border-radius: 35px;
+    padding: 20px;
+    width: 70px;
+    color: black;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    position: relative;
+    top: -12em;
+    &:hover { 
+        background: rgb(99, 206, 99);
+    }
+}
+.Exit{
+    border: none;
+    background: rgba(216, 216, 216, 0.5);
+    cursor: pointer;
+    border-radius: 35px;
+    padding: 20px;
+    width: 70px;
+    color: black;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
+    position: relative;
+    top: -12em;
+    &:hover { 
+        background: rgb(207, 56, 40);    
+    }
+}