'someRefactoring'

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",

src/store/app/actions.js

@@ -1,59 +1,36 @@
-export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
-export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
-export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
-
-export const GET_SERVICES_REQUEST = "GET_SERVICES_REQUEST";
-export const GET_SERVICES_REQUEST_SUCCESS = "GET_SERVICES_REQUEST_SUCCESS";
-export const GET_SERVICES_REQUEST_FAIL = "GET_SERVICES_REQUEST_FAIL";
-
-export const GET_ALL_REQUEST = "GET_ALL_REQUEST";
-export const GET_ALL_REQUEST_SUCCESS = "GET_ALL_REQUEST_SUCCESS";
-export const GET_ALL_REQUEST_FAIL = "GET_ALL_REQUEST_FAIL";
-
-export const PUT_ORDERS_REQUEST = "PUT_ORDERS_REQUEST";
-export const PUT_ORDERS_REQUEST_SUCCESS = "PUT_ORDERS_REQUEST_SUCCESS";
-export const PUT_ORDERS_REQUEST_FAIL = "PUT_ORDERS_REQUEST_FAIL";
-
-export const CHANGE_APPOINTMENT_DATE= "CHANGE_APPOINTMENT_DATE";
-export const CHANGE_APPOINTMENT_DOCTOR= "CHANGE_APPOINTMENT_DOCTOR";
-export const CHANGE_APPOINTMENT_TIME= "CHANGE_APPOINTMENT_TIME";
-export const CHANGE_APPOINTMENT_SPEC= "CHANGE_APPOINTMENT_SPEC";
-export const CHANGE_APPOINTMENT_COMMENT= "CHANGE_APPOINTMENT_COMMENT";
-export const CLEAR_APPOINTMENT= "CLEAR_APPOINTMENT";
-
-
+import * as types from '../actionsTypes/actionsTypes'
 
 const URL = "https://team-app-28f4a.firebaseio.com/";
 
 // -----------------------------------------------------------------------------------------------------------------
 
 export const setAppointmentDate = payload => ({
-    type: CHANGE_APPOINTMENT_DATE,
+    type: types.CHANGE_APPOINTMENT_DATE,
     payload
 });
 
 export const setAppointmentDoctor = payload => ({
-    type: CHANGE_APPOINTMENT_DOCTOR,
+    type: types.CHANGE_APPOINTMENT_DOCTOR,
     payload
 });
 
 export const setAppointmentTime = payload => ({
-    type: CHANGE_APPOINTMENT_TIME,
+    type: types.CHANGE_APPOINTMENT_TIME,
     payload
 });
 
 export const setAppointmentSpec = payload => ({
-    type: CHANGE_APPOINTMENT_SPEC,
+    type: types.CHANGE_APPOINTMENT_SPEC,
     payload
 });
 
 export const setAppointmentComment = payload => ({
-    type: CHANGE_APPOINTMENT_COMMENT,
+    type: types.CHANGE_APPOINTMENT_COMMENT,
     payload
 });
 
 export const clearAppointment = payload => ({
-    type: CLEAR_APPOINTMENT,
+    type: types.CLEAR_APPOINTMENT,
     payload
 });
 
