Skip to content

Commit

Permalink
UI Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@graysonsmithh
graysonsmithh committed Dec 17, 2024
1 parent 3ad99bf commit 75e8b6a
Show file tree
Hide file tree
Showing 5 changed files with 455 additions and 192 deletions.
19 changes: 10 additions & 9 deletions app/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { LoginButton } from "./mock-login-button";
import { SignupButton } from "./mock-sign-up";
import { LogoutButton } from "./mock-logout-button";
import { useAuth0 } from "@auth0/auth0-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


const Navbar = (): ReactElement => {
const navigate = useNavigate();
Expand All @@ -12,20 +14,17 @@ const Navbar = (): ReactElement => {
return (
<>
<div className="Navbar">
<div className="Block-navbar Width--100">
<div className="Flex-row">
<div className="Navbar-body">
<div
onClick={() => {
navigate("/home");
}}
className="Navbar-body-logo"
></div>
<div className="Flex-row Margin-left--auto">
<div
className = "Home-icon Margin-right--40"
onClick={() => {
navigate("/home");
}}
className="Navbar-body-home"
></div>
}}>
<FontAwesomeIcon icon={["far", "home"]} color="#545454"/>
</div>
<div
className="Navbar-body-link"
onClick={() => {
Expand Down Expand Up @@ -67,6 +66,8 @@ const Navbar = (): ReactElement => {
</>
)}
{isAuthenticated && <LogoutButton />}
</div>
</div>
</div>
</div>
</div>
Expand Down
108 changes: 65 additions & 43 deletions app/src/pages/CreateMeeting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const validationSchema = Yup.object().shape({
const CreateMeeting = () => {
const handleSubmit = async (
values: any,
{ setSubmitting, resetForm }: any,
{ setSubmitting, resetForm }: any
) => {
setSubmitting(true);
try {
Expand Down Expand Up @@ -46,50 +46,72 @@ const CreateMeeting = () => {
return (
<>
<Navbar />
<h1>Create Meeting</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="Form-group">
<label htmlFor="meeting">Meeting Name</label>
<Field
type="text"
name="meeting"
placeholder="Meeting Name"
className="Form-input-box"
/>
{errors.meeting && touched.meeting && (
<div className="Form-error">{errors.meeting}</div>
)}
</div>
<div className="Block Width--70 Margin-right--80 Margin-left--80 Margin-top--40 Height--100vh">
<div
className="Flex-row Margin-bottom--40 Margin-left--40 Margin-right--100 Margin-top--30 Text-color--blue-1000 Text-fontSize--30"
style={{
borderBottom: "2px solid rgba(84, 84, 84, 0.3)",
paddingBottom: "10px",
}}
>
Create Meeting
</div>
<div className="Margin-left--40 Margin-right--40">
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="Margin-bottom--30">
<div className="Form-group">
<div className="Flex-row Text-fontSize--16 Text-color--gray-1000 Margin-bottom--8">
<div className="name">Meeting Name:</div>
</div>
<Field
type="text"
name="meeting"
placeholder="Meeting Name"
className="Form-input-box"
/>
{errors.meeting && touched.meeting && (
<div className="Form-error">{errors.meeting}</div>
)}
</div>
</div>

<div className="Form-group">
<label htmlFor="notes">Notes</label>
<Field
type="text"
name="notes"
placeholder="Notes"
className="Form-input-box"
/>
{errors.notes && touched.notes && (
<div className="Form-error">{errors.notes}</div>
)}
</div>
<div className="Margin-bottom--20">
<div className="Form-group">
<div className="Flex-row Text-fontSize--16 Text-color--gray-1000 Margin-bottom--8">
<div className="description">Notes:</div>
</div>
<Field
type="text"
name="notes"
placeholder="Notes"
className="Form-input-box"
/>
{errors.notes && touched.notes && (
<div className="Form-error">{errors.notes}</div>
)}
</div>
</div>

<button
type="submit"
className="Button Button-color--dark-1000 Width--100"
disabled={isSubmitting}
>
{isSubmitting ? "Submitting..." : "Create Meeting"}
</button>
</Form>
)}
</Formik>
<div className="Flex-row Justify-content--center">
<button
type="submit"
className="Button Margin-top--30 Button-color--blue-1000 Width--50"
disabled={isSubmitting}
>
{isSubmitting ? "Submitting..." : "Create Meeting"}
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</>
);
};
Expand Down
113 changes: 68 additions & 45 deletions app/src/pages/CreateWorkshop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const CreateWorkshop = () => {
// Handle form submission
const handleSubmit = async (
values: any,
{ setSubmitting, resetForm }: any,
{ setSubmitting, resetForm }: any
) => {
setSubmitting(true);
try {
Expand All @@ -42,52 +42,75 @@ const CreateWorkshop = () => {
return (
<>
<Navbar />
<h1>Create Workshop</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="Form-group">
<label htmlFor="name">Name</label>
<Field
type="text"
name="name"
placeholder="Name"
className="Form-input-box"
/>
{/* Display error message if name field is invalid */}
{errors.name && touched.name && (
<div className="Form-error">{errors.name}</div>
)}
</div>

<div className="Form-group">
<label htmlFor="description">Description</label>
<Field
type="text"
name="description"
placeholder="Description"
className="Form-input-box"
/>
{/* Display error message if description field is invalid */}
{errors.description && touched.description && (
<div className="Form-error">{errors.description}</div>
)}
</div>
<div className="Block Width--70 Margin-right--80 Margin-left--80 Margin-top--40 Height--100vh">
<div
className="Flex-row Margin-bottom--40 Margin-left--40 Margin-right--100 Margin-top--30 Text-color--teal-1000 Text-fontSize--30"
style={{
borderBottom: "2px solid rgba(84, 84, 84, 0.3)",
paddingBottom: "10px",
}}
>
Create Workshop
</div>
<div className="Margin-left--40 Margin-right--40">
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="Margin-bottom--30">
<div className="Form-group">
<div className="Flex-row Text-fontSize--16 Text-color--gray-1000 Margin-bottom--8">
<div className="name">Workshop Name:</div>
</div>
<Field
type="text"
name="name"
placeholder="Name"
className="Form-input-box"
/>
{/* Display error message if name field is invalid */}
{errors.name && touched.name && (
<div className="Form-error">{errors.name}</div>
)}
</div>
</div>

<button
type="submit"
className="Button Button-color--dark-1000 Width--100"
disabled={isSubmitting} // Disable button while form is submitting
>
{isSubmitting ? "Submitting..." : "Create Workshop"}
</button>
</Form>
)}
</Formik>
<div className="Margin-bottom--20">
<div className="Form-group">
<div className="Flex-row Text-fontSize--16 Text-color--gray-1000 Margin-bottom--8">
<div className="description">Workshop Description:</div>
</div>
<Field
type="text"
name="description"
placeholder="Description"
className="Form-input-box"
/>
{/* Display error message if description field is invalid */}
{errors.description && touched.description && (
<div className="Form-error">{errors.description}</div>
)}
</div>
</div>

<div className="Flex-row Justify-content--center">
<button
type="submit"
className="Button Margin-top--30 Button-color--teal-1000 Width--50"
disabled={isSubmitting} // Disable button while form is submitting
>
{isSubmitting ? "Submitting..." : "Create Workshop"}
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</>
);
};
Expand Down
Loading

0 comments on commit 75e8b6a

Please sign in to comment.