Merge pull request #232 from NikitaMasand/loginscreenfrontend

login screen front end issue
WrippleFoss · Apr 29, 2020 · e4feb84 · e4feb84
2 parents ea47b0e + 1858bbc
commit e4feb84
Show file tree

Hide file tree

Showing 15 changed files with 9,680 additions and 8,660 deletions.
diff --git a/src-view/assets/images/bottomright.png b/src-view/assets/images/bottomright.png
diff --git a/src-view/assets/images/topleft.png b/src-view/assets/images/topleft.png
diff --git a/src-view/assets/styles/LoginView.module.scss b/src-view/assets/styles/LoginView.module.scss
@@ -1,49 +1,81 @@
-@import './mixins';
-
-.loginDiv {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: column;
-    align-self: center;
-    flex-shrink: 1;
-    padding: 5rem 0rem;
-    width: 80%;
-    max-width: 36rem;
-
-    >a {
-        cursor: pointer;
-        align-self: center;
-        margin-top: 1rem;
-    }
-
-    >h1 {
-        align-self: center;
-        font-weight: 400;
-    }
-
-    @include for-desktop {
-        box-shadow: 0px 0px 30px -2px rgba(150, 144, 150, 0.85);
-        padding: 5rem 3rem;
-        width: 50%;
-
-    }
-
-    &Wrapper {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: center;
-    }
-
-    .loginForm {
-        display: flex;
-        flex-direction: column;
-        margin: 2rem 0 0 0;
-
-        >button {
-            width: 100%;
-            margin: 2rem 0 0 0;
-        }
-    }
-}
+@import './mixins';
+
+.loginpage {
+
+    .bottomright {
+        >img {
+            display: flex;
+            float: right;
+            width: 20rem;
+            height: 20rem;
+        }
+    }
+    .topleft {
+        >img {
+            display: flex;
+            float: left;
+            width: 20rem;
+            height: 20rem;
+        }
+    }
+    .loginDiv {
+        display: flex;
+        flex-direction: column;
+        padding-left: 15rem;
+        flex-shrink: 1;
+        width: 60%;
+
+
+        >h1 {
+            color: #555555;
+            font-size: 3.5rem;
+            align-self: center;
+            font-weight: 400;
+        }
+
+        @include for-desktop {
+            padding: 5rem 0rem;
+            width: 50%;
+        }
+
+        &Wrapper {
+            display: flex;
+            flex-direction: column;
+            padding-left: 15rem;
+            width: 78%;
+            height: 60%;
+        }
+
+        .forgotcontent {
+            color: #555555;
+            padding-left: 30%;
+            padding-top: 2%;
+            font-size: 1rem;
+            font-family: sans-serif;
+            font-style: normal;
+            font-weight: normal;
+                >a {
+                    color: #C25FFF;
+                    cursor: pointer;
+                    align-self: center;
+                    margin-top: 1rem;
+                    text-decoration-line: underline;
+                }
+        }
+        .loginForm {
+            display: flex;
+            flex-direction: column;
+            margin: 2rem 0 0 0;
+
+            >button {
+                width: 100%;
+                margin: 2rem 0 0 0;
+                background: #C25FFF;
+                border-radius: 1rem;
+                color: #FFFFFF;
+
+            }
+        }
+    }
+
+}
diff --git a/src-view/assets/styles/components/NavbarLogin.module.scss b/src-view/assets/styles/components/NavbarLogin.module.scss
@@ -0,0 +1,23 @@
+.navbar {
+    display: flex;
+    margin: 3rem;
+
+    .navRight {
+        font-family: sans-serif;
+        font-style: normal;
+        font-weight: 600;
+        flex-grow: 1;
+        font-size: 1.75rem;
+      .about {
+        float: right;
+        color: #555555;
+        padding: 1rem;
+      }
+      .signup {
+        float: right;
+        color: #C25FFF;
+        padding: 1rem;
+      }
+    }
+  }
+
diff --git a/src-view/components/NavbarLogin.js b/src-view/components/NavbarLogin.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Link } from '@reach/router'
+import Masterlogo from '../assets/logo/master-logo.png'
+import styles from '../assets/styles/components/NavbarLogin.module.scss'
+
+const Navbar = () => {
+  return (
+    <div className={styles.navbar}>
+        <Link to='/'>
+            <img src={Masterlogo} />
+        </Link>
+        <div className={styles.navRight}>
+            <div className={styles.signup}>
+            Signup
+            </div>
+            <div className={styles.about}>
+            About
+            </div>
+        </div>
+  </div>
+  )
+}
+export default Navbar
diff --git a/src-view/dist/bottomright.f97cc6c8.png b/src-view/dist/bottomright.f97cc6c8.png
diff --git a/src-view/dist/index.html b/src-view/dist/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>MentorFix</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/src-view.e31bb0bc.css"></head>
-  <body>
-    <div id="root"></div>
-  </body>
-  <script src="/src-view.e31bb0bc.js"></script>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>MentorFix</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/src-view.e31bb0bc.css"></head>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script src="/src-view.e31bb0bc.js"></script>
 </html>