add style auth

src/App.js

@@ -56,8 +56,8 @@ export class App extends React.Component {
     render() {
         console.log(this.props.app.servicesArray)
         return (
-            <div className="container">
-                <Header/>
+            <>
+                    <Header/>
                     <Switch>
                         <Route exact path="/" component={Main} />
                         <Route exact path="/doctors" render={() => <Doctors data={this.props.app.doctors} /> } />
@@ -74,7 +74,7 @@ export class App extends React.Component {
                         <Route exact path="/auth" component={Auth} />
                     </Switch>
                 <Footer/>
-            </div>
+             </>
         );
     }
 }

src/components/loader.js

@@ -1,8 +1,9 @@
 import React from "react";
 
 export default ({ children, flag }) => (
-    flag ? <div>
-        <img className = "loader" src="../images/loader.gif" alt="Loading"/>
-        <p>  Loading... </p>
-  
-    </div> : children);
+    flag ?
+        <div className = "loader-box">
+            <img className = "loader" src="../images/loader.gif" alt="Loading"/>
+            <p>  Loading... </p>
+        </div>
+    : children);

src/components/main/Main.js

@@ -7,8 +7,8 @@ import {postDoctors, postServices} from "../../actions/actions";
 import Button from "../buttons/button";
 import About from "./aboutUs";
 import Team from "./team";
-import MyMap from "./myMap";
-import Reviews from "./reviews";
+// import MyMap from "./myMap";
+// import Reviews from "./reviews";
 
 import {connect} from 'react-redux'
 
@@ -42,7 +42,7 @@ export class Main extends React.Component {
                     <Team doctorsArr = {this.props.app.doctors}/>
                  </div>
                 <div className="case">
-                  <MyMap />
+                  {/* <MyMap /> */}
                 </div>
                 <div className="wrapper">
                     {/* <Reviews services = {this.props.app.doctors} postDoctors = {this.props.postDoctors}/> */}

src/containers/auth.js

@@ -21,41 +21,44 @@ class Auth extends Component {
     }
 
     return (
-      <div className="auth">
-        <div className="auth__content">
-          { auth ? (
-              <Loader flag={this.props.isFetching}>
-                <SignInForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
-              </Loader>
-          ) : (
-              <Loader flag={this.props.isFetching}>
-                <SignUpForm 
-                  error={this.props.errorFromAuth}
-                  submitHandler={this.props.register}
-                  successRegister={this.props.successRegister}
-                />
-              </Loader>
-          )}
-
-          <div className="auth__additional-content">
-            {auth ? (
-              <p className="auth__text">
-                Do you have account ? {" "}
-                <span className="auth__toggle-span" onClick={this.toggleAuth}>
-									Sing Up
-								</span>
-              </p>
+      <div className="main">
+        <div className="auth">
+          <div className="auth__content">
+            { auth ? (
+                <Loader flag={this.props.isFetching}>
+                  <SignInForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
+                </Loader>
             ) : (
-              <p className="auth__text">
-								I have account{" "}
-								<span className="auth__toggle-span" onClick={this.toggleAuth}>
-									Sign In
-								</span>
-							</p>
+                <Loader flag={this.props.isFetching}>
+                  <SignUpForm 
+                    error={this.props.errorFromAuth}
+                    submitHandler={this.props.register}
+                    successRegister={this.props.successRegister}
+                  />
+                </Loader>
             )}
+
+            <div className="auth__additional-content">
+              {auth ? (
+                <p className="auth__text">
+                  Do you have account ? {" "}
+                  <span className="auth__toggle-span" onClick={this.toggleAuth}>
+                    Sing Up
+                  </span>
+                </p>
+              ) : (
+                <p className="auth__text">
+                  I have account{" "}
+                  <span className="auth__toggle-span" onClick={this.toggleAuth}>
+                    Sign In
+                  </span>
+                </p>
+              )}
+            </div>
           </div>
-        </div>
+        </div>        
       </div>
+
     );
   }
 }

src/style/all.scss

@@ -22,7 +22,7 @@ body {
 
 .container {
 	background-image: url(../assets/images/fon1.jpg);
-	background-size: cover;
+	// background-size: cover;
 	min-height: 100vh;
 }
 .wrapper {
@@ -281,7 +281,7 @@ h2 {
 
 .footer {
 	position: static;
-	margin-top: 100%;
+	// top: 80%;
 	background-image: url(../assets/images/bg2.jpg);
 	// background-size: 100vh;
 	background-repeat: no-repeat;
@@ -305,7 +305,20 @@ h2 {
 
 
 
+// loadrer
+.loader-box {
+	border: none;
+	min-width: 100vw;
+	min-height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	// background-color: $opacity-color;
+	.loader {
+			margin: 0 auto;
+	}
 
+}
 
 
 

src/style/auth.scss

@@ -17,19 +17,22 @@ $opacity-color: rgba(17,17,17,0.8);
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-
+		background-color: $opacity-color;
 		padding: 2rem;
 		border: 1px solid #eee;
+		margin-top: 40px;
 	}
 
 	&__text {
 		font-size: 1.6rem;
+		color:	$hover-color;
 	}
 
 	&__toggle-span {
 		font-size: 1.6rem;
 		font-weight: bold;
 		color: rgb(102, 104, 223);
+		margin-left: 20px;
 		cursor: pointer;
 	}
 
@@ -45,7 +48,7 @@ $opacity-color: rgba(17,17,17,0.8);
 		margin-top: 1rem;
 		text-align: center;
 		width: 100%;
-		color: #8f240a;
+		color: #d7394c;
 		font-size: 2rem;
 	}
 
@@ -53,7 +56,7 @@ $opacity-color: rgba(17,17,17,0.8);
 		margin-top: 1rem;
 		text-align: center;
 		width: 100%;
-		color: #1eb437;
+		color: $hover-color;
 		font-size: 2rem;
 	}
 
@@ -61,9 +64,8 @@ $opacity-color: rgba(17,17,17,0.8);
 		width: 100%;
 		border: 1px solid #eee;
 		border-radius: 3px;
-
-		color: #fff;
-		background-color: #5f6df0;
+		color: $opacity-color;
+		background-color: $hover-color;
 		border: none;
 		cursor: pointer;
 		font-weight: 600;
@@ -75,8 +77,8 @@ $opacity-color: rgba(17,17,17,0.8);
 			outline: none;
 		}
 		&:hover {
-			color: #5f6df0;
-			background-color: #fff;
+			color:  $opacity-color;
+			background-color: $main-color;
 			outline: none;
 			transform: translateY(-1px);
 			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
@@ -87,7 +89,7 @@ $opacity-color: rgba(17,17,17,0.8);
 		}
 
 		&:disabled {
-			color: #fff;
+			color: $main-title-color;
 			background-color: #eee;
 		}	
 	}
@@ -97,10 +99,12 @@ $opacity-color: rgba(17,17,17,0.8);
 .input-box {
 	display: flex;
 	flex-direction: column;
-
+	color: $header-color;
+	font-weight: 700;
+	margin-top: 10px;
 	&__input {
 		font-family: inherit;
-		color: inherit;
+		
 		font-size: 1.5rem;
 		padding: 0.5rem 1rem;
 		border-radius: 2px;
@@ -121,4 +125,7 @@ $opacity-color: rgba(17,17,17,0.8);
 			border-bottom: 3px solid #9e4560;
 		}
 	}
-}
+}
+
+
+