changes

package.json

@@ -8,8 +8,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
     "firebase": "^8.8.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-beta.4",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

src/App.css

@@ -1,13 +1,3 @@
-.loading{
 
-}
-* {
-    margin: 0;
-    padding:  0;
-}
 
 
-/* body {
-    height: 100vh;
-    width: 100vw;
-} */

src/App.js

@@ -1,12 +1,14 @@
 import React, {useState} from 'react'
 import './App.css';
 import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
-import Loading from './components/loading';
+// import Loading from './components/Loading';
 import  SignIn from './components/loginComponent/logInPage';
 import SignUp from './components/loginComponent/SignUp';
+
+import styledPage from './components/loginComponent/login_page2';
 import PokemonsContainer from './components/pokemon/PokemonsContainer';
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector} from 'react-redux';
 import { getPokemon } from './actions/pokemon';
 import Home from './components/Home/Home.js'
 import BattleSelectContainer from './components/battle/BattleSelectContainer';
@@ -15,6 +17,8 @@ import {fetchOauth} from './actions/authentication.js'
 import { getMoves } from './actions/moves';
 
 
+
+
 function App() {
 
   const pokemon = useSelector(state => state.pokemonReducer.pokemon)
@@ -28,6 +32,7 @@ function App() {
 
 console.log(authenthicatedUser)
 
+
   useEffect(() => {
     dispatch(getMoves())
     dispatch(getPokemon())
@@ -43,10 +48,15 @@ console.log(authenthicatedUser)
 
 
   return (
+
+
+
+
     <Router>
       <Switch>
         <Route path='/Login' component={SignIn}/>
         <Route path="/SignUp" component={SignUp}/>
+        <Route path='/styled' component={styledPage}/>
           <Route path={authenthicatedUser ? '/Home' : '/'}>
           <NavBar />
           <Home />
@@ -62,8 +72,10 @@ console.log(authenthicatedUser)
       <Route exact path="/">
         {current_user !== '' ?  <Redirect to="/home" /> :  <Redirect to="/Login" />}
       </Route>
+
       </Switch>
     </Router>
+
   );
 }
 

src/Reducer/pokemonReducer.js

@@ -1,5 +1,6 @@
 const initialState = {
-    pokemon: []
+    pokemon: [],
+    loading: false
 }
 
 const pokemonReducer = (state = initialState, action) => {

src/components/loading.js

@@ -1,8 +1,15 @@
-function Loading(){
-    return (
-        <div className="loading">
-          <h1>Hello</h1>
+
+function Loading() {
+
+
+    return(
+        <div class="loading">
+            <div class="logo">
+                    <img src="https://wallpaperaccess.com/full/45634.png" alt='loading'/>
+            </div>
+
         </div>
+
     )
 }
 

src/components/loginComponent/SignUp.js

@@ -42,10 +42,13 @@ const useStyles = makeStyles((theme) => ({
   form: {
     width: '100%', // Fix IE 11 issue.
     marginTop: theme.spacing(1),
+    borderStyle: 'solid',
+    backgroundColor: "white"
   },
   submit: {
     margin: theme.spacing(3, 0, 2),
   },
+
 }));
 
 export default function SignUp() {
@@ -104,7 +107,7 @@ export default function SignUp() {
         <Typography component="h1" variant="h5">
           Sign Up
         </Typography>
-        <form onSubmit={handleSignIn} className={classes.form} noValidate>
+        <form class="form"onSubmit={handleSignIn} className={classes.form} noValidate>
           <TextField
             variant="outlined"
             margin="normal"

src/components/loginComponent/login_page.css

@@ -73,6 +73,11 @@ input.main {
     border-color: #65FDFE;
 }
 
+.login-page img{
+
+    margin-left: 3em;
+}
+
 
 /* Test */
 .test {

src/components/loginComponent/login_page2.css

@@ -0,0 +1,169 @@
+.style-container{
+    /* display: grid;
+    /* grid-template-columns: 30% 40% 30%; */
+    /* grid-template-rows: 5%; */ 
+    height: 100vh;
+
+    background-image: url('../.././img/battle-background.jpeg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.style{
+    width:100%; 
+    text-align:center;
+
+}
+
+
+
+  /* Log in  Css */
+
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background: linear-gradient(to right, #b92b27, #1565c0)
+}
+
+.card {
+    margin-bottom: 20px;
+    border: none
+}
+
+.box {
+    width: 400px;
+    padding: 40px;
+    position:relative;
+    /* top: 35%;
+    left: 25%; */
+    background: #191919;
+    ;
+    text-align: center;
+    transition: 0.25s;
+    margin-top: 5%;
+    margin-left: 50%;
+}
+
+.box input[type="text"],
+.box input[type="password"] {
+    border: 0;
+    background: none;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    border: 2px solid #3498db;
+    padding: 10px 10px;
+    width: 250px;
+    outline: none;
+    color: white;
+    border-radius: 24px;
+    transition: 0.25s
+}
+
+.box h1 {
+    color: white;
+    text-transform: uppercase;
+    font-weight: 500
+
+}
+
+.box input[type="text"]:focus,
+.box input[type="password"]:focus {
+    width: 300px;
+    border-color: #2ecc71
+}
+
+.box input[type="submit"] {
+    border: 0;
+    background: none;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    border: 2px solid #2ecc71;
+    padding: 14px 40px;
+    outline: none;
+    color: white;
+    border-radius: 24px;
+    transition: 0.25s;
+    cursor: pointer
+}
+
+.box input[type="submit"]:hover {
+    background: #2ecc71
+}
+
+.forgot {
+    text-decoration: underline;
+    color: grey
+}
+
+p {
+    color: grey
+}
+/* sociual net work circiles */
+
+ul.social-network {
+    list-style: none;
+    display: inline;
+    margin-left: 0 !important;
+    padding: 0
+}
+
+ul.social-network li {
+    display: inline;
+    margin: 0 5px
+}
+/* 
+.social-network a.icoFacebook:hover {
+    background-color: #3B5998
+}
+
+.social-network a.icoTwitter:hover {
+    background-color: #33ccff
+}
+
+.social-network a.icoGoogle:hover {
+    background-color: #BD3518
+} */
+
+/* .social-network a.icoFacebook:hover i,
+.social-network a.icoTwitter:hover i,
+.social-network a.icoGoogle:hover i {
+    color: #fff
+} */
+
+a.socialIcon:hover,
+.socialHoverClass {
+    color: #44BCDD
+}
+
+.social-circle li a {
+    display: inline-block;
+    position: relative;
+    margin: 0 auto 0 auto;
+    border-radius: 50%;
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    font-size: 20px
+}
+
+.social-circle li i {
+    margin: 0;
+    line-height: 50px;
+    text-align: center
+}
+
+.social-circle li a:hover i,
+.triggeredHover {
+    transform: rotate(360deg);
+    transition: all 0.2s
+}
+
+.social-circle i {
+    color: #fff;
+    transition: all 0.8s;
+    transition: all 0.8s
+}

src/components/loginComponent/login_page2.js

@@ -0,0 +1,49 @@
+import './login_page2.css'
+import SignUp from './SignUp'
+
+
+
+function styledPage() {
+    return (
+        <div class="style-container">
+                <div class="style">
+
+                    <div class="image-container">
+
+                        <a class="image"><img src="https://fontmeme.com/permalink/210812/e85e4e556d7249a8313595d02d9e5784.png" alt="pokemon-font" border="0"/></a>
+                    </div>
+
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="card">
+                                    <form onsubmit="event.preventDefault()" class="box">
+                                        <h1>Login</h1>
+                                        <p class="text-muted"> Please enter your login and password!</p> 
+                                        <input type="text" name="" placeholder="Username"/> 
+                                        <input type="password" name="" placeholder="Password"/>
+                                        <a class="forgot text-muted" href="#">Forgot password?</a> 
+                                        <input type="submit" name="" value="Login" href="#"/>
+                                            {/* <div class="col-md-12">
+                                                <ul class="social-network social-circle">
+                                                    <li><a href="#" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
+                                                    <li><a href="#" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
+                                                    <li><a href="#" class="icoGoogle" title="Google +"><i class="fab fa-google-plus"></i></a></li>
+                                                </ul>
+                                            </div> */}
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    <p> AnimeCity 2021</p>
+
+                </div>
+
+        </div>
+    )
+}
+
+export default styledPage
+