diff --git a/src/pages/AttendEvent/AttendEvent.js b/src/pages/AttendEvent/AttendEvent.js index 4e79130..59af1df 100644 --- a/src/pages/AttendEvent/AttendEvent.js +++ b/src/pages/AttendEvent/AttendEvent.js @@ -3,6 +3,8 @@ import "./AttendEvent.scss"; import { attendEvent } from "../../util/ServerInterfaceEvents"; import { Navigate } from "react-router"; +import Logo from "../../assets/mission-safe-logo.png"; + class AttendEvent extends React.Component { constructor(props) { super(props) @@ -29,17 +31,17 @@ class AttendEvent extends React.Component { async handleSubmit(event) { event.preventDefault(); console.log(this.state); - if(this.state.code.length === 5 && this.state.email.length > 0) { + if (this.state.code.length === 5 && this.state.email.length > 0) { try { let attendanceResult = await attendEvent(this.state.code, { email: this.state.email }); - if(attendanceResult) { + if (attendanceResult) { this.setState({ redirect: true, }) } - } catch(err) { + } catch (err) { this.setState({ errorMessage: "Failed to register attendance. Please try again." }) @@ -49,20 +51,24 @@ class AttendEvent extends React.Component { } render() { - if(this.state.redirect) { - return + if (this.state.redirect) { + return } else { return ( -
-

Event Attendance

+
+
-

Email

- +

Email

+
-

Event Code

- +

Event Code

+

{this.state.errorMessage}

diff --git a/src/pages/AttendEvent/AttendEvent.scss b/src/pages/AttendEvent/AttendEvent.scss index e69de29..1a5bf1d 100644 --- a/src/pages/AttendEvent/AttendEvent.scss +++ b/src/pages/AttendEvent/AttendEvent.scss @@ -0,0 +1,62 @@ +#attendance-page { + img { + height: 110px; + width: 110px; + } +} + +#header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-top: 36px; + + img { + margin-bottom: 25px; + } +} + +#title { + font-size: 38px; + font-weight: 400; + margin-top: 0; + margin-bottom: 8px; + letter-spacing: 2px; +} + +#subtitle { + margin-top: 0; + font-size: 14px; + font-weight: 400; + color: #5A5A5A +} + +.attendance-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 25px; +} + + +.attendance-input input { + margin-top: 0; + background-color: #F4F4F4; + border: 1px solid #D9D9D9; + border-radius: 5px; + color: black; + padding: 6px; + color: #5A5A5A; + font-size: 14px; + width: 320px; +} + +.form-label { + margin-bottom: 1px; + color: #5A5A5A; + font-size: 14px; + letter-spacing: 1px; +} \ No newline at end of file diff --git a/src/pages/CreateEvent/CreateEvent.js b/src/pages/CreateEvent/CreateEvent.js index e063b9b..c539332 100644 --- a/src/pages/CreateEvent/CreateEvent.js +++ b/src/pages/CreateEvent/CreateEvent.js @@ -3,6 +3,8 @@ import { Navigate } from "react-router"; import { createEvent } from "../../util/ServerInterfaceEvents"; import "./CreateEvent.scss"; +import Logo from "../../assets/mission-safe-logo.png"; + class CreateEvent extends React.Component { constructor(props) { super(props); @@ -27,7 +29,7 @@ class CreateEvent extends React.Component { async handleSubmit(event) { event.preventDefault(); - if(this.state.program.length > 0) { // DUMMY PROGRAM CHECKING + if (this.state.program.length > 0) { // DUMMY PROGRAM CHECKING try { let event = await createEvent({ programs: [this.state.program], @@ -35,7 +37,7 @@ class CreateEvent extends React.Component { this.setState({ eventCode: event.code, }) - } catch(err) { + } catch (err) { this.setState({ errorMessage: "Failed to create event, please try again." }); @@ -45,25 +47,28 @@ class CreateEvent extends React.Component { render() { try { - if(!this.props.user.active) { - return + if (!this.props.user.active) { + return } else if (this.state.eventCode) { - return + return } else { return ( -
-

Event Creation

+
+
+ MissionSAFE logo +

Create Event

+
-

What program is this event associated with?

- +

What program is this event associated with?

+

{this.state.errorMessage}

Create Event

) } - } catch(err) { - return + } catch (err) { + return } } } diff --git a/src/pages/CreateEvent/CreateEvent.scss b/src/pages/CreateEvent/CreateEvent.scss index f2addba..f81dc8f 100644 --- a/src/pages/CreateEvent/CreateEvent.scss +++ b/src/pages/CreateEvent/CreateEvent.scss @@ -1,9 +1,27 @@ +#create-event-page img { + height: 110px; + width: 110px; +} + +#create-event-header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-top: 36px; + + img { + margin-bottom: 25px; + } +} + .event-creation-title { - font-size: 30px; - font-weight: 500; - color: #5A5A5A; - font-family: Arial, Helvetica, sans-serif; - margin-top: 150px; + font-size: 38px; + font-weight: 400; + margin-top: 0; + margin-bottom: 8px; + letter-spacing: 2px; } .event-options { @@ -12,21 +30,23 @@ align-items: center; justify-content: center; margin-bottom: 10px; -} -.event-options input { - margin-top: 0; - background-color: #F4F4F4; - border: 1px solid #D9D9D9; - border-radius: 5px; - color: black; - padding: 6px; - color:#5A5A5A; - font-size: 14px; - font-family: Arial, Helvetica, sans-serif; + input { + margin-top: 0; + background-color: #F4F4F4; + border: 1px solid #D9D9D9; + border-radius: 5px; + color: black; + padding: 6px; + color: #5A5A5A; + font-size: 14px; + width: 320px; + } } -.event-options p { - margin-right: 5px; - font-family: Arial, Helvetica, sans-serif; +.prompt { + margin-bottom: 1px; + color: #5A5A5A; + font-size: 14px; + letter-spacing: 1px; } \ No newline at end of file diff --git a/src/pages/CreateForm/CreateForm.js b/src/pages/CreateForm/CreateForm.js index e01750b..a0a0f11 100644 --- a/src/pages/CreateForm/CreateForm.js +++ b/src/pages/CreateForm/CreateForm.js @@ -4,6 +4,8 @@ import { createYouthForm } from "../../util/ServerInterfaceYouth"; import { Navigate } from "react-router"; import "./CreateForm.scss" +import Logo from "../../assets/mission-safe-logo.png"; + class CreateForm extends React.Component { constructor(props) { super(props); @@ -11,6 +13,8 @@ class CreateForm extends React.Component { this.state = { type: window.location.pathname.split("/")[2], // "event" or "youth" id: window.location.pathname.split("/")[3], // eventCode or fireID + name: "", + description: "", program: "", content: "", errorMessage: "", @@ -31,14 +35,14 @@ class CreateForm extends React.Component { async handleSubmit(event) { event.preventDefault(); - if(this.state.program.length > 0 && this.state.content.length > 0) { + if (this.state.program.length > 0 && this.state.content.length > 0) { try { - if(this.state.type === "event") { + if (this.state.type === "event") { let form = await createEventForm(this.state.id, { programs: [this.state.program], content: this.state.content }); - if(form.ok) { + if (form.ok) { this.setState({ redirect: true, }) @@ -47,12 +51,12 @@ class CreateForm extends React.Component { errorMessage: "Something went wrong. Please try again." }) } - } else if(this.state.type === "youth") { + } else if (this.state.type === "youth") { let form = await createYouthForm(this.state.id, { programs: [this.state.program], content: this.state.content }); - if(form.ok) { + if (form.ok) { this.setState({ redirect: true, }) @@ -62,7 +66,7 @@ class CreateForm extends React.Component { }) } } - } catch(err) { + } catch (err) { this.setState({ errorMessage: "Failed to create form. Please try again." }) @@ -72,30 +76,41 @@ class CreateForm extends React.Component { render() { try { - if(!this.props.user.active) { - return - } else if(this.state.redirect) { - return + if (!this.props.user.active) { + return + } else if (this.state.redirect) { + return } else { return ( -
-

Form Creation

-
+
+
+ MissionSAFE logo +

Create Form

+
+
+
+

Form Name

+ +
+
+

What program is this form associated with?

+ +
-

What program is this form associated with?

- +

Form Description

+