-
-
- {currentFormStep === 1 && (
-
+
+
Register For
@@ -34,15 +36,11 @@ export default function RegisterPage() {
Register
For
-
-
+
+
+
+ + {currentFormStep === 4 ? 'Badge Complete!' : 'Create Your Badge'} +
+ +
+ {currentFormStep === 1 && (
+
+
+
+ )}
+ {currentFormStep > 1 && (
-
- )}
- {currentFormStep > 1 && (
-
- )}
-
+ Step {currentFormStep} of 4
-{currentFormStep}/4
- {currentFormStep < 4 && ( - - )} - {currentFormStep === 4 && ( - -
+
);
diff --git a/src/app/register/Register.scss b/src/app/register/Register.scss
index 41579af..3f018f8 100644
--- a/src/app/register/Register.scss
+++ b/src/app/register/Register.scss
@@ -1,12 +1,23 @@
#register-page-container {
margin-top: $nav-height;
- padding: $main-padding-mobile;
+ padding: 2.5rem 1.5rem;
+ // padding: $main-padding-mobile;
height: calc(100dvh - $nav-height);
display: flex;
flex-direction: column;
justify-content: space-between;
+ @media (min-width: $tablet-breakpoint) {
+ padding-bottom: calc($nav-height / 2);
+ justify-content: center;
+ // align-items: center;
+ }
+
#register-top {
+ @media (min-width: 400px) {
+ margin-inline: auto;
+ }
+
#smaller-register-header {
font-size: 2.25rem;
text-align: center;
@@ -30,15 +41,22 @@
font-size: 4rem;
display: block;
width: fit-content;
- margin-inline: auto;
span {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
+
+ svg {
+ width: 3.2em;
+ }
}
}
+
+ @media (min-width: $tablet-breakpoint) {
+ font-size: 5rem;
+ }
}
@media (min-width: 400px) {
@@ -64,6 +82,11 @@
max-width: 17.5rem;
margin-inline: auto;
+ @media (min-width: $tablet-breakpoint) {
+ margin-top: 2.5rem;
+ max-width: 24rem;
+ }
+
a,
button {
width: 100%;
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index ce8d0e2..99f6d7f 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import Link from 'next/link';
import StrideLogo from '@/components/Register/StrideLogo';
import FeeTag from '@/components/Register/FeeTag';
+import RegisterAssets from '@/components/Register/RegisterAssets/RegisterAssets';
export default function RegisterPage() {
// This is to ensure users don't click on register button before the script is loaded
@@ -25,6 +26,7 @@ export default function RegisterPage() {
return (
Register For
@@ -34,15 +36,11 @@ export default function RegisterPage() {
Register
For
-
- Lorem Ipsum Dolor Sit Amet Include something about the $5 fee?
+Lorem Ipsum Dolor Sit Amet
+Include something about the $5 fee?
diff --git a/src/app/styles/_var.scss b/src/app/styles/_var.scss
index 982cbab..c4448a8 100644
--- a/src/app/styles/_var.scss
+++ b/src/app/styles/_var.scss
@@ -9,6 +9,7 @@ $dark-gray: #565656;
$mobile-breakpoint: 768px;
$tablet-breakpoint: 1024px;
+$desktop-breakpoint: 1440px;
// Stride Logo + DCo Logo + Logo Gap + padding
$nav-height: calc(60px + 12px + 10px + 2 * 3.75rem);
diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
index 94f8138..e201161 100644
--- a/src/app/styles/global.scss
+++ b/src/app/styles/global.scss
@@ -9,6 +9,17 @@ html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
+ --main-padding: 1.5rem;
+
+ @media (min-width: 580px) {
+ --main-padding: 2rem;
+ }
+ @media (min-width: $tablet-breakpoint) {
+ --main-padding: 4rem;
+ }
+ @media (min-width: $desktop-breakpoint) {
+ --main-padding: 7.5rem;
+ }
}
* {
diff --git a/src/components/Register/FormSteps/FormStep3/FormStep3.scss b/src/components/Register/FormSteps/FormStep3/FormStep3.scss
index 41f0382..a5e6e5e 100644
--- a/src/components/Register/FormSteps/FormStep3/FormStep3.scss
+++ b/src/components/Register/FormSteps/FormStep3/FormStep3.scss
@@ -16,7 +16,6 @@
overflow: hidden;
position: relative;
margin-top: -1.5rem;
- // height: 100%;
width: 100%;
@media (min-width: 400px) {
@@ -25,6 +24,10 @@
max-height: 15rem;
}
+ @media (min-width: $tablet-breakpoint) {
+ display: none;
+ }
+
&::before {
content: '';
width: 100%;
@@ -41,10 +44,16 @@
.customization-container {
position: relative;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
.customization-box {
width: 100%;
- height: calc(12rem + $border-width);
+ height: 100%;
+ max-height: 22rem;
+ margin-bottom: 1rem;
border-radius: 12px;
border: $border-width solid rgb(255, 255, 255);
margin-top: -$border-width;
diff --git a/src/components/Register/FormSteps/FormStep4/FormStep4.scss b/src/components/Register/FormSteps/FormStep4/FormStep4.scss
index 10a99cf..3a36162 100644
--- a/src/components/Register/FormSteps/FormStep4/FormStep4.scss
+++ b/src/components/Register/FormSteps/FormStep4/FormStep4.scss
@@ -3,7 +3,7 @@
#form-step4 {
height: 100%;
width: 100%;
- overflow: hidden;
+ // overflow: hidden;
display: flex;
flex-direction: column;
@@ -11,160 +11,35 @@
opacity: 0;
animation: FadeIn 0.8s 0.9s forwards;
- @keyframes FadeIn {
- 100% {
- opacity: 1;
- }
+ @media (min-width: $tablet-breakpoint) {
+ opacity: 1;
+ animation: none;
}
- p:first-child {
- margin-bottom: 1rem;
- }
+ p {
+ &:first-child {
+ margin-bottom: 1rem;
+ }
- align-self: start;
+ @media (min-width: $tablet-breakpoint) {
+ font-size: 1.5rem;
+ }
+ }
span {
color: $dark-green;
}
- }
-
- #mascot-badge-container {
- position: relative;
- height: 100%;
-
- .mascot-badge {
- position: absolute;
- left: 0;
- right: 0;
- z-index: 1;
- aspect-ratio: 252/378;
- height: 100%;
- border: 2px solid white;
- border-radius: 25px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- scale: 1;
- animation:
- SlideUp 0.8s,
- ScaleDown 0.8s 0.8s forwards;
- margin-inline: auto;
- transform: scale(1.05);
-
- @keyframes SlideUp {
- 0% {
- transform: translateY(100%) scale(1.05);
- }
- 100% {
- transform: translateY(-15%) scale(1.05);
- }
- }
-
- @keyframes ScaleDown {
- 0% {
- transform: translateY(-15%) scale(1.05);
- }
- 100% {
- transform: scale(0.9) translateY(0);
- }
- }
-
- &::before {
- content: '';
- width: 100%;
- height: 50%;
- bottom: 0;
- background-color: transparent;
- margin-inline: auto;
- border: 0.5rem solid rgb(0, 0, 0);
- border-radius: 0 0 23px 23px;
- border-top: none;
- position: absolute;
- z-index: 1;
- }
-
- .badge-top {
- display: flex;
- justify-content: space-around;
- align-items: center;
- padding: 1rem;
- padding-inline: 1rem;
- border-bottom: 3px solid white;
- .long-hole {
- width: 2.75rem;
- height: 1rem;
- border-radius: 24px;
- border: 2px solid white;
- }
-
- .short-hole {
- width: 1rem;
- aspect-ratio: 1;
- border-radius: 50%;
- border: 2px solid white;
- }
- }
-
- .badge-center {
- padding: 1rem;
-
- &-top {
- display: flex;
- justify-content: space-between;
- padding-block: 1rem;
- position: relative;
-
- h2 {
- display: grid;
- font-size: 1.5rem;
- // font-size: 25px;
- font-style: italic;
- font-weight: 600;
- // gap: 1rem;
- }
-
- #vertical-dotted-bar {
- position: absolute;
- left: 0;
- }
-
- #horizontal-dotted-bar {
- position: absolute;
- bottom: 0;
- }
-
- p {
- position: relative;
- display: grid;
- padding-inline: 1.5rem;
- }
- }
-
- &-center {
- display: flex;
- justify-content: space-between;
- padding-block: 1rem;
-
- p {
- font-size: 1rem;
- font-weight: 400;
- }
- }
-
- .badge-code {
- svg {
- width: 4.5rem;
- height: auto;
- }
- }
+ @keyframes FadeIn {
+ 100% {
+ opacity: 1;
}
+ }
+ }
- .badge-bottom {
- height: 100%;
- z-index: -1;
- position: relative;
- }
+ #mascot-badge-container {
+ @media (min-width: $tablet-breakpoint) {
+ display: none;
}
}
}
diff --git a/src/components/Register/FormSteps/FormStep4/FormStep4.tsx b/src/components/Register/FormSteps/FormStep4/FormStep4.tsx
index 53236dd..bb2d0e5 100644
--- a/src/components/Register/FormSteps/FormStep4/FormStep4.tsx
+++ b/src/components/Register/FormSteps/FormStep4/FormStep4.tsx
@@ -5,17 +5,13 @@ import MascotCircles from '@/components/MascotCircles/MascotCircles';
import { TFormData } from '../../types';
import VerticalBar from '../../MascotBadge/VerticalBar';
import HorizontalBar from '../../MascotBadge/HorizontalBar';
+import MascotBadge from '../../MascotBadge/MascotBadge';
type FormStep4Props = {
formData: TFormData;
};
export default function FormStep4({ formData }: FormStep4Props) {
- const firstName = formData.name.split(' ')[0];
- const lastName = formData.name.split(' ')[1];
- const firstPronoun = formData.pronouns.split('/')[0];
- const secondPronoun = formData.pronouns.split('/')[1];
-
return (
) {
) {
@@ -25,43 +21,7 @@ export default function FormStep4({ formData }: FormStep4Props) {
to {formData.email}
-
-
+
-
-
-
-
-
-
-
-
- - {firstName} - {lastName} -
-
-
-
-
-
- Class of {formData.year}
-
-
-
+
+ );
+}
diff --git a/src/components/Register/MascotBadge/VerticalBar.tsx b/src/components/Register/MascotBadge/VerticalBar.tsx
index b17ec27..615c0f0 100644
--- a/src/components/Register/MascotBadge/VerticalBar.tsx
+++ b/src/components/Register/MascotBadge/VerticalBar.tsx
@@ -14,8 +14,8 @@ export default function VerticalBar(props: SVGProps
+
+
+
+
+
+
+
+
+ + {firstName} + {lastName} +
+
+
+
+
+ {formData?.link === undefined ? (
+
+ ) : (
+
+ Class of {year}
+
+
+
+
+ );
+}