Visual and Style Fixes

package.json

@@ -26,7 +26,7 @@
     "react-icons": "^4.10.1",
     "react-remark": "^2.1.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "request": "^2.88.2"
   },
   "scripts": {

src/components/EventCard/index.tsx

@@ -31,13 +31,12 @@ const EventCard = ({ event }: { event: ACMEvent }) => {
   return (
     <>
       <div className="EventCard">
-        <Row>
+        <Row align="middle">
           <img
             src={event.cover}
             alt={event.title}
             style={{
-              marginBottom: '1.5rem',
-              marginRight: '1rem',
+              marginRight: '2rem',
               boxShadow: '0px 3px 5px 1px rgba(189, 189, 189, 0.5)',
               borderRadius: '16px',
               height: '88px',

src/components/Header/index.less

@@ -84,6 +84,11 @@
       p {
         font-weight: @semi-bold;
       }
+
+      h4 {
+        font-weight: @semi-bold;;
+        color: white;
+      }
 
     }
   }

src/components/Header/index.tsx

@@ -160,7 +160,7 @@ function Header() {
                       history.push('/');
                     }}
                   >
-                    <p>Login</p>
+                    <h4>Login</h4>
                   </Button>
                 </Link>
               )}

src/components/MainFooter/index.tsx

@@ -3,11 +3,21 @@ import React from 'react';
 import './index.less';
 import { AiOutlineLink } from 'react-icons/ai';
 import { BiLogoInstagram, BiLogoDiscord, BiMailSend } from 'react-icons/bi';
-const { Footer } = Layout;
+import '../../newStyles/components.less'
+const { Footer, Content } = Layout;
 
-const MainFooter = () => {
+interface MainFooterProps {
+  isMainPage?: boolean;
+}
+
+const MainFooter: React.FC<MainFooterProps> = ({ isMainPage = false }) => {
   return (
+    <>
+    <Content>
+      <div className=" gradient-bar"></div>
+    </Content>
     <Footer className="mainFooter">
+    {/* <Footer className={`mainFooter ${isMainPage ? '' : 'gradient-bar'}`}> */}
       <Row className="splitRow">
         <Col className="infoText">
           <h2 className="title2">Join the board</h2>
@@ -100,6 +110,7 @@ const MainFooter = () => {
 
       <h3>ACM AI at UC San Diego</h3>
     </Footer>
+    </>
   );
 };
 

src/components/ProjectCard/index.less

@@ -155,4 +155,4 @@
 
   }
 
-}
+}

src/pages/404Page/index.tsx

@@ -16,9 +16,6 @@ function NotFound() {
             </div>
             </Content>
 
-            <Content>
-                <div className="homeBottomBar"></div>
-            </Content>
             <MainFooter />
         </DefaultLayout>
 

src/pages/AboutPage/index.less

@@ -155,6 +155,7 @@
       }
 
       h4 {
+        margin-top: 1rem;
         font-weight: @semi-bold;
       }
 
@@ -210,7 +211,6 @@
           background: white;
           height: 35px;
           width: 35px;