@@ -61,17 +38,17 @@ export const clearAppointment = payload => ({
 
 
 const putOrdersRequest = payload => ({
-    type: PUT_ORDERS_REQUEST,
+    type: types.PUT_ORDERS_REQUEST,
     payload
 });
 
 const putOrdersSuccess = payload => ({
-    type: PUT_ORDERS_REQUEST_SUCCESS,
+    type: types.PUT_ORDERS_REQUEST_SUCCESS,
     payload
 });
 
 const putOrdersFail = payload => ({
-    type: PUT_ORDERS_REQUEST_FAIL,
+    type: types.PUT_ORDERS_REQUEST_FAIL,
     payload
 });
 
@@ -94,17 +71,17 @@ export const putOrders = (payload) => dispatch => {
 // -----------------------------------------------------------------------------------------------------------------
 
 const getAllRequest = payload => ({
-    type: GET_ALL_REQUEST,
+    type: types.GET_ALL_REQUEST,
     payload
 });
 
 const getAllRequestSuccess = payload => ({
-    type: GET_ALL_REQUEST_SUCCESS,
+    type: types.GET_ALL_REQUEST_SUCCESS,
     payload
 });
 
 const getAllRequestFail = payload => ({
-    type: GET_ALL_REQUEST_FAIL,
+    type: types.GET_ALL_REQUEST_FAIL,
     payload
 });
 
@@ -119,17 +96,17 @@ export const getAll = () => dispatch => {
 // -----------------------------------------------------------------------------------------------------------------
 
 const getDoctorsRequest = payload => ({
-    type: GET_DOCTORS_REQUEST,
+    type: types.GET_DOCTORS_REQUEST,
     payload
 });
 
 const getDoctorsRequestSuccess = payload => ({
-    type: GET_DOCTORS_REQUEST_SUCCESS,
+    type: types.GET_DOCTORS_REQUEST_SUCCESS,
     payload
 });
 
 const getDoctorsRequestFail = payload => ({
-    type: GET_DOCTORS_REQUEST_FAIL,
+    type: types.GET_DOCTORS_REQUEST_FAIL,
     payload
 });
 
@@ -143,17 +120,17 @@ export const getDoctors = () => dispatch => {
 
 // -----------------------------------------------------------------------------------------------------------------
 const getServicesRequest = payload => ({
-    type: GET_SERVICES_REQUEST,
+    type: types.GET_SERVICES_REQUEST,
     payload
 });
 
 const getServicesRequestSuccess = payload => ({
-    type: GET_SERVICES_REQUEST_SUCCESS,
+    type: types.GET_SERVICES_REQUEST_SUCCESS,
     payload
 });
 
 const getServicesRequestFail = payload => ({
-    type: GET_SERVICES_REQUEST_FAIL,
+    type: types.GET_SERVICES_REQUEST_FAIL,
     payload
 });
 

src/actions/auth.js

@@ -0,0 +1,62 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+import axios from 'axios'
+
+const authRequest = payload => ({
+    type: types.AUTH_REQUEST,
+    payload
+})
+
+const authRequestSuccess = payload => ({
+    type: types.AUTH_REQUEST_SUCCESS,
+    payload
+})
+
+const authRequestFail = payload => ({
+    type: types.AUTH_REQUEST_FAIL,
+    payload
+})
+
+export const auth = payload => {
+    return async dispatch => {
+        dispatch(authRequest());
+        try {
+            const { data } = await axios.post("http://subdomain.entony.fs.a-level.com.ua/api/auth/login", payload);
+            console.log('data',data)
+            dispatch(authRequestSuccess(data));
+        } catch (error){
+            dispatch(authRequestFail(error));
+        }
+    }
+}
+
+const registerRequest = payload => ({
+    type:types.REGISTRATION_REQUEST,
+    payload
+})
+
+const registerRequestSuccess = payload => ({
+    type: types.REGISTRATION_REQUEST_SUCCESS,
+    payload
+})
+
+const registrRequestFail = payload => ({
+    type: types.REGISTRATION_REQUEST_FAIL,
+    payload
+})
+
+export const register = payload => {
+    return async dispatch => {
+        dispatch(registerRequest());
+        try {
+            const { data } = await axios.post(
+                "http://subdomain.entony.fs.a-level.com.ua/api/auth/register",
+                payload
+            );
+           
+            dispatch(registerRequestSuccess(data))
+        } catch(error) {
+            dispatch(registrRequestFail(error))
+        }
+    };
+};

src/actionsTypes/actionsTypes.js

@@ -0,0 +1,30 @@
+export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
+export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
+export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
+
+export const GET_SERVICES_REQUEST = "GET_SERVICES_REQUEST";
+export const GET_SERVICES_REQUEST_SUCCESS = "GET_SERVICES_REQUEST_SUCCESS";
+export const GET_SERVICES_REQUEST_FAIL = "GET_SERVICES_REQUEST_FAIL";
+
+export const GET_ALL_REQUEST = "GET_ALL_REQUEST";
+export const GET_ALL_REQUEST_SUCCESS = "GET_ALL_REQUEST_SUCCESS";
+export const GET_ALL_REQUEST_FAIL = "GET_ALL_REQUEST_FAIL";
+
+export const PUT_ORDERS_REQUEST = "PUT_ORDERS_REQUEST";
+export const PUT_ORDERS_REQUEST_SUCCESS = "PUT_ORDERS_REQUEST_SUCCESS";
+export const PUT_ORDERS_REQUEST_FAIL = "PUT_ORDERS_REQUEST_FAIL";
+
+export const CHANGE_APPOINTMENT_DATE= "CHANGE_APPOINTMENT_DATE";
+export const CHANGE_APPOINTMENT_DOCTOR= "CHANGE_APPOINTMENT_DOCTOR";
+export const CHANGE_APPOINTMENT_TIME= "CHANGE_APPOINTMENT_TIME";
+export const CHANGE_APPOINTMENT_SPEC= "CHANGE_APPOINTMENT_SPEC";
+export const CHANGE_APPOINTMENT_COMMENT= "CHANGE_APPOINTMENT_COMMENT";
+export const CLEAR_APPOINTMENT= "CLEAR_APPOINTMENT";
+
+export const AUTH_REQUEST = "GET_AUTH_REQUEST";
+export const AUTH_REQUEST_SUCCESS = "AUTH_REQUEST_SUCCESS";
+export const AUTH_REQUEST_FAIL = "AUTH_REQUEST_FAIL";
+
+export const REGISTRATION_REQUEST = "REQISTRATION_REQUEST";
+export const REGISTRATION_REQUEST_SUCCESS = "REGISTRATION_REQUEST_SUCCESS";
+export const REGISTRATION_REQUEST_FAIL = "REGISTRATION_REQUEST_FAIL";

src/components/signIn.js

@@ -12,7 +12,9 @@ class SignIn extends Component {
                 type: 'email',
                 label: 'Email',
                 validation: {
-                    required: true
+                    requred: {
+                        cb: v => v.trim() === ""
+                    }
                 },
                 fail: false,
                 touch: false,
@@ -24,8 +26,12 @@ class SignIn extends Component {
                 type: 'password',
                 label: 'Password',
                 validation: {
-                    required: true,
-                    minL: 6
+                    requred: {
+                        cb: v => v.trim() === ""
+                    },
+                    minL: {
+                        cb: v => v.trim().length < 6
+                    }
                 },
                 fail: false,
                 touch: false,

src/containers/auth.js

@@ -2,8 +2,7 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-// import { auth } from '../actions/auth';
-// import { register } from '../actions/signUp'
+import { auth, register } from '../actions/auth';
 
 import SignUpForm from '../components/signUp';
 import SignInForm from '../components/signIn';
@@ -24,7 +23,7 @@ class Auth extends Component {
     return (
       <div className="auth">
         <div className="auth__content">
-          {/* { auth ? ( */}
+          { auth ? (
               <Loader flag={this.props.isFetching}>
                 <SignInForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
               </Loader>
@@ -39,7 +38,7 @@ class Auth extends Component {
           )}
 
           <div className="auth__additional-content">
-            {/* {auth ? ( */}
+            {auth ? (
               <p className="auth__text">
                 Do you have account ? {" "}
                 <span className="auth__toggle-span" onClick={this.toggleAuth}>
@@ -62,13 +61,13 @@ class Auth extends Component {
 }
 
 const mapStateToProps = state => ({
-//   user: state.auth.user,
-//   isFetching: state.auth.isFetching,
-//   errorFromAuth: state.auth.error,
-//   successRegister: state.auth.successRegister
+  user: state.auth.user,
+  isFetching: state.auth.isFetching,
+  errorFromAuth: state.auth.error,
+  successRegister: state.auth.successRegister
 })
 
 export default connect(
   mapStateToProps,
-//   { auth,register }
+  { auth,register }
 )(Auth);

src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App'
+import App from './router'
 import * as serviceWorker from './serviceWorker';
 
 import {BrowserRouter} from "react-router-dom";
+import './styles/index.scss'
 import {store} from './store'
 import {Provider} from "react-redux";
 

src/reducers/auth.js

@@ -0,0 +1,43 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+const initialState = {
+    user: null,
+    isFetching: false,
+    token:null,
+    error:null,
+    successRegister: null
+}
+
+export default (state = initialState, action) => {
+    switch(action.type){
+        case types.AUTH_REQUEST: {
+            return {...state, isFetching: true};
+        }
+
+        case types.AUTH_REQUEST_SUCCESS: {
+            const { user, token } = action.payload;
+            return {...state, isFetching: false, user, token };
+        }
+
+        case types.AUTH_REQUEST_FAIL: {
+            return {...state, isFetching: false,error: action.payload.response.data.message };
+        }
+
+        case types.REGISTRATION_REQUEST: {
+            return { ...state, isFetching: true}
+        }
+
+        case types.REGISTRATION_REQUEST_SUCCESS: {
+            const { message } = action.payload;
+            return { ...state, isFetching: false, successRegister: message }
+        }
+
+        case types.REGISTRATION_REQUEST_FAIL: {
+            return { ...state, isFetching: false, error: action.payload.response.data.message}
+        }
+        
+        default:
+             return state
+    }
+
+}

src/reducers/index.js

@@ -0,0 +1,11 @@
+import {combineReducers} from "redux";
+
+import {appReducer} from "./reducers";
+import auth from './auth';
+
+
+
+export default combineReducers({
+    app:appReducer,
+    auth,
+})

src/store/app/reducers.js

@@ -1,31 +1,4 @@
-import {
-    GET_DOCTORS_REQUEST,
-    GET_DOCTORS_REQUEST_SUCCESS,
-    GET_DOCTORS_REQUEST_FAIL,
-
-    GET_SERVICES_REQUEST,
-    GET_SERVICES_REQUEST_SUCCESS,
-    GET_SERVICES_REQUEST_FAIL,
-
-    GET_ALL_REQUEST,
-    GET_ALL_REQUEST_SUCCESS,
-    GET_ALL_REQUEST_FAIL,
-
-    PUT_ORDERS_REQUEST,
-    PUT_ORDERS_REQUEST_SUCCESS,
-    PUT_ORDERS_REQUEST_FAIL,
-
-    CHANGE_APPOINTMENT_DATE,
-    CHANGE_APPOINTMENT_DOCTOR,
-    CHANGE_APPOINTMENT_TIME,
-    CHANGE_APPOINTMENT_SPEC,
-    CHANGE_APPOINTMENT_COMMENT,
-    CLEAR_APPOINTMENT
-
-} from './actions'
-
-
-
+import * as types from '../actionsTypes/actionsTypes'
 
 const defaultState = {
     currentUser:{
@@ -80,7 +53,7 @@ export const appReducer = (state = defaultState,action) => {
     switch (action.type) {
 // -----------------------------------------------------------------------------------------------------------------
 
-        case CHANGE_APPOINTMENT_DATE : {
+        case types.CHANGE_APPOINTMENT_DATE : {
             return {
                 ...state,
                 appointment:{
@@ -94,7 +67,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
-        case CHANGE_APPOINTMENT_DOCTOR : {
+        case types.CHANGE_APPOINTMENT_DOCTOR : {
             return {
                 ...state,
                 appointment:{
@@ -104,7 +77,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
-        case CHANGE_APPOINTMENT_TIME : {
+        case types.CHANGE_APPOINTMENT_TIME : {
             return {
                 ...state,
                 appointment:{
@@ -114,7 +87,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
-        case CHANGE_APPOINTMENT_SPEC : {
+        case types.CHANGE_APPOINTMENT_SPEC : {
             return {
                 ...state,
                 appointment:{
@@ -126,7 +99,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
-        case CHANGE_APPOINTMENT_COMMENT : {
+        case types.CHANGE_APPOINTMENT_COMMENT : {
             return {
                 ...state,
                 appointment:{
@@ -136,7 +109,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
-        case CLEAR_APPOINTMENT : {
+        case types.CLEAR_APPOINTMENT : {
             return {
                 ...state,
                 appointment: defaultState.appointment
@@ -146,14 +119,14 @@ export const appReducer = (state = defaultState,action) => {
 // -----------------------------------------------------------------------------------------------------------------
 
 
-        case PUT_ORDERS_REQUEST : {
+        case types.PUT_ORDERS_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case PUT_ORDERS_REQUEST_SUCCESS : {
+        case types.PUT_ORDERS_REQUEST_SUCCESS : {
             return {
                 ...state,
                 appointment: defaultState.appointment,
@@ -162,7 +135,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case PUT_ORDERS_REQUEST_FAIL : {
+        case types.PUT_ORDERS_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,
@@ -173,14 +146,14 @@ export const appReducer = (state = defaultState,action) => {
 // -----------------------------------------------------------------------------------------------------------------
 
 
-        case GET_ALL_REQUEST : {
+        case types.GET_ALL_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case GET_ALL_REQUEST_SUCCESS : {
+        case types.GET_ALL_REQUEST_SUCCESS : {
             return {
                 ...state,
                 doctors: action.payload.doctors,
@@ -192,7 +165,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case GET_ALL_REQUEST_FAIL : {
+        case types.GET_ALL_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,
@@ -202,14 +175,14 @@ export const appReducer = (state = defaultState,action) => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-        case GET_DOCTORS_REQUEST : {
+        case types.GET_DOCTORS_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case GET_DOCTORS_REQUEST_SUCCESS : {
+        case types.GET_DOCTORS_REQUEST_SUCCESS : {
             return {
                 ...state,
                 doctors:action.payload,
@@ -217,7 +190,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case GET_DOCTORS_REQUEST_FAIL : {
+        case types.GET_DOCTORS_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,
@@ -227,14 +200,14 @@ export const appReducer = (state = defaultState,action) => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-        case GET_SERVICES_REQUEST : {
+        case types.GET_SERVICES_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case GET_SERVICES_REQUEST_SUCCESS : {
+        case types.GET_SERVICES_REQUEST_SUCCESS : {
             return {
                 ...state,
                 services:action.payload,
@@ -242,7 +215,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case GET_SERVICES_REQUEST_FAIL : {
+        case types.GET_SERVICES_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,

src/App.js

@@ -14,7 +14,7 @@ import {
     clearAppointment,
     putOrders,
 
-} from "./store/app/actions";
+} from "./actions/actions";
 
 import Header from "./components/Header";
 import Footer from "./components/Footer";
@@ -36,7 +36,7 @@ export class App extends React.Component {
     render() {
         console.log(this.props.app)
         return (
-            <div className="App">
+            <div className="container">
                 <Header/>
                     <Switch>
                         <Route exact path="/" render={() => <div>Main</div>} />

src/store.js

@@ -1,6 +1,6 @@
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 
-import rootReducer from './store/reducers'
+import rootReducer from './reducers/index'
 
 export const store = createStore(rootReducer, applyMiddleware(thunk));

src/store/reducers.js

@@ -1,9 +0,0 @@
-import {combineReducers} from "redux";
-
-import {appReducer} from "./app/reducers";
-
-
-
-export default combineReducers({
-    app:appReducer
-})

src/styles/components/header.scss

@@ -0,0 +1,47 @@
+.header {
+    width: 100%;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+  
+    &__left-wrapper {
+      display: flex;
+    }
+  
+    &__logo-box {
+      margin-right: 40px;
+    }
+  
+    &__nav {
+      margin: 0;
+    }
+  
+    &__list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+  
+      display: flex;
+    }
+  
+    &__item {
+      padding: 0;
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+  
+  .search-bar{
+    margin: 20px;
+    text-align: center;
+  }
+  
+  .search-bar input{
+    width: 75%;
+  }
+  
+  .some-wrapper {
+    display: flex;
+    justify-content: flex-end
+  }

src/styles/components/input.scss

@@ -0,0 +1,28 @@
+.input-box {
+	display: flex;
+	flex-direction: column;
+
+	&__input {
+		font-family: inherit;
+		color: inherit;
+		font-size: 1.5rem;
+		padding: 0.5rem 1rem;
+		border-radius: 2px;
+		background-color: rgba(255, 255, 255, 0.5);
+		border: none;
+		border-bottom: 3px solid #eee;
+		width: 100%;
+		display: block;
+		transition: all 0.3s;
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
+			border-bottom: 3px solid green;
+		}
+
+		&--fail {
+			border-bottom: 3px solid #9e4560;
+		}
+	}
+}

src/styles/index.scss

@@ -0,0 +1,8 @@
+@import './components/header.scss';
+@import './components/input.scss';
+@import './pages/auth.scss';
+
+.container {
+	width: 100vw;
+	height: 100vh;
+}

src/styles/pages/auth.scss

@@ -0,0 +1,87 @@
+.auth {
+	width: 100%;
+	height: 100%;
+
+	position: relative;
+
+	&__content {
+		width: 30rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		padding: 2rem;
+		border: 1px solid #eee;
+	}
+
+	&__text {
+		font-size: 1.6rem;
+	}
+
+	&__toggle-span {
+		font-size: 1.6rem;
+		font-weight: bold;
+		color: rgb(102, 104, 223);
+		cursor: pointer;
+	}
+
+	&__auth-box {
+		margin-bottom: 2rem;
+	}
+
+	&__control-box {
+		margin-top: 2rem;
+	}
+
+	&__error-auth-text {
+		margin-top: 1rem;
+		text-align: center;
+		width: 100%;
+		color: #8f240a;
+		font-size: 2rem;
+	}
+
+	&__success-auth-text {
+		margin-top: 1rem;
+		text-align: center;
+		width: 100%;
+		color: #1eb437;
+		font-size: 2rem;
+	}
+
+	&__submit-btn {
+		width: 100%;
+		border: 1px solid #eee;
+		border-radius: 3px;
+
+		color: #fff;
+		background-color: #5f6df0;
+		border: none;
+		cursor: pointer;
+		font-weight: 600;
+		font-size: 1.2rem;
+		transition: 0.2s;
+		padding: 0.5rem 1rem;
+
+		&:focus {
+			outline: none;
+		}
+		&:hover {
+			color: #5f6df0;
+			background-color: #fff;
+			outline: none;
+			transform: translateY(-1px);
+			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
+			&:after {
+				transform: scaleX(1.4) scaleY(1.6);
+				opacity: 0;
+			}
+		}
+
+		&:disabled {
+			color: #fff;
+			background-color: #eee;
+		}	
+	}
+}