made login screen

OmSingh5092 · Oct 5, 2020 · 6aba9a4 · 6aba9a4
1 parent b75e6c9
commit 6aba9a4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 13 deletions.
diff --git a/Frontend/src/app/Main.js b/Frontend/src/app/Main.js
@@ -8,7 +8,7 @@ function LoadingScreen(props){
 
     return(
         <div>
-
+            Loading...
         </div>
     )
 }
@@ -17,22 +17,25 @@ function LoadingScreen(props){
 
 function Main(props){
 
-    const [scriptLoading, setScriptLoading] = React.useState(false);
+    const [scriptLoading, setScriptLoading] = React.useState(true);
 
     useEffect(()=>{
         const googleSigninScript = document.createElement('script');
         googleSigninScript.src = "https://apis.google.com/js/platform.js";
-        googleSigninScript.onload = ()=>{};
+        googleSigninScript.onload = ()=>{setScriptLoading(false)};
+        document.body.append(googleSigninScript);
     },[1])
 
 
     return (
         <div>
-
+            {scriptLoading?<LoadingScreen/>:
             <HashRouter>
                 <Route exact path= "/" component={(LoginScreen)}/>
-
-            </HashRouter>
+
+            </HashRouter>}
+
+
         </div>
     )
 }

diff --git a/Frontend/src/app/components/screens/LoginScreen.js b/Frontend/src/app/components/screens/LoginScreen.js
@@ -1,16 +1,45 @@
 import React from 'react'
 
 import {Button} from '@material-ui/core'
+import './style.css';
 
 function LoginScreen(props){
 
-    return(<div>
-        <Button>
-            Sign in as interviewer
-        </Button>
-        <Button>
-            Join interview room
-        </Button>
+    return(<div className="body">
+
+        <div style={{
+            fontSize:50,
+            fontFamily:"Roboto-Black",
+            textAlign:"center"
+        }}>
+            Welcome! to CodeView
+        </div><br/>
+
+        <div style={{
+            textAlign:"center"
+        }}>
+            Best online solution for taking coding interviews.
+        </div>
+
+        <div style={{
+            flexGrow:1,
+            flexDirection:"row",
+            alignContent:"center",
+            margin:"auto",
+            marginTop:40
+        }}>
+            <Button color="primary" variant="contained" style={{
+                margin:20
+            }}>
+                Sign in as interviewer
+            </Button>
+            <Button color="secondary" variant="contained" style={{
+                margin:20
+            }}>
+                Join interview room
+            </Button>
+        </div>
+
     </div>)
 }
 

diff --git a/Frontend/src/app/components/screens/style.css b/Frontend/src/app/components/screens/style.css
@@ -0,0 +1,6 @@
+.body{
+    font-family: "Roboto-Medium";
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+}