Merge pull request #2 from fredhii/davidgonzalezfx

Improve signin and signup screens
fredhii · Jul 30, 2020 · b5ca6f4 · b5ca6f4
2 parents 2fc9676 + efe7410
commit b5ca6f4
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 42 deletions.
diff --git a/ntagram/src/App.css b/ntagram/src/App.css
@@ -1,5 +1,5 @@
 /* FONT STYLE */
-@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap");
 
 /* ===================================== */
 /* GENERAL */
@@ -32,25 +32,9 @@ a {
 /* CUSTOM */
 /* ===================================== */
 /* NAVBAR LOGO */
-.brand-logo, h2 {
-  font-family: 'Grand Hotel', cursive;
-}
-
-/* Signup & Signin */
-.mycard {
-  margin-top: 30px;
-}
-
-.auth-card {
-  padding: 20px;
-  text-align: center;
-  max-width: 400px;
-  margin: 10px auto;
-}
-
-.input-field input[type=text]:focus, input[type=password]:focus {
-  border-radius: 1px solid rgb(8, 93, 252) !important;
-  box-shadow: 0 1px 0 0 rgb(8, 93, 252) !important;
+.brand-logo,
+h2 {
+  font-family: "Grand Hotel", cursive;
 }
 
 /* Profile */

diff --git a/ntagram/src/components/screens/Signin.js b/ntagram/src/components/screens/Signin.js
@@ -2,6 +2,8 @@ import React, { useContext } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import { UserContext } from '../../App'
 import M from 'materialize-css'
+import "./styles/Signin.css"
+import "./styles/commons.css"
 
 /**
  * Name: Signin
@@ -51,16 +53,32 @@ const Signin = () => {
     /* HTML */
     /* =================================================================== */
     return (
-        <div className='mycard'>
-            <div className="card auth-card input-field">
-                <h2>Nulltagram</h2>
-                <input type='text' placeholder='email' value={ email } onChange={ (e) => setEmail(e.target.value) } />
-                <input type='password' placeholder='password' value={ password } onChange={ (e) => setPassword(e.target.value) } />
-                <button className="btn waves-effect waves-light #64b5f6 blue darken-1" onClick= { () => PostData() } >
-                    Signin
-                </button>
-                <br />
-                <p> Don't have an account? <Link to='./signup'> Sign up </Link></p>
+        <div className="container container__signin">
+            <div className="container__img">
+                <img width="250" alt="hero" src="https://raw.githubusercontent.com/davidgonzalezfx/Platzigram/master/assets/iphone.png" />
+            </div>
+
+
+            <div className='mycard'>
+                <div className="card auth-card input-field">
+                    <h2>Nulltagram</h2>
+                    <input type='text' placeholder='email' value={ email } onChange={ (e) => setEmail(e.target.value) } />
+                    <input type='password' placeholder='password' value={ password } onChange={ (e) => setPassword(e.target.value) } />
+                    <button className="btn waves-effect waves-light #64b5f6 blue darken-1" onClick= { () => PostData() } >
+                        Signin
+                    </button>
+                    <br />
+                </div>
+                <div className="card auth-card input-field">
+                    <p> Don't have an account? <Link to='./signup'> <span>Sign up </span> </Link></p>
+                </div>
+                <div className="container__appfield">
+                    <p> Get the app</p>
+                    <div>
+                        <img width="150" alt="" src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png" />
+                        <img width="150" alt="" src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png" />
+                    </div>
+                </div>
             </div>
         </div>
     )

diff --git a/ntagram/src/components/screens/Signup.js b/ntagram/src/components/screens/Signup.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import M from 'materialize-css'
-
+import "./styles/Signup.css"
+import "./styles/commons.css"
 /**
  * Name: Signup
  * Description: Creates an account
@@ -48,17 +49,29 @@ const Signup = () => {
     /* HTML */
     /* =================================================================== */
     return (
-        <div className='mycard'>
-            <div className="card auth-card input-field">
-                <h2>Nulltagram</h2>
-                <input type='text' placeholder='name' value={ name } onChange={ (e) => setName(e.target.value) } />
-                <input type='text' placeholder='email' value={ email } onChange={ (e) => setEmail(e.target.value) } />
-                <input type='password' placeholder='password' value={ password } onChange={ (e) => setPassword(e.target.value) } />
-                <button className="btn waves-effect waves-light #64b5f6 blue darken-1" onClick={ () => PostData() } >
-                    Sign up
-                </button>
-                <br />
-                <p> Already have an account? <Link to='./signin'> Login </Link></p>
+        <div className="container">
+            <div className='mycard'>
+                <div className="card auth-card input-field">
+                    <h2>Nulltagram</h2>
+                    <p>Signup to see photos and videos from your friends!</p>
+                    <input type='text' placeholder='name' value={ name } onChange={ (e) => setName(e.target.value) } />
+                    <input type='text' placeholder='email' value={ email } onChange={ (e) => setEmail(e.target.value) } />
+                    <input type='password' placeholder='password' value={ password } onChange={ (e) => setPassword(e.target.value) } />
+                    <button className="btn waves-effect waves-light #64b5f6 blue darken-1" onClick={ () => PostData() } >
+                        Sign up
+                    </button>
+                    <br />
+                </div>
+                <div className="card auth-card input-field">
+                    <p> Already have an account? <Link to='./signin'> <span> Login </span></Link></p>
+                </div>
+                <div className="container__appfield">
+                    <p> Get the app</p>
+                    <div>
+                        <img width="150" alt="" src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png" />
+                        <img width="150" alt="" src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png" />
+                    </div>
+                </div>
             </div>
         </div>
     )

diff --git a/ntagram/src/components/screens/styles/Signin.css b/ntagram/src/components/screens/styles/Signin.css
@@ -0,0 +1,16 @@
+div.container__signin {
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.container__img {
+  margin-right: 30px;
+}
+
+@media only screen and (max-width: 600px) {
+  div.container__img {
+    display: none;
+  }
+}
diff --git a/ntagram/src/components/screens/styles/Signup.css b/ntagram/src/components/screens/styles/Signup.css
@@ -0,0 +1,4 @@
+div.container__appfield {
+  max-width: 400px;
+  margin: 0 auto;
+}
diff --git a/ntagram/src/components/screens/styles/commons.css b/ntagram/src/components/screens/styles/commons.css
@@ -0,0 +1,35 @@
+/* Signup & Signin */
+.mycard {
+  margin-top: 30px;
+}
+
+.auth-card {
+  padding: 20px;
+  text-align: center;
+  max-width: 400px;
+  margin: 10px auto;
+}
+
+.input-field input[type="text"]:focus,
+input[type="password"]:focus {
+  border-radius: 1px solid rgb(8, 93, 252) !important;
+  box-shadow: 0 1px 0 0 rgb(8, 93, 252) !important;
+}
+
+div.mycard div button {
+  margin-top: 15px;
+}
+
+div.mycard div p span {
+  color: #1e88e5;
+  font-weight: 600;
+}
+
+div.container__appfield p {
+  text-align: center;
+}
+
+div.container__appfield div {
+  display: flex;
+  justify-content: space-evenly;
+}