vlad

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -1,13 +1,61 @@
 import React, { Component, Fragment } from 'react';
 
-import Loader from 'react-loader-spinner'
+import Loader from 'react-loader-spinner';
+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 arr = [];
+        let str;
         // let str1
         // let str2
         // str = InfoStaff.map(el=> el.img.substr(0,29));
@@ -19,48 +67,70 @@ class FullInfoAboutStaff extends Component {
 
 
 
-
-
         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  ){
+            let str1 = el.img.substr(29)
+            for (var i = 0, b = 24; i < str1.length; i = i + 25) {
+
+                arr.push(str1.substr(i, b))
+
+            }
 
-                    arr.push(str1.substr(i,b))  
-                }
-                
         })
-        console.log(arr)
-        let data1
-        let data;
-            if(isFetching===true){
-                data = <div className="loader"> 
+
+
+
+
+
+        let data, data1;
+        if (isFetching === true) {
+            data = <div className="loader">
                 <Loader type="Triangle"
                     color="#FD7F71"
-                    height="100"	
+                    height="100"
                     width="100"
-                /> 
-            </div> 
-            }
-            else {
-                data = InfoStaff.map((el,key)=>(
-                    <div className="staff" key={key}>
+                />
+            </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>)
-                )
-                 data1 =  arr.map(el => <img src={`http://127.0.0.1:2000/static/${el}`} width="325" height="190" className="imgStaff"  alt="lorem" />)
-            }
+
+                    {el.title} {el.price} {el.description}
+                </div>)
+
+            )
+            data1 = <div className="carusel">
+                    <Carousel effect="fade">
+                        {arr.map(el => <div>
+                            <img src={`http://127.0.0.1:2000/static/${el}`} className="fullImgStaff" 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() )
+        }
+
         return (
 
-            <Fragment>
-                
-             {data} 
-            {data1}      
-            </Fragment>
+            <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>
         );
     }
 }

src/components/AllStaffs/index.js

