Merge pull request #3 from guacamole/faster-loading

added akash and skynet logos, reduced the background image

src/components/beta.js

@@ -8,15 +8,11 @@ import {TxtField} from "./inputfield"
 
 function Beta({type, isError, errMsg, onClick, onChange}) {
     return (
-        <div className="beta">
-            <form className="formStyle">
-                <TxtField isError={isError} type={type} errMsg={errMsg} onChange={onChange} label="Email" variant="outlined" />
-                <div className="bottom"> &nbsp;
-                    <SolidButton2 disabled={isError} onClick={onClick} label= "Submit"/>
-                </div>
-            </form>
-        </div>
-
+        <form className="formStyle">
+            <TxtField isError={isError} type={type} errMsg={errMsg} onChange={onChange} label="Email" variant="outlined" />
+            <div style={{ width: '5%'}}/>
+            <SolidButton2 disabled={isError} onClick={onClick} label= "Submit"/>
+        </form>
     );
 }
 

src/components/inputfield.js

@@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({
         '& > *': {
             margin: theme.spacing(1),
         },
+        width: '100%'
     },
     label: {
         fontSize: 20,
@@ -32,14 +33,15 @@ const BootstrapInput = withStyles((theme) => ({
         'label + &': {
             marginTop: theme.spacing(4),
         },
+        width: '100%'
     },
     input: {
         borderRadius: 8,
         position: 'relative',
         backgroundColor: "#ced4da",
         border: '2px solid #ced4da',
         fontSize: 16,
-        //width: 'auto',
+        width: '100%',
         height: "28px",
         padding: '10px 12px',
         transition: theme.transitions.create(['border-color', 'box-shadow']),
@@ -57,9 +59,7 @@ export const TxtField = ({type, isError, errMsg, label, onChange}) => {
 
     const classes = useStyles();
     return <FormControl className={classes.root}>
-        <InputLabel className={classes.label} classes={{
-            focused: classes.focused
-        }} shrink htmlFor="bootstrap-input">
+        <InputLabel className={classes.label} classes={{focused: classes.focused}} shrink htmlFor="bootstrap-input">
             {label}
         </InputLabel>
         <BootstrapInput type={type} onChange={(event) => onChange(event)} id="bootstrap-input" />

src/pages/landing_page.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import ReactDOM from 'react-dom';
 import '../styles/landingpage.css'
 import parachute from "../styles/pictures/parachute.png"
+import akashLogo from "../styles/pictures/akash.svg"
+import skynetLogo from "../styles/pictures/skynetlogo.png"
 import {OutlinedButton, SolidButton} from "../components/buttons";
 import SignUp from "../components/signup";
 import SignIn from "../components/signin";
@@ -84,10 +86,15 @@ function LandingPage() {
                     which means now you can use all the features of existing container registries on OpenRegistry.
                     We are hosted on Akash and powered by SkyNet.
                     You see, Sky is the limit. Like literally!</p>
-                <OutlinedButton onClick={() => handleBeta()} label="Register for Beta"/>
-                {
-                    showBeta ? <Beta isError={isError} type={"email"} errMsg={resp} onChange={handleEmail} onClick={() => handleSubmit()}/> :null
-                }
+                    <OutlinedButton onClick={() => handleBeta()} label="Register for Beta"/>
+                    {
+                        showBeta ? <Beta isError={isError} type={"email"} errMsg={resp} onChange={handleEmail} onClick={() => handleSubmit()}/> :null
+                    }
+
+                <div style={{display:"flex",justifyContent:"center",width:"100%",alignItems:"center"}}>
+                    <img style={{"width":200}} src={akashLogo} alt={""}/>
+                    <img style={{"width":200}} src={skynetLogo} alt={""}/>
+                </div>
             </div>
             {
                 showSignUp ?

src/styles/landingpage.css

@@ -158,10 +158,12 @@
     background: linear-gradient(#617794,#A4C7D2);
 }
 .beta {
-
-    width: 30%;
+    width: 100%;
     padding: 20px;
-
+    /*flex-direction: row;*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .winHead {
@@ -252,9 +254,14 @@ span {
 
 .formStyle {
     display: flex;
-    flex-direction: column;
-    padding: 3%;
-    justify-content: space-between;
+    flex-direction: row;
+    justify-content: center;
+    /*align-items: center;*/
+    border-spacing: 10px;
+    width: 60%;
+    max-width: 42%;
+    /*padding: 0 10px;*/
+    /*justify-content: space-between;*/
 }
 .textField {
     border: hotpink solid 5px;