-          box-shadow: 0px 3px 5px 1px rgba(189, 189, 189, 0.5);
         }
 
         a {

src/pages/AboutPage/index.tsx

@@ -276,7 +276,7 @@ function AboutPage() {
         >
           <div className="drawerContent">
             <Col>
-              <Row className="drawerHeader">
+              <Row className="drawerHeader" gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
                 <img
                   style={{
                     marginRight: '1rem',
@@ -291,7 +291,7 @@ function AboutPage() {
                   alt={`profile of ${selectedPerson!!.name}`}
                 />
                 <Col className="titleBox">
-                  <Tag bordered={false} color={'error'}>
+                  <Tag bordered={false} color={'error'} >
                     {selectedPerson!!.role}
                   </Tag>
                   <h4>{selectedPerson!!.name}</h4>

src/pages/EventsPage/index.less

@@ -33,10 +33,8 @@
   }
 
   .eventsContent {
-
     .generic-section();
     .constrained-bounds();
-    margin-bottom: 10rem;
 
     .ant-tabs-ink-bar {
       display: none;
@@ -54,39 +52,32 @@
     }
   }
 
-
-  // Custom Footer for Events Page
-  .eventsFooter {
-    width: 100%;
-    min-width: 180px;
-    background-color: @black;
-    color: @white;
-
-    padding-left: @padding-base2;
-    padding-right: @padding-base2;
-
-    @media screen and (max-width: @xs) {
-      padding-left: @padding-base !important;
-      padding-right: @padding-base !important;
+  .eventsFAQ {
+    .generic-section();
+    h3 {
+      font-weight: bold;
+      line-height: 3rem;
     }
-
 
-    .row {
-      padding: @padding-base;
-      margin-top: @margin-base;
+    .splitInfoRow {
+      display: flex;
+      align-items: center;
       margin-bottom: 4rem;
-      max-width: @lg;
-
+      max-width: 80%;
+      .constrained-bounds();
 
-      h4, h2, p{
-        color: @white;
+      .infoText {
+        flex: 1 1 50%;
+        max-width: 80%;
+        padding: @padding-base2;
+
+        .infoButton {
+          margin-top: @margin-base;
+          margin-bottom: @margin-base;
+          .button-colorful();
+        }
       }
-
-    }
-    h3 {
-      @color: @white;
-      text-align: center;
+
     }
   }
-
 }

src/pages/EventsPage/index.tsx

@@ -8,7 +8,8 @@ import {
 } from '../../actions/events';
 import { Row, Col, Layout, Tabs } from 'antd';
 import EventCard from '../../components/EventCard/index';
-const { Content, Footer } = Layout;
+import MainFooter from '../../components/MainFooter';
+const { Content } = Layout;
 
 const newEvents = (eventData: ACMEvent[]): React.ReactNode => {
   return (
@@ -84,43 +85,37 @@ function EventsPage(props: any) {
             ]}
           ></Tabs>
         </Content>
-
-        <Footer className="eventsFooter">
-          <Row className="row">
-            <Col>
-              <h2 className="title2">What events do we run?</h2>
+            
+        <Content className="eventsFAQ">
+          <Row className="splitInfoRow"> 
+            <Col className="infoText">
+              <h3> What events does <span className="colorful">ACM AI</span> run?</h3>
               <p>
-                We run all kinds of events, from intro to deep learning
-                workshops to seminars from distinguished researchers and
-                professors. Events are a great way to engage with the AI
-                community at UCSD and learn content you may not typically learn
-                in class! We also have a running contest ranking on Discord
-                based on your performance on our latest Kahoot quizzes. We often
-                host these quizzes at the start or end of a workshop.
+              We run all kinds of events, from intro to deep learning workshops to fun socials or
+              seminars from distinguished researchers and professors. 
+              Events are a great way to engage with the AI community at UCSD and learn content 
+              you may not typically learn in class. 
+
+              Join the conversation on Discord to learn more!
               </p>
             </Col>
           </Row>
-
-          <Row className="row">
-            <Col>
-              <h2 className="title2">Where can I find past workshops?</h2>
+          <Row className="splitInfoRow">
+            <Col className="infoText">
+              <h3>Where can I find past events</h3>
               <p>
-                We post all of our workshop recordings on our YouTube at{' '}
-                <a
-                  href="https://acmurl.com/youtube"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  https://acmurl.com/youtube
-                </a>
-                . Stay tuned in our Discord for uploads!
+              We post all of our workshop recordings on our YouTube at {' '}
+              <a href="https://acmurl.com/youtube" target="_blank" rel="noopener noreferrer">
+                https://acmurl.com/youtube
+              </a>.
+              Stay tuned in our Discord for uploads!
               </p>
             </Col>
           </Row>
-
-          <h3>ACM AI at UCSD 2023</h3>
-        </Footer>
+        </Content>
       </Content>
+
+      <MainFooter />
     </DefaultLayout>
   );
 }

src/pages/MainPage/index.less

@@ -189,6 +189,7 @@
       background-color: #FFF8F8;
       max-width: 80%;
       padding: 3rem 5rem;
+      margin-bottom: 3rem;
       gap: 10rem;
 
         .items {
@@ -217,14 +218,3 @@
   background-clip: text;  /* For Firefox */
   color: transparent;
 }
-
-.homeBottomBar {
-    box-sizing: border-box;
-    background: linear-gradient(to right, #F66161, #FE7C37);
-    border: 0px solid transparent;
-    background-clip: padding-box, border-box;
-    background-origin: padding-box, border-box;
-    padding: 3rem;
-    margin-top: 10rem;
-}
-

src/pages/MainPage/index.tsx

@@ -14,6 +14,7 @@ const { Content } = Layout;
 function MainPage() {
   return (
     <DefaultLayout>
+
     <Content className="homeHeader">
         <div className="homeContent"> 
             <div className="homeText">
@@ -29,6 +30,7 @@ function MainPage() {
                         <Button size="large" shape="round" className="aboutButton">Sign up for our newsletter &gt;</Button>
                     </Link>
                 </div>
+
             </div>
             <img src={AILogo} alt="ACM AI Diamond Logo" className="ai-logo"/>
             <div className="floatingShapes">
@@ -115,12 +117,7 @@ function MainPage() {
         </div>
     </Content>
 
-
-
-    <Content>
-        <div className="homeBottomBar"></div>
-    </Content>
-    <MainFooter />
+    <MainFooter isMainPage={true} />
 
     </DefaultLayout>
 )