Merge pull request #10 from containerish/dashboard

New designs with AntD

src/components/beta.js

@@ -1,18 +1,19 @@
 import React, { useState } from "react";
-import ReactDOM from 'react-dom';
 import '../styles/landingpage.css'
 import parachute from "../styles/pictures/parachute.png"
 import {OutlinedButton, SolidButton, SolidButton2} from "./buttons";
 import {TxtField} from "./inputfield"
+import { CustomButton } from '../pages/landingPage'
+import {Form, Input} from "antd";
 
 
 function Beta({type, isError, errMsg, onClick, onChange}) {
     return (
-        <form className="formStyle">
-            <TxtField isError={isError} type={type} errMsg={errMsg} onChange={onChange} label="Email" variant="outlined" />
+        <Form className="formStyle">
+            <Input isError={isError} type={type} errMsg={errMsg} onChange={onChange} label="Email" variant="outlined" />
             <div style={{ width: '5%'}}/>
-            <SolidButton2 disabled={isError} onClick={onClick} label= "Submit"/>
-        </form>
+            <CustomButton disabled={isError} onClick={() => onClick()} label="Submit"/>
+        </Form>
     );
 }
 

src/components/buttons.js

@@ -1,95 +1,96 @@
 import React from 'react';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import {Tooltip} from "@material-ui/core";
+import { Tooltip } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-        '& > *': {
-            margin: theme.spacing(1),
-        },
-    },
-    outlineButtonStyle: {
-        color: "#fff",
-        border: "#cbd8e7 solid 2px",
-        borderRadius: "15px",
-        width: "250px",
-        fontWeight: "bolder",
-        textTransform: "none",
-        "&:hover": {
-            backgroundColor: "#cbd8e7",
-            color: "black",
-        }
-    },
-    solidButtonStyle: {
-        width: 190,
-        backgroundColor: "#cbd8e7",
-        // border: "1px solid #152036FF",
-        margin: "35px 10px 10px",
-        height: 40,
-        fontSize: 12,
-        fontWeight: "bold",
-        borderRadius: 15,
-        padding: "0 30px 0 30px",
-        boxSizing: "border-box",
-        color: "#000000",
-        cursor: "pointer",
-        textTransform: "none",
-        "&:hover": {
-            backgroundColor: "#fff"
-        }
-    },
-    solidButton2Style: {
-        width: 190,
-        backgroundColor: "#152036FF",
-        // border: "1px solid #152036FF",
-        margin: "35px 10px 10px",
-        height: 40,
-        fontSize: 12,
-        fontWeight: "bold",
-        borderRadius: 15,
-        padding: "0 30px 0 30px",
-        boxSizing: "border-box",
-        color: "#aeb7c6",
-        cursor: "pointer",
-        textTransform: "none",
-        "&:hover": {
-            backgroundColor: "#aeb7c6",
-            color: "black",
-        }
-    },
+	root: {
+		'& > *': {
+			margin: theme.spacing(1),
+		},
+	},
+	outlineButtonStyle: {
+		color: "black",
+		border: "#cbd8e7 solid 2px",
+		backgroundColor: "#cbd8e7",
+		borderRadius: "15px",
+		width: "250px",
+		fontWeight: "bolder",
+		textTransform: "none",
+		"&:hover": {
+			backgroundColor: "#cbd8e7",
+			color: "black",
+		}
+	},
+	solidButtonStyle: {
+		width: 190,
+		backgroundColor: "#cbd8e7",
+		// border: "1px solid #152036FF",
+		margin: "35px 10px 10px",
+		height: 40,
+		fontSize: 12,
+		fontWeight: "bold",
+		borderRadius: 15,
+		padding: "0 30px 0 30px",
+		boxSizing: "border-box",
+		color: "#000000",
+		cursor: "pointer",
+		textTransform: "none",
+		"&:hover": {
+			backgroundColor: "#fff"
+		}
+	},
+	solidButton2Style: {
+		width: 190,
+		backgroundColor: "#152036FF",
+		// border: "1px solid #152036FF",
+		margin: "35px 10px 10px",
+		height: 40,
+		fontSize: 12,
+		fontWeight: "bold",
+		borderRadius: 15,
+		padding: "0 30px 0 30px",
+		boxSizing: "border-box",
+		color: "#aeb7c6",
+		cursor: "pointer",
+		textTransform: "none",
+		"&:hover": {
+			backgroundColor: "#aeb7c6",
+			color: "black",
+		}
+	},
 
 }));
 
 const HtmlTooltip = withStyles((theme) => ({
-    tooltip: {
-        backgroundColor: '#A4C7D2',
-        color: 'black',
-        height: '80%',
-        width: '100%',
-        maxWidth: 220,
-        fontSize: theme.typography.pxToRem(15),
-        fontWeight: 'bold',
-        border: '1px solid #A4C7D2',
-    },
+	tooltip: {
+		backgroundColor: '#A4C7D2',
+		color: 'black',
+		height: '80%',
+		width: '100%',
+		maxWidth: 220,
+		fontSize: theme.typography.pxToRem(15),
+		fontWeight: 'bold',
+		border: '1px solid #A4C7D2',
+	},
 }))(Tooltip);
 
-export const OutlinedButton = ({label, onClick}) => {
-    const classes = useStyles();
-    return (
-        <Button className={classes.outlineButtonStyle} onClick={onClick} variant="outlined">{label}</Button>
-    )
+export const OutlinedButton = ({ label, onClick }) => {
+	const classes = useStyles();
+	return (
+		<Button className={classes.outlineButtonStyle} onClick={onClick} variant="outlined">{label}</Button>
+	)
 }
 
-export const SolidButton = ({label, onClick}) => {
-    const classes = useStyles();
-    return (
-        <Button className={classes.solidButtonStyle} onClick={() =>onClick()} variant="contained">{label}</Button>
-    )
+export const SolidButton = ({ label, onClick }) => {
+	const classes = useStyles();
+	return (
+		<Button className={classes.solidButtonStyle} onClick={() => onClick()} variant="contained">{label}</Button>
+	)
 }
-export const SolidButton2 = ({disabled, label, onClick}) => {
-    const classes = useStyles();
-    return (
-        <Button disabled={disabled} className={classes.solidButton2Style} onClick={onClick} variant="contained">{label}</Button>
-    )
+export const SolidButton2 = ({ disabled, label, onClick }) => {
+	const classes = useStyles();
+	return (
+		<Button disabled={disabled} className={classes.solidButton2Style} onClick={onClick} variant="contained">{label}</Button>
+	)
 }