Merge pull request #8731 from frankiefab100/upcoming-eventlist

refactor(UpcomingEventsList): update to chakra ui styling

Author: pettinarip

src/components/UpcomingEventsList.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useEffect, useState } from "react"
-import styled from "@emotion/styled"
+import { Box } from "@chakra-ui/react"
 
 // Components
 import EventCard from "./EventCard"
@@ -12,43 +12,6 @@ import Button from "./Button"
 // Data
 import events from "../data/community-events.json"
 
-const EventList = styled.div`
-  /* Adding direction ltr as a temporary fix to styling bug */
-  /* https://github.com/ethereum/ethereum-org-website/issues/6221 */
-  direction: ltr;
-  width: 100%;
-  margin: 30px auto;
-  position: relative;
-  padding: 0 10px;
-  -webkit-transition: all 0.4s ease;
-  -moz-transition: all 0.4s ease;
-  -ms-transition: all 0.4s ease;
-  transition: all 0.4s ease;
-
-  &:before {
-    content: "";
-    width: 3px;
-    height: 100%;
-    background: ${(props) => props.theme.colors.primary};
-    left: 50%;
-    top: 0;
-    position: absolute;
-  }
-
-  &:after {
-    content: "";
-    clear: both;
-    display: table;
-    width: 100%;
-  }
-`
-
-const ButtonLinkContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  max-width: 620px;
-  margin-top: 1.25rem;
-`
 
 interface ICommunityEventData {
   title: string
@@ -142,7 +105,16 @@ const UpcomingEventsList: React.FC<IProps> = () => {
 
   return (
     <>
-      <EventList>
+      <Box
+        width="100%"
+        margin="30px auto"
+        position="relative"
+        padding="0 10px"
+        transition="all 0.4s ease"
+        _before={{ content: '""', position: "absolute", width: "3px", height: "full", background: "primary", 
+          top: 0, left: "50%" }}
+        _after={{ content: '""', display: "table", width: "100%", clear: "both" }}
+        >      
         {orderedUpcomingEvents
           ?.slice(0, maxRange)
           .map(({ title, to, formattedDetails, date, location }, idx) => {
@@ -158,14 +130,19 @@ const UpcomingEventsList: React.FC<IProps> = () => {
               />
             )
           })}
-      </EventList>
-      <ButtonLinkContainer>
+      </Box>
+      <Box
+        display="flex"
+        justifyContent="center"
+        maxWidth="620px"
+        marginTop="5"
+        >
         {isVisible && (
           <Button onClick={loadMoreEvents}>
             <Translation id="page-community-upcoming-events-load-more" />
           </Button>
         )}
-      </ButtonLinkContainer>
+      </Box>
     </>
   )
 }