Merge a918c1c into 72be08b

Author: varunthakkar1

src/components/AnnouncementCard.tsx

@@ -16,18 +16,17 @@ const CardTitle = styled(Text)`
 const AnnouncementCardCover = styled(Card)`
   cursor: pointer;
   height: fit-content;
-  min-width: 200px;
-  max-width: 400px;
+  width: 400px;
   margin: 16px 16px;
 
-  @media screen and (min-width: 800px) {
-    min-width: 400px;
-  }
-
   .cardImg {
     height: 250px;
     object-fit: cover;
   }
+
+  @media screen and (max-width: 700px) {
+    width: 85%;
+  }
 `;
 
 const DateText = styled(Text)`

src/components/EventCard.tsx

@@ -23,6 +23,10 @@ const EventsCard = styled(Card)`
     object-fit: cover;
   }
   margin: 16px 16px;
+
+  @media screen and (max-width: 700px) {
+    width: 85%;
+  }
 `;
 
 const DateText = styled(Text)`

src/components/event-details/EventDetails.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { PrivilegeLevel } from '../../auth/ducks/types';
 import { EventAnnouncement } from '../../containers/singleEvent/ducks/types';
 import { EventInformation } from '../../containers/upcoming-events/ducks/types';
+import { PRIMARY_BREAKPOINT } from '../../utils/breakpoints';
 import { DEFAULT_IMAGE } from '../../utils/copy';
 import { AnnouncementCard } from '../AnnouncementCard';
 import EventRegistrationModal from '../modals/event-registration-modal/EventRegistrationModal';
@@ -27,7 +28,7 @@ const DescriptionWrapper = styled.div`
   margin-bottom: 16px;
   height: min-content;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     width: 100%;
   }
 `;
@@ -37,7 +38,7 @@ const AnnouncementsWrapper = styled.div`
   flex-wrap: wrap;
   width: 50%;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     width: 100%;
   }
 `;
@@ -49,7 +50,7 @@ const CardContent = styled.div`
   border: 1px solid #d9d9d9;
   width: 100%;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     flex-direction: column;
     width: 100%;
   }
@@ -71,7 +72,7 @@ const SeatsRemaining = styled.div`
 const Location = styled.div`
   margin-bottom: 120px;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     margin-bottom: 40px;
   }
 `;
@@ -109,23 +110,33 @@ const ThumbnailWrapper = styled.div`
   justify-content: left;
   overflow: hidden;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     min-width: 100%;
     justify-content: center;
     margin-bottom: 16px;
+    min-height: 200px;
+    max-height: 300px;
   }
 `;
 
 const InfoWrapper = styled.div`
   display: flex;
   width: 45%;
-  margin-left: 40px;
+  padding: 0px 20px;
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     width: 100%;
   }
 `;
 
+const DescriptionTitle = styled(Title)`
+  width: 100%;
+`;
+
+const AnnouncementsTitle = styled(Title)`
+  width: 100%;
+`;
+
 const AnnouncementBox = styled.div``;
 
 const AnnouncementNoContent = styled(AnnouncementBox)``;
@@ -208,7 +219,7 @@ const EventDetails: React.FC<EventDetailsProps> = ({
       </CardWrapper>
       <BottomWrapper>
         <DescriptionWrapper>
-          <Title level={5}>Description</Title>
+          <DescriptionTitle level={5}>Description</DescriptionTitle>
           <Typography>{description}</Typography>
         </DescriptionWrapper>
         <AnnouncementsWrapper>
@@ -225,7 +236,9 @@ const EventDetails: React.FC<EventDetailsProps> = ({
                 </AnnouncementBox>
               ) : (
                 <>
-                  <Title level={5}>Updates for this Event</Title>
+                  <AnnouncementsTitle level={5}>
+                    Updates for this Event
+                  </AnnouncementsTitle>
                   <AnnouncementNoContent>
                     There are no announcements for this event
                   </AnnouncementNoContent>

src/containers/home/index.tsx

@@ -25,27 +25,46 @@ import {
   EventInformation,
   EventsReducerState,
 } from '../upcoming-events/ducks/types';
+import { PRIMARY_BREAKPOINT } from '../../utils/breakpoints';
 const { Text, Paragraph } = Typography;
 
 const LandingContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const LandingImage = styled.div`
   width: 100%;
   height: calc(95vh - 110px);
   object-fit: cover;
   background-image: url('${HOME_IMAGE}');
   background-position: center; /* Center the image */
   background-repeat: no-repeat; /* Do not repeat the image */
   background-size: cover; /* Resize the background image to cover the entire container */
