add-material

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -1,15 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 class FullInfoAboutStaff extends Component {
     render() {
         const { InfoStaff } = this.props
         console.log(InfoStaff)
         return (
-            <div>
-             {InfoStaff.map((el,key)=>(<div className="staff"  key={key}> {el.title} {el.price} {el.description} {el.img} </div>)
-                    )} 
-                    
-            </div>
+            <Fragment>
+                {InfoStaff.map((el,key)=>(
+                    <div className="staff" 
+                        key={key}
+                    > 
+                        {el.title} 
+                        {el.price} 
+                        {el.description} 
+                        {el.img} 
+                    </div>)
+                )}    
+            </Fragment>
         );
     }
 }

src/components/AllStaffs/index.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-
 import { Link } from "react-router-dom";
 
-import Loader from 'react-loader-spinner'
+import Loader from 'react-loader-spinner';
+import AddNewStaff from '../../components/BtnAddNewStaff'
 
 class AllStaffs extends Component {
     
@@ -13,25 +13,39 @@ class AllStaffs extends Component {
            
         let data;
             if(isFetching===true){
-                data = <div> 
-                    <Loader 
-                type="Triangle"
-                color="#1890ff"
-                height="75"	
-                width="75"
-             /> 
-             </div> 
+                data =  <div className="loader" 
+                            style={{ height:"70vh", 
+                                display:"flex", 
+                                "justify-content": "center", 
+                                "align-items": "center"}}
+                        > 
+                            <Loader 
+                                type="Triangle"
+                                color="#1890ff"
+                                height="100"	
+                                width="100"
+                            /> 
+                        </div> 
             }
             else{
                 data = <div className="staffs">
-                    {inputStaffs.map((el,key)=>(<Link to={'/staff'}  key={key} onClick={getInfoStaffData.bind(null,[{description: el.description, title: el.title, price: el.price, img: el.img}])}><div className="staff" > {el.title} {el.price}  </div></Link> )
+                    {inputStaffs.map((el,key)=>(
+                        <Link to={'/staff'} 
+                            key={key} 
+                            onClick={getInfoStaffData.bind(null,[{description: el.description, title: el.title, price: el.price, img: el.img}])}
+                        >
+                            <div className="staff" > 
+                                <h1>{el.title}</h1> 
+                                <p>{el.price}</p>  
+                            </div>
+                        </Link> )
                     )}    
                       </div>
             }
         return (
-           <div>
-              
+           <div className="content">
                 {data}
+                <AddNewStaff/>
            </div> 
             
         );

src/components/Auth/index.js

@@ -3,33 +3,34 @@ import { reduxForm, Field } from "redux-form";
 import  authValidate  from "../../utils/validate";
 
 const Form = props => {
-  const { handleSubmit } = props
-    return (
-      <form className="auth__form" onSubmit={handleSubmit}>
-        <label>Login:</label>
-        <div>
-          <Field
-             name="email"
-             component="input"
-             type="email" 
-             label="E-mail:"
-             placeholder="example@email.com"
-
-          />
-        </div>
-        <label>Password:</label>
-        <div>  
-          <Field
-             name="password"
-             component="input" 
-             type="password" 
-              label="Password:" 
-             placeholder ="password"  
-          />
-        </div>
-        <button className="auth__submit-button">Submit</button>
-      </form>
-    );
+  	const { handleSubmit } = props
+    	return (
+      		<div className="formdiv">
+				<form className="form" onSubmit={handleSubmit}>
+					<h1>Material Design Text Input With No Extra Markup</h1>
+				
+					<Field
+						name="email"
+						component="input"
+						type="email" 
+						
+						placeholder="example@email.com"
+						className="input"
+					/>
+					
+					<Field
+						name="password"
+						component="input" 
+						type="password" 
+						placeholder ="password"
+						className="input"  
+					/>
+					
+					<button className="button">Submit</button>
+				</form>	  
+      		</div>
+      
+    	);
 }
 
 export default reduxForm({ form: "authForm", validate: authValidate })(Form);

src/components/Auth/registration.js

@@ -9,60 +9,55 @@ const RegistrForm = props => {
    console.log(props)
 };
   return (
-    <form onSubmit={handleSubmit(submit)}>
-      <div>
-        <label>Login</label>
-        <div>
-          <Field
-            name="Login"
-            component="input"
-            type="text"
-            placeholder="Login"
-          />
-        </div>
-      </div>
-      <div>
-        <label>Name</label>
-        <div>
-          <Field
-            name="Name"
-            component="input"
-            type="text"
-            placeholder="Name"
-          />
-        </div>
-      </div>
-      <div>
-        <label>Phone</label>
-        <div>
+    <div className="formdiv">
+		<form onSubmit={handleSubmit(submit)} className="form">
+		
+			<Field
+				name="Login"
+				component="input"
+				type="text"
+				placeholder="Login"
+				className="input"
+			/>
+		
+		
+			<Field
+				name="Name"
+					component="input"
+					type="text"
+					placeholder="Name"
+					className="input"
+				/>
+			
+        
           <Field
             name="Phone"
             component="input"
             type="text"
-            placeholder="+380XXXXXXXX"
+			placeholder="+380XXXXXXXX"
+			className="input"
           />
-        </div>
-      </div>
-      <div>
-        <label>Email</label>
-        <div>
+        
           <Field
             name="email"
             component="input"
             type="email"
-            placeholder="email@example.com"
+			placeholder="email@example.com"
+			className="input"
           />
+        
+
+      <ul class="tab-group">
+        <li class="tab active"><a href="/signup">Sign Up</a></li>
+        <li class="tab"><a href="/login">Log In</a></li>
+      </ul>
+
+        <div className="tab-group">
+          <button className="button" type="submit" disabled={pristine || submitting}>Submit</button>
+          <button className="button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</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>
+    </div>
   )
 }
 

src/components/BtnAddNewStaff/index.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
+import { Icon } from 'antd';
 import { Link } from "react-router-dom";
 
 
@@ -7,9 +8,9 @@ import { Link } from "react-router-dom";
 class BtnAddNewStaff extends Component {
     render() {
         return (
-            <div className="topbutton">
-               <Link to="/newStaff" className="topbutton">+</Link>
-            </div>
+            <Fragment>
+               <Link to="/newStaff" className="topbutton"><Icon type="plus" style={{fontSize: '30px'}} /></Link>
+            </Fragment>
         );
     }
 }

src/components/Header/Myprofile.js

@@ -5,7 +5,7 @@ class Myprofile extends Component {
     render() {
         return (
         <div className="header__auth">
-            <Link to="/registration" className="link" target="_blank">
+            <Link to="/auth" className="link" target="_blank">
                 <div className="header__auth__container">
                     <div className="avatar">
                         <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>

src/components/Header/logo.js

@@ -5,7 +5,7 @@ class HeaderLogo extends Component {
     render() {
         return (
             <div className="header__logo">
-               <Link to="/logo"><img src={logo} alt="Logo"/></Link> 
+               <Link to="/"><img src={logo} alt="Logo"/></Link> 
             </div>
         );
     }

src/components/Header/searchLine.js

@@ -74,15 +74,24 @@ class SearchLine extends Component {
             const { inputData, searchStaff } = this.props
             //console.log(this.props)
             searchStaff(inputData)
-    }   
-    render() {
-        return (
+    } 
 
-            <div className="header__searchLine">
-                <input onChange={e=>{this.changeHandler(e)}} />
-                <Link to = '/search'><button onClick={this.send}>search</button></Link>
+    // <div class="search-input">
+    //     <input type="text">
+    //     <span class="highlight"></span>
+    //     <span class="bar"></span>
+    //     <label>Search here</label>
+    //     <span class="glyphicon glyphicon-search"></span>
+    //     <span class="glyphicon glyphicon-remove"></span>
+    // </div>
 
-            </div>
+    render() {
+        return (
+            
+                <div className="header__searchLine">
+                    <input className="input" onChange={e=>{this.changeHandler(e)}} />
+                    <Link className="link" to='/search'><button onClick={this.send}>search</button></Link>
+                </div>
         );
     }
 }

src/components/LeftMenu/DrawCategory.js

@@ -1,98 +1,74 @@
-import React, {Component, Fragment} from 'react'
-import { Layout, Menu, Icon } from 'antd';
+import React, {Component} from 'react'
+import { Menu, Icon } from 'antd';
   
-const { Sider } = Layout;
 const SubMenu = Menu.SubMenu;
 
 const axios = require('axios');
 
-axios.get('http://127.0.0.1:2000/api/categories')
-        .then(function (response) { console.log(response.data) })
 
-class Category extends Component {
-    
 
-    onChange = ()=>{
-        axios.post(
-            'http://127.0.0.1:2000/api/categories',
-            {
-                "title": "Авторио",
-                "description": "Током бахнет!",
-                "parentId": 0
-            }
+class DrawCategory extends Component {
+    constructor(props){
+        super(props)
+        this.data = []
+        this.caty= []
+        this.fil = []
+    }
+
+    // onChange = ()=>{
+    //     axios.post(
+    //         'http://127.0.0.1:2000/api/categories',
+    //         {
+    //             "title": "Авторио",
+    //             "description": "Током бахнет!",
+    //             "parentId": 0
+    //         }
             
-        )
+    //     )
         
-        .then(function (response) { console.log(response) })
-        .catch((err)=>console.log(err))
-    }
+    //     .then(function (response) { console.log(response) })
+    //     .catch((err)=>console.log(err))
+    // }
     
-    onChange1 = ()=>{
-        axios.get('http://127.0.0.1:2000/api/staffs')
-        .then(function (response) { console.log(response.data) })
-    }
+    // onChange1 = ()=>{
+    //     axios.get('http://127.0.0.1:2000/api/staffs')
+    //     .then(function (response) { console.log(response.data) })
+    // }
 
     render(){
-        console.log(Layout, Menu, Icon)
+        
+        axios.get('http://127.0.0.1:2000/api/categories')
+        .then((response) => this.data = response.data);
+        this.caty = this.data.filter(el => el.parentId === 0)
+        
+
+        console.log(this.caty)
+        console.log(this.fil)
         return (
-            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">    
-                {/* { test[count].answers.map((el,key) => <Answers test={el} 
-																type={test[count].type} 
-																youMark={youMark} 
-																count={count} 
-																addMark={addMark}
-																allMark={allMark}
-																allMarks={allMarks} 
-																key={key} />) }        */}
-                <Menu.Item key="10">
-                    <Icon type="pie-chart" />
-                    <span>Футболка</span>
-                </Menu.Item>
+            <div>
+                {this.caty.map((el,key)=>
+                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">    
 
-                
-                    <Menu.Item key="1">
-                    <Icon type="pie-chart" />
-                    <span>Option 1</span>
-                    </Menu.Item>
-                    <Menu.Item key="2">
-                    <Icon type="desktop" />
-                    <span>Option 2</span>
-                    </Menu.Item>
-                    <SubMenu
-                    key="sub1"
-                    title={<span><Icon type="user" /><span>Одежда</span></span>}
-                    >
-                    <SubMenu
-                    key="sub6"
-                    title={<span><Icon type="shopping" /><span>Женское белье</span></span>}
-                    >
-                    <Menu.Item key="3"><button onClick={this.onChange}>Post
-        </button></Menu.Item>
-                    <Menu.Item key="4"><button onClick={this.onChange1}>Get
-        </button></Menu.Item>
-                    </SubMenu>
-                    <Menu.Item key="5">Bill</Menu.Item>
-                    <Menu.Item key="6">Alex</Menu.Item>
-                    </SubMenu>
-                    <SubMenu
-                    key="sub2"
-                    title={<span><Icon type="team" /><span>Team</span></span>}
-                    >
-                    <Menu.Item key="7">Team 1</Menu.Item>
-                    <Menu.Item key="8">Team 2</Menu.Item>
-                    </SubMenu>
-                    <Menu.Item key="9">
-                    <Icon type="file" />
-                    <span>File</span>
-                    </Menu.Item>
-                
-                            
-            </Menu>
-                
-            
+                        <SubMenu key="sub1"
+                            title={<span key={key}><Icon type={el.description} /><span >{el.title}</span></span>}
+                        >   
+                            {
+                                //  this.fil = this.data.filter(el => {
+                                //     el.parentId === this.caty.id 
+                                //     console.log(this.fil)
+                                // })
+                                // this.fil.map((el,key)=>
+                                    // <Menu.Item key="5" key={key}>{el.title}</Menu.Item>
+                                // )
+                            }
+                        </SubMenu>
+                        
+                    </Menu>     
+                )}
+            </div>
         );
     }
 }
 
-export default Category
+export default DrawCategory
 

src/components/LeftMenu/index.js

@@ -1,10 +1,79 @@
-import React, {Component, Fragment} from 'react';
-import { Layout, Menu, Icon } from 'antd';
+import React, { Component } from 'react';
+import { Layout } from 'antd';
+import DrawCategory from './DrawCategory'
+import Slider from '@material-ui/lab/Slider';
 
-import Category from './DrawCategory'
-  
 const { Sider } = Layout;
-const axios = require('axios');
+// const axios = require('axios');
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Одежда",
+//         "description": "s k i n",
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Электроника",
+//         "description": "laptop",
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Инструменты",
+//         "description": "t o l l",
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Алкоголь",
+//         "description": "Бахнем по 100",
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Продукты",
+//         "description": "shopping",
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+// axios.post('http://127.0.0.1:2000/api/categories',
+//     {
+//         "title": "Автомобили",
+//         "description": `c+"a"+r`,
+//         "parentId": 0
+//     }  
+// )
+// .then(function (response) { console.log(response) })
+// .catch((err)=>console.log(err))
+
+const styles = {
+    root: {
+        width: 300,
+    },
+    slider: {
+        padding: '22px 0px',
+    },
+};
 
 class LeftMenu extends Component {
     state = {
@@ -15,37 +84,27 @@ class LeftMenu extends Component {
         this.setState({ collapsed });
     }
 
-    onChange = ()=>{
-
-        axios.post(
-            'http://127.0.0.1:2000/api/categories',
-            {
-                "title": "Авто",
-                "description": "Током бахнет!",
-                "parentId": 0
-            }
-            
-        )
-        
-        .then(function (response) { console.log(response) })
-        .catch((err)=>console.log(err))
-
-    }
-    
-    // onChange1 = ()=>{
-    //     axios.get('http://127.0.0.1:2000/api/staffs')
-    //     .then(function (response) { console.log(response.data) })
-    // }
-    
     render() {
+
+        const { classes } = this.props;
+        const { value } = this.state;
+
         return (
             <div>
                 <Layout style={{ minHeight: '100vh' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
-                    >  
-                        <Category />   
+                    >
+                        <DrawCategory />
+                        <Slider
+                            classes={{ container: classes.slider }}
+                            value={value}
+                            min={0}
+                            max={6}
+                            step={1}
+                            onChange={this.handleChange}
+                        />
                     </Sider>
                 </Layout>
             </div>

src/container/AddNewStaff.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { connect} from 'react-redux';
 import * as actions from "../actions/addNewStaffAction";
 
@@ -10,24 +10,25 @@ import EditModal from "../components/Modal";
 
 class AddNewStaff extends Component {
     
-  closeEditModal = () => {
-      const { closeModal } = this.props;
-        closeModal();
-  }
-      render() {
+  	closeEditModal = () => {
+      	const { closeModal } = this.props;
+        	closeModal();
+  	}
+    render() {
         const { showModal, error } = this.props
         return (
-          <Fragment>
-             <div >
-             
-            <FormAddNewStaff {...this.props}/>
-            
-          </div>
-          <EditModal  visible={showModal} onOk={this.closeEditModal} onCancel={this.closeEditModal} error = {error} />     
-          </Fragment>   
+			<div className="top">
+            	<div>          
+              		<FormAddNewStaff {...this.props}/>
+            	</div>
+				<EditModal visible={showModal}
+					onOk={this.closeEditModal} 
+					onCancel={this.closeEditModal} 
+					error={error} />     
+          	</div>   
            
         );
-      }
+    }
 }
 
 

src/container/MainPage.js

@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect} from 'react-redux';
 import * as actions from "../actions/staffsAction";
-import LeftMenu from '../components/LeftMenu'
+
 import { bindActionCreators } from "redux";
-import AllStaffs from "../components/AllStaffs"
 
-import AddNewStaff from '../components/BtnAddNewStaff'
+import LeftMenu from '../components/LeftMenu'
+import AllStaffs from "../components/AllStaffs"
+import Header from '../container/Header'
 
 class MainPage extends Component {
  
@@ -15,16 +16,15 @@ class MainPage extends Component {
         
     }
       render() {
-        
+      console.log(this.props, 'qwewqrwqr')  
         return (
-          <div className='ras'>
-            <div className='ras1'>
-              <AddNewStaff/>
-              <LeftMenu />
-              <AllStaffs {...this.props}/>
-
-            </div>
-          </div>       
+            <Fragment>
+              <Header/>
+              <div className="contentDiv">
+                <LeftMenu />
+                <AllStaffs {...this.props}/>
+              </div>
+            </Fragment>       
         );
       }
 }

src/container/MainPageStaffInfo.js

@@ -4,13 +4,17 @@ import * as actions from "../actions/staffsAction";
 import { bindActionCreators } from "redux";
 
 import FullInfoAboutStaff from '../components/AllStaffs/FullInfoAboutStaff'
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
 
 class MainPageStaffInfo extends Component {
     render() {
        
         return (
             <div>
-                <FullInfoAboutStaff {...this.props}/>
+                <Header />
+                <LeftMenu />
+                <FullInfoAboutStaff {...this.props} />
             </div>
         );
     }

src/container/SearchStaffs.js

@@ -3,7 +3,11 @@ import { connect} from 'react-redux';
 import * as actions from "../actions/searchStaffAction";
 
 import { bindActionCreators } from "redux";
+
 import SearchStaffsPage from "../components/SearchStaffsPage"
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
+
 
 
 class SearchStaff extends Component {
@@ -12,7 +16,9 @@ class SearchStaff extends Component {
         
         return (
           <div>
-            <SearchStaffsPage {...this.props}/>
+            <Header />
+            <LeftMenu />
+            <SearchStaffsPage {...this.props} />
           </div>       
         );
       }

src/container/SearchStaffsInfo.js

@@ -4,12 +4,16 @@ import * as actions from "../actions/searchStaffAction";
 import { bindActionCreators } from "redux";
 
 import SearchFullInfoStaff from '../components/SearchStaffsPage/SearchFullInfoStaff'
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
 
 class SearchInfoStaffsInfo extends Component {
     render() {
        
         return (
             <div>
+                <Header />
+                <LeftMenu />
                 <SearchFullInfoStaff {...this.props}/>
             </div>
         );

src/index.js

@@ -3,17 +3,13 @@ import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 import ReactDOM from 'react-dom';
 
-import './index.css';
-import 'antd/dist/antd.css';
-
 import * as serviceWorker from './serviceWorker';
 
 import Router from "./router";
-
 import store from "./state/state";
 
+import 'antd/dist/antd.css';
 import "./style/index.scss";
-// import "./index.css";
 
 ReactDOM.render(
     <BrowserRouter>
@@ -24,8 +20,4 @@ ReactDOM.render(
     document.getElementById("root")
 );
 
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
 serviceWorker.unregister();

src/router.js

@@ -2,33 +2,25 @@ import React from "react";
 import { Switch, Route } from "react-router-dom";
 
 import MainPage from "./container/MainPage";
-import Header from './container/Header'
 import Form from './components/Auth/index'
 import RegistrForm from './components/Auth/registration'
 import MainPageStaffInfo from './container/MainPageStaffInfo'
-
 import SearchStaffs from './container/SearchStaffs'
-
 import SearchStaffsInfo from './container/SearchStaffsInfo'
-
 import AddNewStaff from './container/AddNewStaff'
 
 export default () => (
-
-    <div>
-        
-        <Header/>
-	        <Switch>
-                <Route path="/" exact component={()=><MainPage/>} />
-                    <Route path="/auth" exact component={()=><Form/>} />
-                    <Route path="/registration" exact component={()=><RegistrForm/>} />
-                    <Route path="/staff" exact component={()=><MainPageStaffInfo/>} />
-                    <Route path="/search" exact component={()=><SearchStaffs/>} />
-                        <Route path="/search/Staff" exact component={()=><SearchStaffsInfo/>} />
-                    <Route path="/newStaff" exact component={()=><AddNewStaff/>} />
-                
-	        </Switch>
-    </div>
+	    <Switch>
+            <Route path="/" exact component={()=><MainPage/>} />
+                <Route path="/auth" exact component={()=><Form/>} />
+                <Route path="/registration" exact component={()=><RegistrForm/>} />
+                <Route path="/registration/login" exact component={()=><Form/>} />
+                <Route path="/staff" exact component={()=><MainPageStaffInfo/>} />
+                <Route path="/search" exact component={()=><SearchStaffs/>} />
+                    <Route path="/search/Staff" exact component={()=><SearchStaffsInfo/>} />
+                <Route path="/newStaff" exact component={()=><AddNewStaff/>} />
+            
+	    </Switch>
 );
 
 // /Ортопедическое кресло Austin/Рассрочка

src/style/abstracts/variables.scss

@@ -17,8 +17,8 @@ $color-grey-the-lightest: #f9fbfd;
 $color-grey-transparent: rgba(247, 249, 251, 0.7);
 
 //BASE COLORS
-$color-shadow: #d4d4d4;
-
+$color-shadow:#d4d4d4;
+$el-color:#FD7F71;
 // BASE
 $color-backgtound: #f5f8fb;
 $box-shadow: 0 0 16px 0 $color-shadow;

src/style/base/base.scss

@@ -85,7 +85,9 @@ body {
 	line-height: 1.7;
 	box-sizing: border-box;
 	background: $color-backgtound;
+	background-color: aqua;
 	min-width: 320px;
+	max-width: 1350px;
 }
 
 a:hover {

src/style/components/_allStaff.scss

@@ -0,0 +1,82 @@
+
+.contentDiv{
+    max-width: 100%;
+    display: flex;
+    
+    .content{
+        width: 100%;
+        padding: 10px;
+    }
+
+    .staffs{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        align-content: center; 
+    }
+
+    .staff{
+        width: 350px;
+        height: 250px;
+        margin: 10px;
+        background-color: red;
+        border: 4px double black; 
+        background: #fc3;   
+    }
+
+}
+.topbutton{
+    position:fixed;
+    bottom:50px;
+    right: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 rgba(227, 115, 14, 0.7);
+    border-radius: 25px;
+    background: #e3730e;
+    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);
+        }
+      }
+    
+}
+
+// .loader{
+//     position: fixed;
+//     bottom: 0;
+//     left: 50%;
+//     right: 0;
+//     top: 50%;
+//     height: 100%;
+//     width: 100%;
+//     z-index: 9999; 
+
+// }
+
+
+
+  
+

src/style/components/_formLogin.scss

@@ -0,0 +1,89 @@
+.formdiv{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    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; 
+}
+
+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($el-color, 4%);
+  color: #fff;
+  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: 260px;
+  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+  padding-bottom: 40px;
+  border-radius: 3px;
+  background-color: #fff;
+  h1 {
+    box-sizing: border-box;
+    padding: 20px;
+  }
+}
+
+.input {
+  margin: 40px 25px;
+  width: 200px;
+  display: block;
+  border: none;
+  padding: 10px 0;
+  border-bottom: solid 1px $el-color;
+  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $el-color 4%);
+  background-position: -200px 0;
+  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;
+    }
+  }
+}
+
+// .input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.9s ease;}
+
+.button {
+  border: none;
+  background: $el-color;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 6px;
+  width: 200px;
+  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,14 +1,3 @@
-body {
-	
-	margin: 0;
-	padding: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-	  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-	  sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-  }
-
 .header {
 	display:flex;
 
@@ -20,7 +9,20 @@ body {
 		width: 60%;
 		display: flex;
 		justify-content: center;
-		align-items: center;	
+		align-items: center;
+			
+		.div{
+			width: 100%;		
+		}
+
+		.input{
+			width: 60%;	
+		}
+
+		.link{
+			width: 20%;
+		}
+
 	}
 
 	&__auth {
@@ -40,21 +42,4 @@ body {
 			}
 		}
 	}
-}
-
-
-// import React from "react";
-// import { Link } from "react-router-dom";
-
-// export default () => (
-// 	<header className="header">
-// 		<nav className="header__nav">
-// 			<Link className="header__nav-item" to="/">
-// 				Home
-// 			</Link>
-// 			<Link className="header__nav-item" to="/fetch">
-// 				Weather
-// 			</Link>
-// 		</nav>
-// 	</header>
-// );
+}

src/style/header/logo.scss

@@ -1,3 +0,0 @@
-.logo{
-    width: 20%;
-}

src/style/index.scss

@@ -5,11 +5,37 @@
 @import "base/base";
 @import "base/typography";
 
-// @import "layout/container";
+@import "layout/container";
 
-// @import "components/list";
 @import "components/header";
-// @import "components/form";
+@import "components/formLogin";
+@import "components/allStaff";
 
+// *, *:before, *:after{
+//   box-sizing:border-box; 
+// }
 
-@import "header/logo.scss"
+// 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;
+// }

src/style/layout/container.scss

@@ -0,0 +1,10 @@
+// .container {
+// 	max-width: 192rem;
+// 	width: 100%;
+// 	margin: 0 auto;
+// }
+
+// .todo {
+// 	padding: 3rem;
+// 	display: flex;
+// }