From 5a10011e266741a12f5fe94a74e2f68c99f88372 Mon Sep 17 00:00:00 2001
From: Madelyn Weathers <mrwptd@umsystem.edu>
Date: Tue, 20 Apr 2021 19:18:56 -0500
Subject: [PATCH] Added CalendarButton

---
 .../HomePage/sections/Events/index.tsx        | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/screens/HomePage/sections/Events/index.tsx b/apps/web/src/screens/HomePage/sections/Events/index.tsx
index 776e3b6b..799788ba 100644
--- a/apps/web/src/screens/HomePage/sections/Events/index.tsx
+++ b/apps/web/src/screens/HomePage/sections/Events/index.tsx
@@ -15,7 +15,7 @@ import { config } from "../../../../config";
 import {
   Event as IEvent,
   GetCurrentEventsQueryHookResult,
-  useGetCurrentEventsQuery
+  useGetCurrentEventsQuery,
 } from "../../../../generated/graphql";
 
 export const GET_CURRENT_EVENTS_QUERY: any = gql`
@@ -167,16 +167,10 @@ const EventsWrapper: AnyStyledComponent = styled.div`
   overflow-y: hidden;
 
   @media all and (max-width: ${MOBILE_BREAKPOINT}) {
-  margin-left: 0;
+    margin-left: 0;
   }
 `;
 
-const CalendarLink: AnyStyledComponent = styled.a`
-  margin: auto;
-  color: #ababab;
-  font-size: 20px;
-`;
-
 const Heading: AnyStyledComponent = styled.h1`
   font-family: "Roboto", sans-serif;
   text-transform: uppercase;
@@ -198,9 +192,22 @@ const FILTER_TYPES: string[] = [
   "General",
   "Hack",
   "Security",
-  "Women"
+  "Women",
 ];
 
+const CalendarLink: AnyStyledComponent = styled.a`
+  margin: auto;
+  color: #ababab;
+  font-size: 20px;
+`;
+
+const CalendarText: AnyStyledComponent = styled.div`
+  margin: auto;
+  color: #ababab;
+  font-size: 20px;
+`;
+const CalendarButton: AnyStyledComponent = styled.button``;
+
 const DEFAULT_EVENTS_TO_DISPLAY: number = 3;
 const CALENDAR_LINK: string =
   "https://calendar.google.com/calendar/embed?src=mst.edu_7u3stm8bn7l2umuastep5fmbl0%40group.calendar.google.com&ctz=America%2FChicago";
@@ -297,10 +304,10 @@ const Events: React.FC<{}> = (): JSX.Element => {
             Events
           </Heading>
           <Description>
-            By participating in ACM events, you gain exposure to the many
-            fields of computer science, learn skills in important areas, and
-            gain opportunities to work with and learn about our sponsors and
-            other lucritive companies who want to hire our students.
+            By participating in ACM events, you gain exposure to the many fields
+            of computer science, learn skills in important areas, and gain
+            opportunities to work with and learn about our sponsors and other
+            lucritive companies who want to hire our students.
           </Description>
           <div style={{ display: "flex", width: "100%" }}>
             <FilterWrapper>
@@ -379,14 +386,18 @@ const Events: React.FC<{}> = (): JSX.Element => {
                 .map((event: IEvent, i: number) => {
                   return <Event {...event} key={i} />;
                 })}
+              <CalendarText>
+                {result.loading
+                  ? "Loading events... Click here to take a look at our full calendar for more details."
+                  : "We have no events scheduled with this filter. Click here to take a look at our full calendar for more details."}
+              </CalendarText>
+
               <CalendarLink
                 style={{ display: noFilteredEvents() ? "" : "none" }}
                 href={CALENDAR_LINK}
                 target="_blank"
               >
-                {result.loading
-                  ? "Loading events... Click here to take a look at our full calendar for more details."
-                  : "We have no events scheduled with this filter. Click here to take a look at our full calendar for more details."}
+                <CalendarButton>View Calendar</CalendarButton>
               </CalendarLink>
             </EventsWrapper>
           </div>
@@ -403,7 +414,7 @@ const Events: React.FC<{}> = (): JSX.Element => {
               display: noFilteredEvents() ? "none" : "",
               fontSize: "15px",
               margin: "-10px auto 0 auto",
-              paddingTop: showDefault() ? "50px" : ""
+              paddingTop: showDefault() ? "50px" : "",
             }}
             href={CALENDAR_LINK}
             target="_blank"