src/components/AllStaffs/index.js

@@ -9,8 +9,7 @@ class AllStaffs extends Component {
     render() {
         const { inputStaffs, isFetching } = this.props
         let data;
-            if(isFetching===true){
-                
+            if(isFetching===true){            
                 data = <div className="loader"> 
                     <Loader type="Triangle"
                         color="#FD7F71"
@@ -18,14 +17,16 @@ class AllStaffs extends Component {
                         width="100"
                     /> 
                 </div> 
-            }
-            else{
+            } else {
                 data = <div className="staffs">
                     {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 className="titlleAndPrice">
+                                    <h4>{el.title}</h4>
+                                    <h4>Цена: {el.price}</h4>
+                                </div>
                             </div>
                         </Link> 
                     ))}    
@@ -33,8 +34,7 @@ class AllStaffs extends Component {
             }
         return (
 
-           <div className="content">
-
+           <div className="contentStaffs">
                 {data}
                 <AddNewStaff/>
            </div> 

src/components/Auth/authorisation.js

@@ -9,7 +9,7 @@ import {authRenderField} from "../../common/authRenderField"
 
 
 const Form = props => {
-    const { handleSubmit, getUsersData, pristine } = props
+    const { handleSubmit, getUsersData } = props
     const submit = (values) => {
         getUsersData(values);
         

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -1,14 +1,9 @@
 import React, { Component } from 'react';
 import { Field, reduxForm } from 'redux-form';
-import { Link } from "react-router-dom";
 
 
 class SendingForm extends  Component  {
-    constructor(props){
-        super(props)
-       //this.state = { image: null }
-    }
-    
+
     onChange = e =>{
         //console.log(e.target.files[0])
         this.setState({image: e.target.files[0].name})
@@ -39,10 +34,10 @@ class SendingForm extends  Component  {
 
                     <Field
                         name="description"
-                        component="input"
+                        component="textarea"
                         type="text"
                         placeholder="Описание"
-                        className="input"
+                        className="textarea"
                     />
 
                     <Field
@@ -60,11 +55,11 @@ class SendingForm extends  Component  {
                         
                         className="input"
                     >
-                        
+                        <option >Выберите рубрику</option>
                         {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
                     </Field>
 
-                    <div>
+                    <div className="buttonConteiner">
                         <button type="submit" disabled={pristine || submitting} className="button" >
                             Submit
                         </button>

src/components/FormsAdd/FormAddNewStaff/index.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/categoryAction';
 
@@ -25,12 +25,10 @@ class FormAddNewStaff extends Component {
             data = <Form AddNewStaff={AddNewStaff} allCategory={category}/>
         }
         return (
-            <div>
-               {data}
-               {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
- 
-
-            </div>
+            <Fragment>
+                {data}
+                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
+            </Fragment>
         );
     }
 }

src/components/Header/Myprofile.js

@@ -8,50 +8,39 @@ class Myprofile extends Component {
 
         const { name, getUser, id } =this.props
         let localS = JSON.parse(localStorage.getItem("login"));
-       let data;
-
-       if (!name && !getUser.name || localS===null){
-
-       data = <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>   
-       }
-        else{
+        let data;
+
+        if(!name && !getUser.name || localS===null){
+
+            data = <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>
+        } else {
             
-            data = <div className="header__auth">
-                    <Link to={`/user/id:${getUser.id || id }`} className="link">
-                        <div className="header__auth__container">
-                            <div className="avatar">
-                                <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
-                            </div>
-                        <div>
-                            {name || getUser.name }
-                        </div>
-                    
-                        </div>    
-                    </Link> 
-                   </div>  
-
+            data = <Link to={`/user/id:${getUser.id || id }`} className="link">
+                <div className="header__auth__container">
+                    <div className="avatar">
+                        <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
+                    </div>
+                    <div className="text">
+                        {name || getUser.name }
+                    </div>                    
+                </div>    
+            </Link> 
         }
-        
-       
+            
         return (
-
-
-        <div className="header__auth">
-           {data}
-        </div>
-
+            <div className="header__auth">
+                { data }
+            </div>
         );
     }
 }

src/components/LeftMenu/PodCategory.js

@@ -16,14 +16,21 @@ class PodCatygory extends Component {
 
         let datacat = this.podCaty.map((el, key) =>
             <Link to={`/category/staff/${el.id}`}  key={`podCaty${key}`}>
-                <li key={`${el.id}`} className="ant-menu-item" role="menuitem" style={{"paddingLeft": "48px"}}>
+                <li key={`${el.id}`} 
+                    className="ant-menu-item" 
+                    role="menuitem" 
+                    style={{"paddingLeft": "48px"}}
+                >
                     {el.title}
                 </li>
             </Link>
         ) 
 
         return (
-            <ul className="ant-menu ant-menu-sub ant-menu-inline" role="menu" >
+            <ul className="ant-menu ant-menu-sub ant-menu-inline" 
+                role="menu" 
+                style={{"background": "#e06b62","color": "#fff"}} 
+            >
                 {datacat}
             </ul>
         );

src/components/LeftMenu/index.js

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 const { Sider } = Layout;
 
 class LeftMenu extends Component {
-   
+
     state = {
         collapsed: false,
     };
@@ -19,9 +19,8 @@ class LeftMenu extends Component {
     render() {
 
         const { allCategory, mainCategory, isAdmin, getUser } = this.props
-            console.log(getUser)
-            let localS = JSON.parse(localStorage.getItem("login")); 
-            
+        let localS = JSON.parse(localStorage.getItem("login"));
+
         return (
             <div>
                 <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
@@ -29,17 +28,17 @@ class LeftMenu extends Component {
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
                     >
-                        {Boolean(isAdmin) && Boolean(getUser.isAdmin) || (localS!==null && <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                        {Boolean(isAdmin) && Boolean(getUser.isAdmin) || (localS !== null && <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">
                             <Menu.Item key="addCatigory">
                                 <Link to="/addCategory">
                                     <Icon type="plus" />
                                     <span >Добавить категорию</span>
                                 </Link>
                             </Menu.Item>
-                        </Menu>)}                        
-                        <DrawCategory allCategory={allCategory} 
-                            mainCategory={mainCategory}  
-                        />  
+                        </Menu>)}
+                        <DrawCategory allCategory={allCategory}
+                            mainCategory={mainCategory}
+                        />
                     </Sider>
                 </Layout>
             </div>

src/components/usersProtectPage/PrivateRoute.js

@@ -1,27 +1,21 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-import {  Route, Redirect } from "react-router-dom";
+import { Route } from "react-router-dom";
 
-export default ({ component: Component, data, params, ...rest }) =>(
-      <Route
+export default ({ component: Component, data, params, ...rest }) => (
+    <Route
         {...rest}
-        render= {props =>{
-         
-          
-            console.log(data)
-             
-           return <Component {...data}  {...props}  />
-              
-             
+        render={props => {
+
+            return <Component {...data}  {...props} />
             // else {
             //   return <Redirect to='/' />
             // }
         }}
-      />
-    
+    />
+
 )
 
- 
 
-	
-    
+
+

src/container/AddNewStaff.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/addNewStaffAction";
@@ -19,18 +19,18 @@ class AddNewStaff extends Component {
         
         return (
 
-            <div className="top">
-                <div>
+            <Fragment>
+                <Fragment>
                     <FormAddNewStaff AddNewStaff={AddNewStaff} 
                         isFetching={isFetching} 
                     />
-                </div>
+                </Fragment>
                 <EditModal visible={showModal}
                     onOk={this.closeEditModal}
                     onCancel={this.closeEditModal}
                     error={error}
                 />
-            </div>
+            </Fragment>
 
         );
     }

src/container/CategoryStaffInfo.js

@@ -8,11 +8,7 @@ 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)

src/container/MainPage.js

@@ -12,13 +12,9 @@ import LeftMenu from '../container/LeftMenu'
 import AllStaffs from "../components/AllStaffs"
 
 class MainPage extends Component {
-    constructor(props){
-        super(props)
-        //this.state = {trig:false}
-        
-    }
+   
     //  componentDidUpdate(prevProps){
-        
+
     //     let localS = JSON.parse(localStorage.getItem("login"));
     //     console.log("prevProps-" ,prevProps, "this.props-", this.props)
     //     if ( prevProps.isFetching !== this.props.isFetching ){
@@ -26,36 +22,33 @@ class MainPage extends Component {
     //         this.setState({trig: !this.state.trig})
     //        //this.props.getStaffsData()
     //     }
-    
+
     // }
     componentDidMount() {
-
-        const { getStaffsData, getUsersDataById } = this.props
         
+        const { getStaffsData, getUsersDataById } = this.props
+
         getStaffsData()
-            
-              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.state)
-        const { inputStaffs, isFetching, getUser } = this.props
-        const {  name, isAdmin, id } = this.props
-        
 
+        const { inputStaffs, isFetching, getUser } = this.props
+        const { name, isAdmin, id } = this.props
 
         return (
             <Fragment>
-                <Header name={ name } getUser={ getUser } id={ id }/>
-                <div className="contentDiv">
-                    <LeftMenu isAdmin = {isAdmin} getUser={ getUser } />
+                <Header name={name} getUser={getUser} id={id} />
+                <div className="menuAndContent">
+                    <LeftMenu isAdmin={isAdmin} getUser={getUser} />
                     <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} />
                 </div>
             </Fragment>

src/reducer/categoryById.js

@@ -4,35 +4,31 @@ const initState = {
     infoCategory: [],
     isFetching: false,
     error: null,
-    
-  };
+};
 
-  export default (state = initState, { type, payload }) => {
-      console.log(payload)
-      switch (type) {
-        
+export default (state = initState, { type, 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,
-          
-          }
+            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"
-          }
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
         }
-        default: return state;    
+        default: return state;
     }
-  };
+};

src/reducer/usersAuthorisation.js

@@ -8,13 +8,11 @@ const initState = {
   };
 
 export default (state = initState, {type, payload} ) => {
-    console.log(payload)
     switch(type) {
         case types.USER_AUTH_REQUEST: {
             return {
                 ...state,
-                
-                isFatching: true
+                isFatching: true,
             }
         }
         case types.USER_AUTH_REQUEST_SUCCESS: {
@@ -23,26 +21,23 @@ export default (state = initState, {type, payload} ) => {
                 payload.data = false
             }
             else if (payload.data!==null && payload.data.id !==undefined ){
-                 const { id } = payload.data
-            localStorage.setItem("login",JSON.stringify(id))
+                const { id } = payload.data
+                localStorage.setItem("login",JSON.stringify(id))
             }
-           
-            
             return {
                 ...state,
                 inputData: payload.data,
-                isFatching: false
+                isFatching: false,
             }
         }
         case types.USER_AUTH_REQUEST_FAIL: {
             return {
                 ...state,
                 isFatching: false,
-                error: "ERROR"
+                error: "ERROR",
             }
         }
         
         default: return state;
-
     }
 };

src/router.js

@@ -1,63 +1,54 @@
-import React, {Component} from "react";
-import { Switch, Route, Redirect, withRouter } from "react-router-dom";
-import { connect } from 'react-redux';    
+import React, { Component, Fragment } from "react";
+import { Switch, Route, withRouter } from "react-router-dom";
+import { connect } from 'react-redux';
 import { bindActionCreators } from "redux";
 
+import PrivateRoute from './components/usersProtectPage/PrivateRoute'
 
-import RenderRegistration from "./container/renderRegistration"
-import RenderAuthorisation from "./container/renderAuthorisation"
+import { getUsersDataById } from "./actions/getUserById"
+import { getUsersData } from './actions/usersAuthActions'
 
 import MainPage from "./container/MainPage";
-// import Form from './components/Auth/index'
-// import RegistrForm from './components/Auth/registration'
-import MainPageStaffInfo from './container/MainPageStaffInfo'
+import userProfile from './container/UserProfile'
+import RenderAuthorisation from "./container/renderAuthorisation"
+import RenderRegistration from "./container/renderRegistration"
 import CategoryStaffInfo from './container/CategoryStaffInfo'
-
+import MainPageStaffInfo from './container/MainPageStaffInfo'
 import SearchStaffs from './container/SearchStaff'
-
 import SearchStaffsInfo from './container/SearchStaffsInfo'
 import AddNewStaff from './container/AddNewStaff'
-
 import AddNewCategory from './container/AddNewCategory'
 
+// import Form from './components/Auth/index'
+// 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"
-
-import { getUsersData } from './actions/usersAuthActions'
-
-import addCategory from './components/privateRouterComponents/addCategoryIfAdmin'
-
-class Router extends Component{
-   render() {
-       
-       const { inputData, trig, params} = this.props
-       console.log(this.props)
-       return (
-    <div>
-	    <Switch>
-            <PrivateRoute path="/"   data= { inputData } params = {params} exact component={MainPage} />
-            {/* <Route path="/" exact component={MainPage} /> */}
-            <Route path="/user/:id" exact component={userProfile} />
-            <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} />
-            <Route path="/newStaff" exact component={AddNewStaff} />
-            <Route path="/addCategory" exact component={AddNewCategory} />
-	    </Switch>
-    </div>
-       )
-   }
+//import addCategory from './components/privateRouterComponents/addCategoryIfAdmin'
+
+class Router extends Component {
+    render() {
+
+        const { inputData, params } = this.props
+
+        return (
+            <Fragment>
+                <Switch>
+                    <PrivateRoute path="/" data={inputData} params={params} exact component={MainPage} />
+                    {/* <Route path="/" exact component={MainPage} /> */}
+                    <Route path="/user/:id" exact component={userProfile} />
+                    <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} />
+                    <Route path="/newStaff" exact component={AddNewStaff} />
+                    <Route path="/addCategory" exact component={AddNewCategory} />
+                </Switch>
+            </Fragment>
+        )
+    }
 }
 
 const mapStateToProps = state => ({
@@ -67,5 +58,8 @@ const mapStateToProps = state => ({
 })
 const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById }, dispatch);
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));
+export default withRouter(connect(
+    mapStateToProps, 
+    mapDispatchToProps
+)(Router));
 

src/style/abstracts/variables.scss

@@ -17,7 +17,14 @@ $color-grey-the-lightest: #f9fbfd;
 $color-grey-transparent: rgba(247, 249, 251, 0.7);
 
 //BASE COLORS
-$color-shadow:#d4d4d4;
 $el-color:#FD7F71;
-// BASE
-$color-backgtound: #f5f8fb;
+$color-backgtound: #f8f6f6;
+
+//SearchLine
+$color: #FD7F71;
+$background: #F7FBFB;
+$background-2: #EAF5F5;
+$background-3: #BBD8D8;
+$primary: #FD7F71;
+$white: #fff;
+$breakpoint: 768px;

src/style/base/_base.scss

@@ -6,6 +6,9 @@
 	box-sizing:border-box;
 }
 body{
-	// max-width: 1140px;
+	min-width: 980px;
+	max-width: 1400px;
+	width: 100%;
 	margin: 0 auto ;
+	background: $color-backgtound;
 }

src/style/components/_allStaff.scss

@@ -1,28 +1,60 @@
-
-.contentDiv{
+.menuAndContent{
     max-width: 100%;
     display: flex;
     
-    .content{
+    .contentStaffs{
         width: 100%;
         padding: 10px;
     }
 
     .staffs{
+        margin: 0 auto;
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
         align-items: center;
         align-content: center; 
+        flex-wrap: wrap;
     }
 
     .staff{
         width: 350px;
         height: 250px;
         margin: 10px;
-        background-color: red;
-        border: 4px double black; 
-        background: #fc3;   
+        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;
+
+        }    
+    }
+
+    .imgStaff{
+        width: 100%;
+        padding: 5px ;
+       
+    }
+
+    .loader{
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        right: 0;
+        top: 50%;
+        height: 100%;
+        width: 100%;
+        z-index: 9999;  
     }
 
 }
@@ -77,10 +109,6 @@
 // }
 
 
-.imgStaff{
-    width: 100%;
-    padding: 5px ;
-   
-}
+
   
 

src/style/components/_form.scss

@@ -0,0 +1,240 @@
+.formdiv{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	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 {
+        box-sizing: border-box;
+        width: 460px;
+        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 {
+        margin: 20px auto;
+        width: 80%;
+        display: block;
+        border: none;
+        padding: 10px 0;
+        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-repeat: no-repeat;
+        color: darken($color, 1%);
+        &:focus {
+            box-shadow: none;
+            outline: none;
+            background-position: 0 0;
+            &::-webkit-input-placeholder {
+                color: $color;
+                font-size: 11px;
+                transform: translateY(-20px);
+                visibility: visible !important;
+            }
+        }
+        option{
+            background: rgba(247, 240, 240, 0.7);
+            border-radius: 3px;
+        }
+        select::-ms-expand { /* for IE 11 */
+            appearance: none;
+        }
+    }
+    
+    .textarea {
+        margin: 20px auto;
+        width: 80%;
+        height: 100px;
+        display: block;
+        border: none;
+        padding: 20px 0;
+        overflow: hidden;
+        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-repeat: no-repeat;
+        color: darken($color, 1%);
+        &:focus {
+            box-shadow: none;
+            outline: none;
+            background-position: 0 0;
+            &::-webkit-input-placeholder {
+                color: $color;
+                font-size: 11px;
+                transform: translateY(-20px);
+                visibility: visible !important;
+            }
+        }
+    }
+
+    .buttonConteiner{
+        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; 
+  margin: 0; 
+}
+
+.upload-zone {
+    padding: 3px;
+    cursor: pointer;
+    position: absolute;
+    left: 33%;
+    top: 60%;
+    -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-border-radius: 20%;
+    -ms-border-radius: 20%;
+    -moz-border-radius: 20%;
+    -o-border-radius: 20%;
+    border-radius: 20%;
+    -webkit-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+  }
+  .upload-zone:before {
+    display: block;
+    width: 80px;
+    height: 80px;
+    border: 3px dashed $color;
+    position: relative;
+    -webkit-border-radius: 20%;
+    -ms-border-radius: 20%;
+    -moz-border-radius: 20%;
+    -o-border-radius: 20%;
+    border-radius: 20%;
+    content: " ";
+    display: block;
+    -webkit-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+  }
+  .upload-zone:hover {
+    background: $color;
+  }
+  .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%;
+    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;
+  }
+  .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: 43%;
+    top: 60%;
+  }
+  .zone3{
+    left: 53%;
+    top: 60%;
+  }
+  .zone4{
+    left: 63%;
+    top: 60%;
+  }

src/style/components/_formLogin.scss

@@ -6,10 +6,7 @@
     align-items: center;
 	font-size: 20px;
     margin: 0 auto ;
-    // background-color: #c1bdba;
     background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
-    
-    //height: 500px; /* You must set a specified height */
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
@@ -59,15 +56,16 @@ h1 {
     background-size: 200px 100%;
     background-repeat: no-repeat;
     color: darken($el-color, 20%);
+
     &:focus {
         box-shadow: none;
         outline: none;
         background-position: 0 0;
         &::-webkit-input-placeholder {
-        color: $el-color;
-        font-size: 11px;
-        transform: translateY(-20px);
-        visibility: visible !important;
+            color: $el-color;
+            font-size: 11px;
+            transform: translateY(-20px);
+            visibility: visible !important;
         }
     }
 }
@@ -88,4 +86,125 @@ h1 {
         transform: translateY(-3px);
         box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
     }
-}
+}
+
+
+h1, .input::-webkit-input-placeholder, .button {
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  h1 {
+    height: 100px;
+    width: 100%;
+    font-size: 18px;
+    background: darken($color, 4%);
+    color: white;
+    line-height: 150%;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
+  }
+  
+  .form {
+    box-sizing: border-box;
+    width: 460px;
+    margin: auto 0;
+    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+    padding-bottom: 40px;
+    border-radius: 3px;
+  }
+  
+  .input {
+    margin: 20px 25px;
+    width: 80%;
+    display: block;
+    border: none;
+    padding: 10px 0;
+    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: -200px 0;
+    background-size: 200px 100%;
+    background-repeat: no-repeat;
+    color: darken($color, 1%);
+    &:focus {
+      box-shadow: none;
+      outline: none;
+      background-position: 0 0;
+      &::-webkit-input-placeholder {
+        color: $color;
+        font-size: 11px;
+        transform: translateY(-20px);
+        visibility: visible !important;
+      }
+    }
+  }
+  //.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.5s ease;}
+  .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);
+    }
+  }
+  // .allStaffs{
+    
+  //   max-width: 1500px;
+  //    display: flex;
+  //     flex-wrap: wrap;
+  //     justify-content: center;
+  //     align-items: center;
+  //     align-content: center;
+  // }
+  // .staffs{
+  //   max-width: 1500px;
+  //   display: flex;
+  //     flex-wrap: wrap;
+  //     justify-content: center;
+  //     align-items: center;
+  //     align-content: center;
+      
+  // }
+  // .staff{
+  //    width: 350px;
+     
+  // }
+  .main{
+    display: flex;
+  }
+  
+  .sider{
+    background-color: #FD7F71
+  }
+  .auth__button{
+  
+    width: 100%;
+    display : flex;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    
+  }
+  .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;
+  }
+  

src/style/components/_header.scss

@@ -3,6 +3,10 @@
 
 	&__logo {
 		width: 20%;
+		margin: 0 auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;	
 	}
 
 	&__searchLine{
@@ -34,4 +38,93 @@
 			}
 		}
 	}
+}
+
+.searchInput::-webkit-input-placeholder, .button {
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
+}
+  
+.searchInput{   
+	margin: 40px 25px;
+	width: 75%;
+	display: block;
+	border: none;
+	padding: 10px 0;
+	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: -700px 0;
+	background-size: 700px 100%;
+	background-repeat: no-repeat;
+	color: darken($color,1%);
+	
+	&:focus {
+		box-shadow: none;
+		outline: none;
+		background-position: 0 0;
+		&::-webkit-input-placeholder {
+			text-indent: 700px; transition: text-indent 0.5s ease;
+		}
+	}
+}
+.searchBtn{
+    border:none;
+    outline: none;
+    border: 0px;
+    cursor: pointer;
+	color: $primary;
+	transition: .3s ease-out;
+	
+	&:hover,
+	&:focus { 
+    	transform: scale(1.125);
+    
+    	.icon {
+	  		transform: scale(1.25); 
+		} 
+	} 
+        // Display/alignment
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        
+        // Sizing
+        width: 68px;
+        height: 68px;
+        border-radius: 34px;
+        
+        // Style
+        background-color: $white;
+        box-shadow:
+          0 1px 1px rgba($background-3, .6),
+          0 3px 3px rgba($background-3, .4),
+          0 8px 16px rgba($background-3, .3);
+        
+        &:hover,
+        &:focus {
+          box-shadow:
+            0 2px 2px rgba($background-3, .4),
+            0 4px 4px rgba($background-3, .3),
+            0 12px 32px rgba($background-3, .3); } 
+}
+
+.fill-currentcolor {
+	fill: currentcolor; 
+}
+  
+.fill-none {
+	fill: none; 
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    transition: .3s ease-out;
+        
+    @media (min-width: $breakpoint) {
+      	width: 32px;
+		height: 32px; 
+	} 
 }

src/style/components/_leftMenu.scss

@@ -0,0 +1,53 @@
+.ant-layout-sider-children{
+    background: $el-color;  
+}
+.ant-menu-submenu-title{
+    background: $el-color;  
+}
+.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;
+    bottom: 0;
+    cursor: pointer;
+    height: 48px;
+    line-height: 48px;
+    color: #fff;
+    background: #e06b62;
+    z-index: 1;
+    transition: all 0.2s;
+}
+
+.ant-menu .ant-menu-sub .ant-menu-inline{
+    & :hover{
+        background: #e06b62;
+    }
+    
+}

src/style/components/auth.scss

@@ -1,5 +1,3 @@
-$color: #FD7F71;
-
 h1, .input::-webkit-input-placeholder, .button {
   font-family: 'roboto', sans-serif;
   transition: all 0.3s ease-in-out;
@@ -23,9 +21,6 @@ h1 {
   box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
   padding-bottom: 40px;
   border-radius: 3px;
-
-
-
 }
 
 .input {
@@ -53,7 +48,6 @@ h1 {
     }
   }
 }
-
 //.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.5s ease;}
 .button {
   border: none;
@@ -71,52 +65,35 @@ h1 {
     box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
   }
 }
-
-.allStaffs{
+// .allStaffs{
   
-  max-width: 1500px;
-   display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-.staffs{
-  max-width: 1500px;
-  display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
+//   max-width: 1500px;
+//    display: flex;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     align-items: center;
+//     align-content: center;
+// }
+// .staffs{
+//   max-width: 1500px;
+//   display: flex;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     align-items: center;
+//     align-content: center;
     
-}
-.staff{
-   width: 350px;
+// }
+// .staff{
+//    width: 350px;
    
-}
-
+// }
 .main{
   display: flex;
 }
 
-.loader{
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  right: 0;
-  top: 50%;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  
-   
-}
 .sider{
   background-color: #FD7F71
 }
-
-
-
 .auth__button{
 
   width: 100%;
@@ -139,8 +116,3 @@ h1 {
     padding-bottom: 10px;
     padding-top: 10px;
 }
-.ant-layout-sider-children{
-  background: #FD7F71;
-  
-
-}

src/style/components/searchLine.scss

@@ -1,94 +0,0 @@
-$color: #FD7F71;
-$background: #F7FBFB;
-$background-2: #EAF5F5;
-$background-3: #BBD8D8;
-$primary: #FD7F71;
-$white: #fff;
-$breakpoint: 768px;
-.searchInput::-webkit-input-placeholder, .button {
-    font-family: 'roboto', sans-serif;
-    transition: all 0.3s ease-in-out;
-  }
-
-
-.searchInput{   
-margin: 40px 25px;
-width: 75%;
-display: block;
-border: none;
-padding: 10px 0;
-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: -700px 0;
-background-size: 700px 100%;
-background-repeat: no-repeat;
-color: darken($color,1%);
-&:focus {
-  box-shadow: none;
-  outline: none;
-  background-position: 0 0;
-  &::-webkit-input-placeholder {
-    text-indent: 700px; transition: text-indent 0.5s ease;
-  }
-}
-}
-.searchBtn{
-    border:none;
-    outline: none;
-    border: 0px;
-    cursor: pointer;
-  color: $primary;
-  transition: .3s ease-out;
-  
-  &:hover,
-  &:focus { 
-    transform: scale(1.125);
-    
-    .icon {
-      transform: scale(1.25); } } 
-        // Display/alignment
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        
-        // Sizing
-        width: 68px;
-        height: 68px;
-        border-radius: 34px;
-        
-        // Style
-        background-color: $white;
-        box-shadow:
-          0 1px 1px rgba($background-3, .6),
-          0 3px 3px rgba($background-3, .4),
-          0 8px 16px rgba($background-3, .3);
-        
-        &:hover,
-        &:focus {
-          box-shadow:
-            0 2px 2px rgba($background-3, .4),
-            0 4px 4px rgba($background-3, .3),
-            0 12px 32px rgba($background-3, .3); } 
-  }
-
-  .fill-currentcolor {
-    fill: currentcolor; }
-  
-  .fill-none {
-    fill: none; }
-
-    .icon {
-        width: 24px;
-        height: 24px;
-        transition: .3s ease-out;
-        
-        @media (min-width: $breakpoint) {
-          width: 32px;
-          height: 32px; } }
-          
-          
-         
-          
-        

src/style/index.scss

@@ -1,47 +1,16 @@
-
 @import "~antd/dist/antd.css";
 
 @import "abstracts/variables.scss";
 
 @import "base/base";
-@import "base/typography";
 
 @import "layout/container";
 
 @import "components/header";
-@import "components/formLogin";
 @import "components/allStaff";
+@import "components/leftMenu";
+// @import "components/formLogin";
+@import "components/form";
 
-@import './components/auth.scss';
-@import './components/searchLine.scss'
-
-
-// *, *:before, *:after{
-//   box-sizing:border-box; 
-// }
-
-// body{
-//     max-width: 1400px;
-//     min-width: 300px;
-//     width: 100%;
-// 	font-size: 20px;
-//     margin: 0 auto ;
-//     background-color: aqua;
-//     // background-image: url("../img/pngtree-Analog-Clock-Clock-Timepiece-Time-photo-484074.jpg");
-//     // background-color: #cccccc; /* Used if the image is unavailable */
-//     // height: 500px; /* You must set a specified height */
-//     // background-position: center; /* Center the image */
-//     // background-repeat: no-repeat; /* Do not repeat the image */
-//     // background-size: cover; 
-// }
-
-// .contentDiv{
-//     display: flex;   
-// }
-
-// .content{
-//     width: 80%;
-//     display: flex;
-//     flex-wrap: wrap;
-// }
+// @import './components/auth.scss';