Styling for forms

src/App.css

@@ -2,14 +2,14 @@
 	--white: #FFFFFF;
 	--black: #282828;
 	--pureblack: #000000;
-  --font-color: #272727;
-  --grey: #A3A3A3;
+  	--font-color: #272727;
+  	--grey: #A3A3A3;
 	--link-color: #1f9bde;
 	--linkhover: #00d9ff;
 	--navlink: #4b4b4b;
 	--switch: #FBFBFE;
 	--error: #c23c3c;
-  --footer-color: #e9e9e9;
+  	--footer-color: #e9e9e9;
 }
 
 @font-face {

src/components/DEBUG/DEBUG.css

@@ -1,11 +0,0 @@
-.container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-}
-
-button {
-    margin: 10px;
-    cursor: pointer;
-}

src/components/form/GenericForm.css

@@ -1,3 +1,35 @@
+@font-face {
+    font-family: 'opensans';
+    src:url('/public/fonts/opensans.ttf') format('truetype'),
+    url('/public/fonts/opensans.eot') format('embedded-opentype'),
+    url('/public/fonts/opensans.svg') format('svg'),
+    url('/public/fonts/opensans.woff') format('woff');
+  }
+  
+  @font-face {
+    font-family: 'opensans-bold';
+    src:url('/public/fonts/opensans-bold.ttf') format('truetype'),
+    url('/public/fonts/opensans-bold.eot') format('embedded-opentype'),
+    url('/public/fonts/opensans-bold.svg') format('svg'),
+    url('/public/fonts/opensans-bold.woff') format('woff');
+  }
+  
+  @font-face {
+    font-family: 'minecraft-title';
+    src:url('/public/fonts/minecraft-title.ttf') format('truetype'),
+    url('/public/fonts/minecraft-title.eot') format('embedded-opentype'),
+    url('/public/fonts/minecraft-title.svg') format('svg'),
+    url('/public/fonts/minecraft-title.woff') format('woff');
+  }
+  
+  @font-face {
+    font-family: 'minecraft-text';
+    src:url('/public/fonts/minecraft-text.ttf') format('truetype'),
+    url('/public/fonts/minecraft-text.eot') format('embedded-opentype'),
+    url('/public/fonts/minecraft-text.svg') format('svg'),
+    url('/public/fonts/minecraft-text.woff') format('woff');
+  }
+
 .container {
     flex-grow: 1;
     display: flex;
@@ -10,11 +42,13 @@ form {
     max-width: 600px;
     margin: auto;
     padding: 20px;
+    margin-bottom: 90px;
 }
 
 h1 {
     text-align: center;
     color: #333;
+    margin-top: 100px;
 }
 
 label {
@@ -46,4 +80,47 @@ input[type="submit"] {
 button[disabled],
 input[type="submit"][disabled] {
     background-color: #ccc;
-}
+}
+
+.button-outer {
+	display: inline-block;
+	font-family: 'minecraft-text', sans-serif;
+	font-size: 0.8em;
+	padding: 15px 35px;
+	background: var(--link-color);
+	color: #ffffff;
+	letter-spacing: 1px;
+	border: none;
+	border-radius: 5px;
+	height: auto;
+	transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
+	cursor: pointer;
+	text-shadow: 1px 1px 0px black;
+    margin: 10px;
+}
+
+.button-outer:hover {
+	color: var(--pureblack);
+	text-shadow: 1px 1px 0px white;
+	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
+	transform: scale(1.1);
+}
+
+.button-outer:focus, .button-outer:active {
+	color: var(--white);
+	background: #8b8a8f;
+}
+
+
+select {
+    width: 150px;
+    padding: 5px 35px 5px 5px;
+    font-size: 16px;
+    border: 1px solid #CCC;
+    height: 34px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: url(../../../public/img/down-arrow.svg) 96% / 15% no-repeat #EEE;
+    border-radius: 5px;
+  }

src/components/form/data/apply.tsx

@@ -4,7 +4,7 @@ import * as Yup from "yup";
 export const apply: FormData = {
     steps: [
         {
-            label: "What is your username?",
+            label: "What is your Minecraft username?",
             name: "username",
             type: "text",
             min_length: 3,
@@ -20,7 +20,7 @@ export const apply: FormData = {
             required: true,
         },
         {
-            label: "What is your discord?",
+            label: "What is your Discord username?",
             name: "discord",
             type: "text",
             min_length: 2,

src/components/form/genericForm.tsx

@@ -58,11 +58,11 @@ const GenericForm = (formData: FormData) => {
 
     const [prevLength, setPrevLength] = useState(0);
     return (
-        <div className="container">
+        <div>
             <div>
                 <h1>{formData.title}</h1>
             </div>
-            <div>
+            <div className="container">
                 <Formik
                     initialValues={userInput}
                     validationSchema={spec}
@@ -134,10 +134,10 @@ const GenericForm = (formData: FormData) => {
                                     <ErrorMessage name={steps[currentStep].name} component="div"/>
                                 </label>
                             </div>
-                            <button type="button" onClick={prev} disabled={currentStep === 0}>
+                            <button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
                                 Previous
                             </button>
-                            <button type="button" onClick={next}
+                            <button className="button-outer" type="button" onClick={next}
                                     hidden={currentStep === (steps.length - 1)}
                                     disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
                                 Next

src/components/header/header.tsx

@@ -4,11 +4,7 @@ import './Header.css';
 const Header: FC = () => {
 
     return (
-        <header>
-            <div></div>
-
-            <div></div>
-        </header>
+        <div></div>
     )
 };