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