+
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
+    height: 35vh;
+  }
 `;
 
 const LandingText = styled(Text)`
   font-weight: 800;
   color: ${ORANGE};
   font-size: 36px;
   line-height: 48px;
+
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
+    font-size: 24px;
+  }
 `;
 
 const LandingBodyText = styled(Paragraph)`
   font-size: 16px;
+
+  @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
+    font-size: 14px;
+  }
 `;
 
 const LandingTextContainer = styled.div`
@@ -79,6 +98,7 @@ const ViewMoreButton = styled(LinkButton)`
 
 const AdminCol = styled(Col)`
   margin-right: 10px;
+  margin-bottom: 16px;
 `;
 
 const CARD_ROW_LIMIT = 3;
@@ -104,13 +124,23 @@ const Home: React.FC<HomeContainerProps> = ({ events, announcements }) => {
   }, []);
 
   const LandingCard = styled(Card)`
-    position: relative;
-    top: 30%;
+    position: absolute;
+    top: 40%;
     left: 15%;
     width: ${privilegeLevel === PrivilegeLevel.ADMIN ? '600px' : '500px'};
     height: ${privilegeLevel === PrivilegeLevel.ADMIN ? '220px' : '280px'};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 5px;
+
+    @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
+      height: max-content;
+      position: relative;
+      width: 100%;
+      left: 0%;
+      justify-content: center;
+      border-radius: 0px;
+      box-shadow: none;
+    }
   `;
   return (
     <>
@@ -124,6 +154,7 @@ const Home: React.FC<HomeContainerProps> = ({ events, announcements }) => {
 
       {privilegeLevel === PrivilegeLevel.ADMIN ? (
         <LandingContainer>
+          <LandingImage />
           <LandingCard bordered={false}>
             <LandingTextContainer>
               <LandingText>Welcome Administrator!</LandingText>
@@ -153,6 +184,7 @@ const Home: React.FC<HomeContainerProps> = ({ events, announcements }) => {
         </LandingContainer>
       ) : (
         <LandingContainer>
+          <LandingImage />
           <LandingCard bordered={false}>
             <LandingTextContainer>
               <LandingText>
@@ -185,15 +217,13 @@ const Home: React.FC<HomeContainerProps> = ({ events, announcements }) => {
               ? events.result.slice(0, CARD_ROW_LIMIT)
               : events.result
             ).map((event: EventInformation, i) => (
-              <Col key={i}>
-                <EventCard
-                  imageSrc={event.thumbnail}
-                  title={event.title}
-                  date={event.details.start}
-                  description={event.details.description}
-                  to={`/events/${event.id}`}
-                />
-              </Col>
+              <EventCard
+                imageSrc={event.thumbnail}
+                title={event.title}
+                date={event.details.start}
+                description={event.details.description}
+                to={`/events/${event.id}`}
+              />
             ))}
           {asyncRequestIsComplete(events) && events.result.length === 0 && (
             <CenterEventsContainer>

src/containers/singleEvent/index.tsx

@@ -39,6 +39,7 @@ const CenteredContainer = styled.div`
 const AdminActionButtonList = styled.div`
   display: flex;
   flex-wrap: wrap;
+  margin-bottom: 16px;
 `;
 
 const StyledButton = styled(LinkButton)`
@@ -47,7 +48,7 @@ const StyledButton = styled(LinkButton)`
   text-align: center;
   justify-content: center;
   background-color: #2d870d;
-  margin: 0 16px 32px 0;
+  margin: 0 16px 16px 0;
   padding: 8px 16px;
 `;
 

src/utils/breakpoints.ts

@@ -0,0 +1 @@
+export const PRIMARY_BREAKPOINT = '900px';