Added reusable thank you message component (#512)

icssc · Nov 15, 2024 · 7737c81 · 7737c81
1 parent 508902c
commit 7737c81
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 46 deletions.
diff --git a/site/src/component/ReportForm/ReportForm.scss b/site/src/component/ReportForm/ReportForm.scss
@@ -57,20 +57,6 @@
   margin-top: 0px;
 }
 
-.submitted-report-form {
-  text-align: center;
-  width: 100%;
-  i {
-    color: var(--peterportal-secondary-green);
-  }
-  h1 {
-    margin: 15px 0;
-  }
-  p {
-    font-size: 1.25rem;
-  }
-}
-
 @media only screen and (max-width: 400px) {
   .report-form {
     button {

diff --git a/site/src/component/ReportForm/ReportForm.tsx b/site/src/component/ReportForm/ReportForm.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useState } from 'react';
-import { Icon } from 'semantic-ui-react';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import './ReportForm.scss';
 import Modal from 'react-bootstrap/Modal';
 import trpc from '../../trpc';
 import { ReportSubmission } from '@peterportal/types';
+import ThankYouMessage from '../ThankYouMessage/ThankYouMessage';
 
 interface ReportFormProps {
   showForm: boolean;
@@ -73,15 +73,7 @@ const ReportForm: FC<ReportFormProps> = (props) => {
   return (
     <Modal show={props.showForm} centered animation={false} onHide={props.closeForm}>
       <div className="report-form">
-        {reportSubmitted ? (
-          <div className="submitted-report-form">
-            <Icon name="check circle" size="huge" />
-            <h1>Thank You</h1>
-            <p>Your report has been submitted successfully.</p>
-          </div>
-        ) : (
-          reportForm
-        )}
+        {reportSubmitted ? <ThankYouMessage message="Your report has been submitted successfully." /> : reportForm}
       </div>
     </Modal>
   );

diff --git a/site/src/component/ReviewForm/ReviewForm.scss b/site/src/component/ReviewForm/ReviewForm.scss
@@ -106,19 +106,7 @@
   justify-content: space-between;
   align-items: center;
 }
-.submitted-form {
-  text-align: center;
-  width: 100%;
-  i {
-    color: var(--peterportal-secondary-green);
-  }
-  h1 {
-    margin: 15px 0;
-  }
-  p {
-    font-size: 1.25rem;
-  }
-}
+
 .review-form-close {
   position: absolute;
   right: 2vh;

diff --git a/site/src/component/ReviewForm/ReviewForm.tsx b/site/src/component/ReviewForm/ReviewForm.tsx
@@ -15,6 +15,7 @@ import { ReviewProps } from '../Review/Review';
 import ThemeContext from '../../style/theme-context';
 import { quarters } from '@peterportal/types';
 import trpc from '../../trpc';
+import ThankYouMessage from '../ThankYouMessage/ThankYouMessage';
 import {
   anonymousName,
   EditReviewSubmission,
@@ -499,15 +500,7 @@ const ReviewForm: FC<ReviewFormProps> = ({
   return (
     <Modal show={show} onHide={closeForm} centered animation={false}>
       <div className="review-form">
-        {submitted ? (
-          <div className="submitted-form">
-            <Icon name="check circle" size="huge" />
-            <h1>Thank You</h1>
-            <p>Your form has been submitted successfully.</p>
-          </div>
-        ) : (
-          reviewForm
-        )}
+        {submitted ? <ThankYouMessage message="Your form has been submitted successfully." /> : reviewForm}
       </div>
     </Modal>
   );

diff --git a/site/src/component/ThankYouMessage/ThankYouMessage.scss b/site/src/component/ThankYouMessage/ThankYouMessage.scss
@@ -0,0 +1,13 @@
+.thank-you-message {
+  text-align: center;
+  width: 100%;
+  i {
+    color: var(--peterportal-secondary-green);
+  }
+  h1 {
+    margin: 15px 0;
+  }
+  p {
+    font-size: 1.25rem;
+  }
+}
diff --git a/site/src/component/ThankYouMessage/ThankYouMessage.tsx b/site/src/component/ThankYouMessage/ThankYouMessage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+import './ThankYouMessage.scss';
+
+interface ThankYouMessageProps {
+  message: string;
+}
+
+const ThankYouMessage: React.FC<ThankYouMessageProps> = ({ message }) => {
+  return (
+    <div className="thank-you-message">
+      <Icon name="check circle" size="huge" />
+      <h1>Thank You</h1>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default ThankYouMessage;