Shareinvite improvements

pages/404.tsx

@@ -5,14 +5,17 @@ import Layout from "../src/components/Layout";
 const NotFound = (): JSX.Element => {
   return (
     <Layout>
-      <Container fluid>
-        <Row>
+      <Container className="outer-container" fluid>
+        <Row className="inner-container">
           <Col>
-            <h1>Page not found</h1>
+            <h1>404</h1>
+            <h3>We can't seem to find the page you're looking for.</h3>
             <h3>
+              But here's the link to our
               <Link href="/">
-                <a>Landing page</a>
-              </Link>
+                <a> homepage!</a>
+              </Link>{" "}
+              :D
             </h3>
           </Col>
         </Row>

pages/_app.tsx

@@ -12,7 +12,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
   const persistor = persistStore(store);
 
   return (
-    <PersistGate persistor={persistor} loading={<div>Loading</div>}>
+    <PersistGate persistor={persistor} loading={<div />}>
       <Component {...pageProps} />
     </PersistGate>
   );

pages/poll/[id].tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { GetServerSideProps } from "next";
-import { Row, Container, Jumbotron, Alert } from "react-bootstrap";
+import { Row, Container, Jumbotron } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -15,7 +15,7 @@ import {
   RocketMeetPollFromDB,
 } from "../../src/models/poll";
 import { decrypt } from "../../src/helpers/helpers";
-import ShareInvite from "../../src/components/shareinvite";
+import ShareInvite from "../../src/components/ShareInvite";
 import { RootState } from "../../src/store/store";
 
 dayjs.extend(localizedFormat);
@@ -37,15 +37,6 @@ const Poll = (props: {
     choices: [],
   });
   const [finalChoice, setFinalChoice] = useState<Choice | undefined>();
-  const [showPopS, setShowPopS] = useState<boolean>(false);
-  const [showPopF, setShowPopF] = useState<boolean>(false);
-
-  const handleChangeS = (newValS: boolean): void => {
-    setShowPopS(newValS);
-  };
-  const handleChangeF = (newValF: boolean): void => {
-    setShowPopF(newValF);
-  };
 
   return (
     <Layout>
@@ -56,12 +47,7 @@ const Poll = (props: {
               <PollInfo poll={pollFromDB} />
               {pollFromDB.open &&
                 loggedInUserEmailID === pollCreatorEmailID && (
-                  <ShareInvite
-                    polltitle={pollFromDB.title}
-                    pollid={pollid}
-                    onChangeS={handleChangeS}
-                    onChangeF={handleChangeF}
-                  />
+                  <ShareInvite polltitle={pollFromDB.title} pollid={pollid} />
                 )}
             </Jumbotron>
           </div>
@@ -81,24 +67,6 @@ const Poll = (props: {
             </Jumbotron>
           </div>
         </Row>
-        <div className="alert-corner">
-          <Alert
-            variant="success"
-            show={showPopS}
-            onClose={(): void => setShowPopS(false)}
-            dismissible
-          >
-            <Alert.Heading>Successfully sent mails</Alert.Heading>
-          </Alert>
-          <Alert
-            variant="danger"
-            show={showPopF}
-            onClose={(): void => setShowPopF(false)}
-            dismissible
-          >
-            <Alert.Heading>Mails not sent</Alert.Heading>
-          </Alert>
-        </div>
       </Container>
     </Layout>
   );

src/components/PollInfo.tsx

@@ -19,7 +19,7 @@ const PollInfo = (props: { poll: RocketMeetPollFromDB }): JSX.Element => {
       <Badge
         pill
         variant={poll.open ? "success" : "secondary"}
-        className="rm-badge"
+        className="rm-badge-poll"
       >
         {poll.open ? "Open" : "Closed"}
       </Badge>

src/components/PollsList.tsx

@@ -48,16 +48,22 @@ const PollsList = (): JSX.Element => {
     return pollList.reverse().map((item: RocketMeetPollFromDB) => (
       <div key={item._id}>
         <Card bg="dark" text="white" className="pt-4 px-4 my-2 cardindash">
-          <Card.Title className="d-flex flex-row justify-content-between">
-            <span className="card-title">{item.title}</span>
-            <Badge
-              pill
-              variant={item.open ? "success" : "secondary"}
-              className="rm-badge"
-            >
-              {item.open ? "open" : "closed"}
-            </Badge>
-          </Card.Title>
+          <Row>
+            <div className="col-8">
+              <Card.Title className="d-flex flex-row justify-content-between">
+                <span className="card-title">{item.title}</span>
+              </Card.Title>
+            </div>
+            <div className="col-4">
+              <Badge
+                pill
+                variant={item.open ? "success" : "secondary"}
+                className="rm-badge-dash"
+              >
+                {item.open ? "open" : "closed"}
+              </Badge>
+            </div>
+          </Row>
           <Card.Body className="text-justify">
             <a
               href={`/poll/${item._id}`}

src/components/ResponseMessage.tsx

@@ -5,6 +5,16 @@ const ResponseMessage = (props: {
   onHide(arg: boolean): void;
 }): JSX.Element => {
   const { response, onHide } = props;
+  let responseClassName: string;
+
+  if (response.type === "error") {
+    responseClassName = "rm-response-error";
+  } else if (response.type === "success") {
+    responseClassName = "rm-response-success";
+  } else {
+    responseClassName = "rm-response-null";
+  }
+
   return (
     <Modal
       show={response.status}
@@ -13,15 +23,11 @@ const ResponseMessage = (props: {
       aria-labelledby="contained-modal-title-vcenter"
       centered
     >
-      <Modal.Header
-        closeButton
-        className={
-          response.type === "error"
-            ? "rm-response-error"
-            : "rm-response-success"
-        }
-      >
-        <Modal.Title id="contained-modal-title-vcenter">
+      <Modal.Header closeButton className={responseClassName}>
+        <Modal.Title
+          id="contained-modal-title-vcenter"
+          className="rm-response-title"
+        >
           {response.msg}
         </Modal.Title>
       </Modal.Header>