[UI] fix home cards bug, sass dependency issue

package.json

@@ -14,7 +14,6 @@
     "jquery": "^3.5.1",
     "moment": "^2.27.0",
     "mongoose": "^5.10.6",
-    "node-sass": "^4.14.1",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
@@ -51,5 +50,8 @@
   "engines": {
     "node": "11.15.0"
   },
-  "proxy": "http://localhost:8080"
+  "proxy": "http://localhost:8080",
+  "devDependencies": {
+    "sass": "^1.53.0"
+  }
 }

src/App.js

@@ -20,6 +20,9 @@ function App() {
             <Route exact path="/events" component={Events} />
             <Route exact path="/sponsors" component={Sponsorship} />
             <Route exact path="/contact" component={Contact} />
+            <Route exact path="/mentor" component={() => {
+              window.location.href = "https://hack.ics.uci.edu/contact/#mentors"
+            }}/>
             <Route exact path="/recruit" component={() => {
               window.location.href = 'https://www.hackuci.com/recruit';
               return null;

src/App.scss

@@ -1,6 +1,11 @@
 @import "globals/hack-variables.scss";
 @import 'src/globals/hack-styles.scss';
 
+body {
+  background: $blue-gradient;
+  background-repeat: repeat-y;
+}
+
 .App {
   text-align: center;
   min-height: 100vh;

src/app/components/newsletter/Newsletter.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import axios from "axios";
 import Alert from "react-bootstrap/Alert";
+import DiscordIcon from "../../../assets/icons/discord_icon.svg";
 
 import "./Newsletter.scss";
 
@@ -36,116 +37,123 @@ function Newsletter(props) {
       className="jumbotron jumbotron-fluid newsletter"
       style={props.style}
     >
-      <div id="discord" className="text-left newsletter-container">
-        <div className="newsletter-left">
-          <h2>Join our Discord and newsletter!</h2>
-          <p className="newsletter-info">
-            Get Involved! Just fill in your information and click "Sign Up".
-            Hack at UCI will email you an invite link to our discord server and
-            subscribe you to our newsletter for the club's updates and events.
-          </p>
+      <div id="discord" className="container newsletter-container">
+        <h3> Get Involved! </h3>
+        <a href="https://discord.gg/2gZjQMjKeF">
+          <div className="card discord-card">
+            <h2>Join our Discord</h2>
+            <img className="discord-icon" src={DiscordIcon} alt="Join Discord"/>
+          </div>
+        </a>
+        <div className="card">
+          <h2>Join our newsletter!</h2>
+          <form
+              className="newsletter-form"
+              action={
+                "https://uci.us13.list-manage.com/subscribe/post?u=5976872928cd5681fbaca89f6&amp;id=93333e11eb"
+              }
+              method={"post"}
+              name={"mc-embedded-subscribe-form"}
+              target={"_blank"}
+              onSubmit={submitDiscordSignUp}
+          >
+            <label>
+              Graduating Year <span className="asterisk">*</span>
+            </label>
+            <input
+                id="userYear"
+                type="text"
+                maxLength="4"
+                className="form-control"
+                name="MMERGE4"
+                required
+                value={graduationYear}
+                onChange={(event) => setGraduationYear(event.target.value)}
+            />
+            <br />
+            <label>
+              First Name <span className="asterisk">*</span>
+            </label>
+            <input
+                id="userFName"
+                type="text"
+                className="form-control"
+                name="FNAME"
+                required
+                value={firstName}
+                onChange={(event) => setFirstName(event.target.value)}
+            />
+            <br />
+            <label>
+              Last Name <span className="asterisk">*</span>
+            </label>
+            <input
+                id="userLName"
+                type="text"
+                className="form-control"
+                name="LNAME"
+                required
+                value={lastName}
+                onChange={(event) => setLastName(event.target.value)}
+            />
+            <br />
+            <label>
+              Email Address <span className="asterisk">*</span>
+            </label>
+            <input
+                id="userEmail"
+                type="email"
+                className="form-control"
+                name="EMAIL"
+                required
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+            />
+            <br />
+            <div className="d-flex text-center flex-center">
+              <button className="newsletter-button" name="subscribe">
+                Sign Up
+              </button>
+            </div>
+            <br />
+            <div className="d-flex text-left">
+              <Alert
+                  show={showAlert}
+                  variant={alertSuccess ? "success" : "danger"}
+              >
+                {alertSuccess && (
+                    <React.Fragment>
+                      <Alert.Heading>Successfully Submitted!</Alert.Heading>
+                    </React.Fragment>
+                )}
+                {!alertSuccess && (
+                    <React.Fragment>
+                      <Alert.Heading>Submission Error!</Alert.Heading>
+                      <p>
+                        Your request to subscribe has not been queued! You may have
+                        already submitted a request under this email. If you do not
+                        receive an invite email in 20 minutes, please contact us at{" "}
+                        <a href="mailto:[email protected]">[email protected]</a>.
+                      </p>
+                    </React.Fragment>
+                )}
+              </Alert>
+            </div>
+          </form>
           <p className="newsletter-mailchimp-info">
             Mailchimp collects the following information for our sponsors and to
             ensure all newsletters are sent to the appropriate person.
           </p>
         </div>
-        <form
-          className="newsletter-form"
-          action={
-            "https://uci.us13.list-manage.com/subscribe/post?u=5976872928cd5681fbaca89f6&amp;id=93333e11eb"
-          }
-          method={"post"}
-          name={"mc-embedded-subscribe-form"}
-          target={"_blank"}
-          onSubmit={submitDiscordSignUp}
-        >
-          <label>
-            Email Address <span className="asterisk">*</span>
-          </label>
-          <input
-            id="userEmail"
-            type="email"
-            className="form-control"
-            name="EMAIL"
-            required
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-          />
-          <br />
-          <label>
-            First Name <span className="asterisk">*</span>
-          </label>
-          <input
-            id="userFName"
-            type="text"
-            className="form-control"
-            name="FNAME"
-            required
-            value={firstName}
-            onChange={(event) => setFirstName(event.target.value)}
-          />
-          <br />
-          <label>
-            Last Name <span className="asterisk">*</span>
-          </label>
-          <input
-            id="userLName"
-            type="text"
-            className="form-control"
-            name="LNAME"
-            required
-            value={lastName}
-            onChange={(event) => setLastName(event.target.value)}
-          />
-          <br />
-          <label>
-            Graduating Year <span className="asterisk">*</span>
-          </label>
-          <input
-            id="userYear"
-            type="text"
-            maxLength="4"
-            className="form-control"
-            name="MMERGE4"
-            required
-            value={graduationYear}
-            onChange={(event) => setGraduationYear(event.target.value)}
-          />
-          <br />
-          <div className="d-flex text-left">
-            <button className="newsletter-button" name="subscribe">
-              Sign Up
-            </button>
+        <div id="mentors" className="card">
+          <h2 style={{paddingBottom: '1em'}}>Become a mentor!</h2>
+          <p>Apply to be a part of a large group of mentors who will be able to provide support to hackers at Hack events including ZotHacks, Hack workshops, HackUCI, and HackNights!</p>
+          <div className="justify-content-center">
+            <a href="https://airtable.com/shrbPw3zLgnVZkMkA">
+              <button className="mentorship-button">Mentorship Application</button>
+            </a>
           </div>
-          <br />
-          <div className="d-flex text-left">
-            <Alert
-              show={showAlert}
-              variant={alertSuccess ? "success" : "danger"}
-            >
-              {alertSuccess && (
-                <React.Fragment>
-                  <Alert.Heading>Successfully Submitted!</Alert.Heading>
-                  <p>
-                    You'll receive an invite link for our Discord server at the
-                    email provided above within 5 minutes.
-                  </p>
-                </React.Fragment>
-              )}
-              {!alertSuccess && (
-                <React.Fragment>
-                  <Alert.Heading>Submission Error!</Alert.Heading>
-                  <p>
-                    Your request to subscribe has not been queued! You may have
-                    already submitted a request under this email. If you do not
-                    receive an invite email in 20 minutes, please contact us at{" "}
-                    <a href="mailto:[email protected]">[email protected]</a>.
-                  </p>
-                </React.Fragment>
-              )}
-            </Alert>
-          </div>
-        </form>
+        </div>
       </div>
     </div>
   );

src/app/components/newsletter/Newsletter.scss

@@ -6,41 +6,46 @@
 }
 
 .newsletter-container {
-  display: grid;
-  grid-template-columns: 50% 5% 45%;
-  font-size: 23px;
-  width: 80%;
-  margin: auto;
+  display: flex;
+  flex-direction: column;
+  & a {
+    color: black;
+    text-decoration: none;
+  }
+  & a:hover {
+    color: white;
+    text-decoration: none;
+  }
+  & h2 {
+    font-size: 36px !important;
+    font-weight: normal !important;
+  }
+  & .card {
+    padding: 48px;
+    margin: 48px 200px !important;
+  }
 }
 
 .jumbotron {
   margin-bottom: 0 !important;
 }
 
-.newsletter-left {
-  grid-column: 1;
-}
-
-.newsletter-container form {
-  grid-column: 3;
-}
-
 .newsletter-container h1 {
   margin: 0;
 }
 
 .newsletter-mailchimp-info {
-  font-size: 22px;
+  font-size: 16px;
+  font-weight: 400;
   color: #a9a9a9;
-  max-width: 460px;
 }
 
 .newsletter-info {
   font-size: 25px;
 }
 
-.newsletter-form label {
-  margin: 0;
+.newsletter-form {
+  text-align: left;
 }
 
 .newsletter-form .form-control {
@@ -62,6 +67,25 @@
   margin-left: 10px;
 }
 
+.discord-card {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  transition: background-color 0.5s ease;
+  color: black;
+  &:hover {
+    background-color: #5865F0;
+    color: white;
+    cursor: pointer;
+  }
+}
+
+.discord-icon {
+  width: 98px;
+  height: 98px;
+}
+
 .discord-button {
   border-color: transparent;
   border-radius: 30px;
@@ -82,10 +106,24 @@
   color: white;
 }
 
-@media screen and (max-width: 760px) {
+.mentorship-button {
+  border-color: transparent;
+  border-radius: 30px;
+  font-size: 20px;
+  font-weight: 600;
+  padding: 10px 25px;
+  background-color: $red;
+  color: white;
+  position: relative;
+  z-index: 10;
+}
+
+@media screen and (max-width: 780px) {
   .newsletter-container {
-    display: block;
     font-size: 23px;
+    & .card {
+      margin: 48px 0 !important;
+    }
   }
   .discord-button {
     font-size: 25px;