@@ -5,43 +5,43 @@ import Loader from 'react-loader-spinner';
 import AddNewStaff from '../../components/BtnAddNewStaff'
 
 class AllStaffs extends Component {
-    
+
     render() {
         const { inputStaffs, isFetching, isAdmin, getUser } = this.props
         let data;
 
-            if(isFetching===true){            
-
-                data = <div className="loader"> 
-                    <Loader type="Triangle"
-                        color="#FD7F71"
-                        height="100"	
-                        width="100"
-                    /> 
-                </div> 
-            } else {
-                data = <div className="staffs">
-                    {inputStaffs.map((el,key)=>(
-                        <Link to={`/staff/${el.id}`} key={key}>
-                            <div className="staff">
-                               <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" />
-                                <div className="titlleAndPrice">
-                                    <h4>{el.title}</h4>
-                                    <h4>Цена: {el.price}</h4>
-                                </div>
+        if (isFetching === true) {
 
+            data = <div className="loader">
+                <Loader type="Triangle"
+                    color="#FD7F71"
+                    height="100"
+                    width="100"
+                />
+            </div>
+        } else {
+            data = <div className="staffs">
+                {inputStaffs.map((el, key) => (
+                    <Link to={`/staff/${el.id}`} key={key}>
+                        <div className="staff">
+                            <img src={el.img.substr(0, 53)} width="325" height="190" className="imgStaff" alt="lorem" />
+                            <div className="titlleAndPrice">
+                                <h4>{el.title}</h4>
+                                <h4>Цена: {el.price}</h4>
                             </div>
-                        </Link> 
-                    ))}    
-                </div>
-            }
+
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        }
         return (
 
-           <div className="contentStaffs">
+            <div className="contentStaffs">
                 {data}
-                <AddNewStaff isAdmin={ isAdmin } getUser={ getUser }/>
-           </div> 
-            
+                <AddNewStaff isAdmin={isAdmin} getUser={getUser} />
+            </div>
+
         );
     }
 }

src/components/Auth/authButtons.js

@@ -5,7 +5,7 @@ class Authbuttons extends Component {
     render() {
         return (
             <div className="auth__button">
-                <Link to="/auth"  >
+                <Link to="/auth" >
                     <button className="button btn1">
                         Войти
                     </button>

src/components/Auth/registration.js

@@ -17,9 +17,8 @@ const RegistrForm = props => {
         postUsersData(values)
     }
 
-    return (   
-        <div className="formdiv">
-            <div>
+    return (
+        <div >
             <Authbuttons />
             <form onSubmit={handleSubmit(submit)} className="form">
                 <div>
@@ -72,22 +71,21 @@ const RegistrForm = props => {
                     </div>
                 </div>
                 <div>
-                    <button type="submit" 
-                        disabled={pristine} 
+                    <button type="submit"
+                        disabled={pristine}
                         className="button"
                     >
                         Отправить
                     </button>
-                    <button type="button" 
-                        disabled={pristine} 
-                        onClick={reset} 
+                    <button type="button"
+                        disabled={pristine}
+                        onClick={reset}
                         className="button"
                     >
                         Очистить поля
                     </button>
                 </div>
             </form>
-            </div>
         </div>
 
     )

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -3,67 +3,45 @@ import { Field, reduxForm } from 'redux-form';
 
 import FormData from 'form-data'
 
-class SendingForm extends  Component  {
-
-    constructor(props){
+class SendingForm extends Component {
+    constructor(props) {
         super(props)
-       this.state = { image: 'http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg' }
-       
-    }
-    onChange3 = e =>{
-        const { pushPhoto,photo } = this.props
-        //this.setState({image: e.target.files[0]})
-        let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name);
-          
-          pushPhoto(data)
-    }
-    onChange2 = e =>{
-        const { pushPhoto,photo } = this.props
-        //this.setState({image: e.target.files[0]})
-        let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name);
-          
-          pushPhoto(data)
-    }
-    onChange1 = e =>{
-        const { pushPhoto,photo } = this.props
-        //this.setState({image: e.target.files[0]})
-        let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name);
-          
-          pushPhoto(data)
+        this.state = { image: 'http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg' }
+
     }
-    onChange = e =>{
-        const { pushPhoto,photo } = this.props
+
+    onChange = e => {
+        const { pushPhoto, photo } = this.props
         //this.setState({image: e.target.files[0]})
         let data = new FormData();
-        data.append('image',e.target.files[0], e.target.files[0].name);
-          
-          pushPhoto(data)
+        data.append('image', e.target.files[0], e.target.files[0].name);
+
+        pushPhoto(data)
     }
+
     submit = values => {
-        const { AddNewStaffAction,  getUser, photo } = this.props
+        const { AddNewStaffAction, getUser, photo } = this.props
         //const { image } = this.state
-        
-       let massive = []
-      // massive = photo.map(el => el.data.fileName)
-      // console.log(photo)
-        values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`   
+
+        let massive = []
+        // massive = photo.map(el => el.data.fileName)
+        // console.log(photo)
+        values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`
         values.staff = "Машина"
         values.state = 1
         values.userId = getUser.id
         console.log(values)
         AddNewStaffAction(values)
-    };
-    render(){
-        
-         const { handleSubmit, pristine, reset, submitting, allCategory, photo } = this.props
-         console.log(photo)
-        
-        
-    return (
-        
+    }
+
+    render() {
+
+        const { handleSubmit, pristine, reset, submitting, allCategory, photo } = this.props
+        console.log(photo)
+
+
+        return (
+
             <div className="formdiv">
                 <form onSubmit={handleSubmit(this.submit)} className="form">
                     <Field
@@ -94,42 +72,36 @@ class SendingForm extends  Component  {
                     <Field
                         name="categoryId"
                         component="select"
-                        
+
                         className="input"
                     >
                         <option >Выберите рубрику</option>
                         {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
                     </Field>
 
-                            
-                                <label className='upload-zone'>
-                                    <i>&nbsp;</i>
-                                    <input type='file' className='files'  onChange={this.onChange}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone2'>
-                                    <i>&nbsp;</i>
-                                    <input type='file' className='files'  onChange={this.onChange}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone3'>
-                                    <i>&nbsp;</i>
-                                    <input type='file' className='files'  onChange={this.onChange}/>
-                                    
-                                </label>
-                                <label className='upload-zone zone4'>
-                                    <i>&nbsp;</i>
-                                    <input type='file' className='files'  onChange={this.onChange}/>
-                                    
-                                </label>
-                                
-                            
-                            
-                    {/* <input type="file"    onChange={this.onChange}></input> */}
-                    {/* <input type="file"    onChange={this.onChange1}></input>
-                    <input type="file"    onChange={this.onChange2}></input>
-                    <input type="file"    onChange={this.onChange3}></input> */}
-                
+                    <div className="file">
+                        <label className='upload-zone'>
+                            <i>&nbsp;</i>
+                            <input type='file' className='files' onChange={this.onChange} />
+
+                        </label>
+                        <label className='upload-zone zone2'>
+                            <i>&nbsp;</i>
+                            <input type='file' className='files' onChange={this.onChange} />
+
+                        </label>
+                        <label className='upload-zone zone3'>
+                            <i>&nbsp;</i>
+                            <input type='file' className='files' onChange={this.onChange} />
+
+                        </label>
+                        <label className='upload-zone zone4'>
+                            <i>&nbsp;</i>
+                            <input type='file' className='files' onChange={this.onChange} />
+
+                        </label>
+                    </div>
+
                     <div className="buttonConteiner">
                         <button type="submit" disabled={pristine || submitting} className="button" >
                             Submit
@@ -138,14 +110,14 @@ class SendingForm extends  Component  {
                             Clear Values
                         </button>
                     </div>
-                    
-                    
+
+
                 </form>
 
             </div>
-        
-    )
-  }
+
+        )
+    }
 }
 
 export default reduxForm({

src/container/CategoryStaffInfo.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect} from 'react-redux';
 import * as actions from "../actions/getStaffByCategoryIdAction";
 import { bindActionCreators } from "redux";
@@ -29,13 +29,13 @@ class CategoryStaffInfo extends Component {
         
        
         return (
-            <div>
+            <Fragment>
                 <Header />
-                <div className="contentDiv">
+                <div className="menuAndContent">
                     <LeftMenu />
                     <CategoryStaffs infoCategory={infoCategory} isFetching={isFetching}  />
                 </div>
-            </div>
+            </Fragment>
         );
     }
 }

src/container/MainPageStaffInfo.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect} from 'react-redux';
 import {getStaffsDataById} from "../actions/getStaffByIdAction";
 
@@ -25,13 +25,13 @@ class MainPageStaffInfo extends Component {
     render() {
             const { getUser } = this.props
         return (
-            <div>
-
+            <Fragment>
                 <Header getUser={ getUser } />
-                <LeftMenu getUser={ getUser }/>
-                <FullInfoAboutStaff {...this.props} />
-
-            </div>
+                <div className="menuAndContent">
+                    <LeftMenu getUser={ getUser }/>
+                    <FullInfoAboutStaff {...this.props} />
+                </div>
+            </Fragment>
         );
     }
 }

src/container/SearchStaff.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import { connect} from 'react-redux';
-import {searchStaff} from "../actions/searchStaffAction";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { searchStaff } from "../actions/searchStaffAction";
 
 import { getUsersDataById } from "../actions/getUserById"
 
@@ -16,29 +16,31 @@ import Header from '../container/Header'
 
 
 class SearchStaff extends Component {
-    componentDidMount(){
+    componentDidMount() {
         const { searchStaff, match, getUsersDataById } = this.props
         searchStaff(match.params.title)
         let localS = JSON.parse(localStorage.getItem("login"));
-                if(localS===null){
-
-                }
-                else{
-                    getUsersDataById(localS)
-                }
-      }
-      render() {
-        const {  getUser } = this.props
-        
+        if (localS === null) {
+
+        }
+        else {
+            getUsersDataById(localS)
+        }
+    }
+    render() {
+        const { getUser } = this.props
+
         console.log(this.props)
         return (
-          <div>
-            <Header  getUser={ getUser } />
-            <LeftMenu    getUser={ getUser }/>
-            <SearchStaffsPage {...this.props} />
-          </div>       
+            <Fragment>
+                <Header getUser={getUser} />
+                <div className="menuAndContent">
+                    <LeftMenu getUser={getUser} />
+                    <SearchStaffsPage {...this.props} />
+                </div>  
+          </Fragment>       
         );
-      }
+    }
 }
 
 
@@ -51,6 +53,6 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => bindActionCreators({ searchStaff, getUsersDataById }, dispatch);
 
 export default SearchStaff = connect(
-      mapStateToProps,
-      mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(SearchStaff);

src/container/SearchStaffsInfo.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect} from 'react-redux';
 import {getSeacrhStaffsDataById} from "../actions/searchStaffByIdAction";
 
@@ -25,11 +25,13 @@ class SearchInfoStaffsInfo extends Component {
     render() {
         const {  getUser } = this.props
         return (
-            <div>
+            <Fragment>
                 <Header getUser={ getUser } />
-                <LeftMenu getUser={ getUser } />
-                <SearchFullInfoStaff {...this.props}/>
-            </div>
+                <div className="menuAndContent">
+                    <LeftMenu getUser={ getUser } />
+                    <SearchFullInfoStaff {...this.props}/>
+                </div>
+            </Fragment>
         );
     }
 }

src/container/UserProfile.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { Link } from "react-router-dom";
 
@@ -12,8 +12,10 @@ import { getParams } from "../actions/getUserById"
 
 import { bindActionCreators } from "redux";
 
+import Header from '../container/Header'
+
 class UserProfile extends Component {
-   
+
     singOut = () => {
         const { getParams, match } = this.props
         localStorage.removeItem("login")
@@ -22,30 +24,31 @@ class UserProfile extends Component {
 
     componentDidMount() {
         const { getUsersDataById } = this.props
-                console.log(this.props) ;
-               
+        console.log(this.props);
 
-              let localS = JSON.parse(localStorage.getItem("login"));
-                if(localS===null){
 
-                }
-                else{
-                    getUsersDataById(localS)
-                }     
+        let localS = JSON.parse(localStorage.getItem("login"));
+        if (localS === null) {
+
+        }
+        else {
+            getUsersDataById(localS)
+        }
     }
     render() {
         console.log(this.props)
-            const { getUser } = this.props
-            const { staffs } = this.props.getUser
+        const { getUser } = this.props
+        const { staffs } = this.props.getUser
         return (
-           <div>
-               {staffs!==undefined && <div> {getUser.name}
-                 {staffs.map((el,key)=> <div key={key}> {el.title} </div> )}
-                 <button onClick={this.singOut}><Link to="/">Выход</Link></button>
-             </div>
-               }
-           </div>
-                
+            <Fragment>
+                <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>)}
+                        <button onClick={this.singOut}><Link to="/">Выход</Link></button>
+                    </div>}
+                </div>
+            </Fragment>
         );
     }
 }
@@ -54,7 +57,7 @@ class UserProfile extends Component {
 const mapStateToProps = state => ({
     inputData: state.usersAuth.inputData,
     getUser: state.getUserById.getUser,
-    
+
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById, getParams }, dispatch);

src/container/renderRegistration.js

@@ -8,9 +8,9 @@ import * as actions from "../actions/usersRegistrActions";
 class RenderRegistration extends Component {
     render() {
         return (
-            <Fragment>
+            <div className="formdiv">
                 <RegistrForm {...this.props} />
-            </Fragment>
+            </div>
         );
     }
 }

src/style/components/_allStaff.scss

@@ -42,9 +42,44 @@
 
     .imgStaff{
         width: 100%;
+        height: 80%;
         padding: 5px ;
        
     }
+    .staffinfo{
+        width: 100%;
+        height: 100%;
+        margin: 10px;
+        padding: 1%;
+        border: none;
+        outline: none;
+        border: 0px;
+        cursor: pointer;
+        color: #FD7F71;
+        transition: .3s ease-out;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 1px 1px rgba(187, 216, 216, 0.6), 
+            0 3px 3px rgba(187, 216, 216, 0.4), 
+            0 8px 16px rgba(187, 216, 216, 0.3);
+
+        .titlleAndPrice{
+            display: flex;
+            justify-content: space-around;
+            padding-top: 10px;
+
+        }
+
+        .fullImgStaff{
+            width: 480px;
+            height: 320px;
+            border: none;
+            outline: none;
+            border: 1px;
+            border-radius: 10px;    
+            animation-timing-function: linear;
+        }
+    }
 
     .loader{
         position: fixed;
@@ -109,6 +144,97 @@
 // }
 
 
+.carusel{
+    border: none;
+        outline: none;
+        border: 0px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.viwe-carusel{
+    height: 100%;
+    width: var(--main-width);
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+}
+.el-carusel{
+    height: 100%;
+    border: none;
+        outline: none;
+        border: 0px;
+    border-radius: 10px;
+    width: var(--main-width);
+    user-select: none;
+    animation-timing-function: linear;
+}
+.el-carusel::befor{
+    animation: eye 3s ease-in-out infinite;
+}
+.scropl-carusel{
+    width: 99999px;
+    display: flex;
+    transition: all 2s ease-in-out;
+}
+.scropl-carusel-finish{
+    width: 99999px;
+    display: flex;
+    transition: all 0s ease-in-out;
+}
+.img-carusel{
+  width: 100%;
+  height: 100%;
+}
+.but{
+  display: flex;
+  font-size: 2rem;
+  color: #424271;
+  background-color: #efeded;
+  height: 50px;
+  width: 50px;
+  /*position: relative;
+  top: 125px;*/
+  transform: translate(100%);
+  font-weight: bold;
+  opacity: 0.5;
+  user-select: none;
+}
+.but:hover{
+  color: #ccd024;
+  cursor: pointer;
+  opacity: 1;
+}
+.back{
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  /*transform: translateX(100%);*/
+}
+.next{
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(180deg) translate(100%);
+}
+
+
+.ant-carousel{
+    width: 480px;
+}
 
+.ant-carousel .slick-slide {
+    width: 480px;
+    text-align: center;
+    height: 320px;
+    line-height: 160px;
+    overflow: hidden;
+  }
   
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }
+
+ 
 

src/style/components/_form.scss

@@ -12,17 +12,12 @@
     
     .form {
         box-sizing: border-box;
-        width: 460px;
+        width: 500px;
         box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
         padding-bottom: 40px;
         border-radius: 3px;
         background-color: rgba(247, 240, 240, 0.7);
         
-        
-        h1 {
-            box-sizing: border-box;
-            padding: 20px;
-        }
     }
 
     .input {
@@ -86,6 +81,11 @@
         }
     }
 
+    .file{
+        width: 100%;
+        height: 100px;
+    }
+
     .buttonConteiner{
         display: flex;
         justify-content: center;
@@ -237,4 +237,7 @@ input[type=number]::-webkit-outer-spin-button {
   .zone4{
     left: 63%;
     top: 60%;
+  }
+  .auth__button{
+    
   }

src/style/components/_formLogin.scss

@@ -186,12 +186,10 @@ h1, .input::-webkit-input-placeholder, .button {
     background-color: #FD7F71
   }
   .auth__button{
-  
     width: 100%;
     display : flex;
     padding-top: 30px;
     padding-bottom: 30px;
-    
   }
   .btn1{
     width: 180px;

src/style/components/_userProfil.scss

@@ -0,0 +1,14 @@
+.profil{
+    width: 100%;
+    height: 75vh;
+    margin: 10px;
+    padding: 1%;
+    border: none;
+    border: 0px;
+    color: #FD7F71;
+    border-radius: 10px;
+    background-color: #fff; 
+    h2{
+        text-align: center;
+    }
+}

src/style/index.scss

@@ -6,11 +6,12 @@
 
 @import "layout/container";
 
-@import "components/header";
 @import "components/allStaff";
-@import "components/leftMenu";
-// @import "components/formLogin";
 @import "components/form";
+// @import "components/formLogin";
+@import "components/header";
+@import "components/leftMenu";
+@import "components/userProfil";
 
 // @import './components/auth.scss';