More style changes
This commit is contained in:
Peter
parent
cde2a01dd9
commit
51642612ec
|
|
@ -3,7 +3,7 @@
|
|||
--black: #282828;
|
||||
--pureblack: #000000;
|
||||
--font-color: #272727;
|
||||
--grey: #A3A3A3;
|
||||
--grey: #706F6F;
|
||||
--link-color: #1f9bde;
|
||||
--linkhover: #00d9ff;
|
||||
--navlink: #4b4b4b;
|
||||
|
|
|
|||
|
|
@ -51,9 +51,17 @@ h1 {
|
|||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
|
|
@ -66,15 +74,13 @@ textarea {
|
|||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"] {
|
||||
padding: 10px 20px;
|
||||
font-size: 1em;
|
||||
input[type="date"] {
|
||||
width: 150px;
|
||||
padding: 5px 5px 5px 5px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #CCC;
|
||||
height: 34px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #007BFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
|
|
@ -83,35 +89,34 @@ input[type="submit"][disabled] {
|
|||
}
|
||||
|
||||
.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;
|
||||
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);
|
||||
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;
|
||||
color: var(--white);
|
||||
background: #8b8a8f;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
width: 150px;
|
||||
padding: 5px 35px 5px 5px;
|
||||
|
|
@ -123,4 +128,10 @@ select {
|
|||
appearance: none;
|
||||
background: url(../../../public/img/down-arrow.svg) 96% / 15% no-repeat #EEE;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error);
|
||||
margin: 5px 0 15px 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
|
@ -53,10 +53,11 @@ export const apply: FormData = {
|
|||
type: "text",
|
||||
min_length: 0,
|
||||
max_length: 16,
|
||||
required: false,
|
||||
required: true,
|
||||
drop_down: ["They/them", "She/her", "He/him", ""],
|
||||
},
|
||||
{
|
||||
label: "When did you join Altitude",
|
||||
label: "When did you join Altitude?",
|
||||
name: "join_date",
|
||||
type: "date",
|
||||
min_length: 4,
|
||||
|
|
@ -159,6 +160,7 @@ export const apply: FormData = {
|
|||
.required('An answer is required'),
|
||||
|
||||
age: Yup.number()
|
||||
.typeError('Input must be a number')
|
||||
.min(0, 'Please enter a valid age')
|
||||
.max(999, 'We do not accept players older than 999 years old sorry!')
|
||||
.required('You are required to fill out your age'),
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import * as Yup from "yup";
|
|||
export const contact: FormData = {
|
||||
steps: [
|
||||
{
|
||||
label: "Username",
|
||||
label: "What is your Minecraft username?",
|
||||
name: "username",
|
||||
type: "text",
|
||||
min_length: 3,
|
||||
|
|
@ -12,7 +12,7 @@ export const contact: FormData = {
|
|||
required: true,
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
label: "What is your email?",
|
||||
name: "email",
|
||||
type: "email",
|
||||
min_length: 3,
|
||||
|
|
@ -20,7 +20,7 @@ export const contact: FormData = {
|
|||
required: true,
|
||||
},
|
||||
{
|
||||
label: "Question",
|
||||
label: "What is your question?",
|
||||
name: "question",
|
||||
type: "textarea",
|
||||
min_length: 10,
|
||||
|
|
|
|||
|
|
@ -85,10 +85,10 @@ const GenericForm = (formData: FormData) => {
|
|||
<div>
|
||||
<div>
|
||||
<label>
|
||||
<label>
|
||||
<label className="headline">
|
||||
{steps[currentStep].label}
|
||||
</label>
|
||||
<label>
|
||||
<label className="description">
|
||||
{
|
||||
steps[currentStep].additional_info ?
|
||||
steps[currentStep].additional_info?.split('\n').map((line, i) => (
|
||||
|
|
@ -137,7 +137,7 @@ const GenericForm = (formData: FormData) => {
|
|||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<label className="error-message">
|
||||
<ErrorMessage name={steps[currentStep].name} component="div"/>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -145,12 +145,12 @@ const GenericForm = (formData: FormData) => {
|
|||
<button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
|
||||
Previous
|
||||
</button>
|
||||
<button className="button-outer" type="button" onClick={next}
|
||||
<button className={currentStep === (steps.length - 1) ? "" : "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
|
||||
</button>
|
||||
<input type="submit" value="Submit"
|
||||
</button>
|
||||
<input className={currentStep !== (steps.length - 1) ? "" : "button-outer"} type="submit" value="Submit"
|
||||
hidden={currentStep !== (steps.length - 1)}
|
||||
disabled={!isValid || currentStep !== (steps.length - 1)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user