test

live-site/components/coming-up/ComingUp.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { fonts, H3, P } from '../../../shared-ui/style/typography';

live-site/components/coming-up/no-upcoming/NoUpcoming.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { H2 } from '../../../../shared-ui/style/typography';

live-site/components/event-schedule-section/EventScheduleSection.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { H3, P } from '../../../shared-ui/style/typography';

live-site/components/event-schedule-section/event-item-tag/EventItemTag.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { P } from '../../../../shared-ui/style/typography';

live-site/components/event-schedule-section/event-item/EventItem.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { H3, P } from '../../../../shared-ui/style/typography';

live-site/components/event-schedule-section/event-schedule-tab/EventScheduleTab.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { P } from '../../../../shared-ui/style/typography';

live-site/components/feedback-join-core-section/FeedbackJoinCoreSection.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { fonts } from '../../../shared-ui/style/typography';
 import { colors } from '../../../shared-ui/style/colors';
 import { P } from '../../../shared-ui/style/typography';

live-site/components/hacking-remaning/HackingRemaining.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { P } from '../../../shared-ui/style/typography';
 import { colors } from '../../../shared-ui/style/colors';
 

live-site/components/judging-section/judging-schedule-table/JudgingScheduleTable.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { fonts } from '../../../../shared-ui/style/typography';

live-site/components/judging-section/judging-schedule-welcome/JudgingScheduleWelcome.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { H2 } from '../../../../shared-ui/style/typography';
 import { colors } from '../../../../shared-ui/style/colors';
 import { max } from '../../../../shared-ui/lib/responsive';

live-site/components/judging-section/judging-selection/JudgingSelection.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { min, max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { H2 } from '../../../../shared-ui/style/typography';

live-site/components/mentors-section/MentorsSection.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max, min } from '../../../shared-ui/lib/responsive';
 import { H3 } from '../../../shared-ui/style/typography';
 import { colors } from '../../../shared-ui/style/colors';

live-site/components/mentors-section/mentor-popup/MentorPopup.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../../../shared-ui/style/colors';
 import { max } from '../../../../shared-ui/lib/responsive';
 

live-site/components/resources-section/ResourcesSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { fonts, H3 } from '../../../shared-ui/style/typography';
 

live-site/components/resources-section/resource-box/ResourceBox.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { fonts } from '../../../../shared-ui/style/typography';
 import { colors } from '../../../../shared-ui/style/colors';

live-site/components/welcome-section/WelcomeSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max, min } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { P, H3 } from '../../../shared-ui/style/typography';

live-site/components/welcome-section/team-race/Team.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { H3, P } from '../../../../shared-ui/style/typography';
 import { colors } from '../../../../shared-ui/style/colors';
 import { max } from '../../../../shared-ui/lib/responsive';

live-site/styled-components/SecondarySelect.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { min } from '../../shared-ui/lib/responsive';
 import { colors } from '../../shared-ui/style/colors';
 import { fonts } from '../../shared-ui/style/typography';

main-site/components/about-section/AboutSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { H2, H3, P } from '../../../shared-ui/style/typography';
 import { min } from '../../../shared-ui/lib/responsive';
 

main-site/components/adventure-ahead-section/AdventureAheadSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { P } from '../../../shared-ui/style/typography';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';

main-site/components/covid-section/CovidSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { P } from '../../../shared-ui/style/typography';
 import { min } from '../../../shared-ui/lib/responsive';
 import { H2 } from '../../../shared-ui/style/typography';

main-site/components/events-calendar-section/EventsCalendarSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max, min } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { fonts, H2, P } from '../../../shared-ui/style/typography';

main-site/components/explore-section/ExploreSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../../shared-ui/style/colors';
 import { P } from '../../../shared-ui/style/typography';
 import { min, max } from '../../../shared-ui/lib/responsive';

main-site/components/faq-section/FaqSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { H4 } from '../../../shared-ui/style/typography';

main-site/components/faq-section/faq-item/FaqItem.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../../../shared-ui/style/colors';
 import { H4, P } from '../../../../shared-ui/style/typography';
 import { max } from '../../../../shared-ui/lib/responsive';

main-site/components/faq-section/faq/Faq.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 

main-site/components/landing-section/LandingSection.styles.ts

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import PrimaryButton from '../../../shared-ui/components/primary-button/PrimaryButton';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';

main-site/components/location-time-section/LocationDateSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { StyledLocationSectionProps } from '../../../shared-ui/lib/types';
 import { colors } from '../../../shared-ui/style/colors';

main-site/components/past-photos-section/PastPhotosSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 
 const StyledPhotosSection = styled.div`

main-site/components/past-projects-section/PastProjectsSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../../shared-ui/style/colors';
 import { H2, P } from '../../../shared-ui/style/typography';
 import { max } from '../../../shared-ui/lib/responsive';

main-site/components/sponsors-section/SponsorsSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { H2, H4 } from '../../../shared-ui/style/typography';

main-site/components/testimonials-section/TestimonialsSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledTestimonialsSectionContainer = styled.div`
   text-align: center;

main-site/components/testimonials-section/testimonial-card/TestimonialCard.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { H4, P } from '../../../../shared-ui/style/typography';

main-site/components/testimonials-section/testimonials/Testimonials.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../shared-ui/lib/responsive';
 import { colors } from '../../../../shared-ui/style/colors';
 import { fonts } from '../../../../shared-ui/style/typography';

main-site/src/page-styles/code-of-conduct.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../../shared-ui/style/colors';
 import { H2, P } from '../../../shared-ui/style/typography';
 import { max } from '../../../shared-ui/lib/responsive';

main-site/src/pages/index.tsx

@@ -46,7 +46,7 @@ const IndexPage: React.FC = () => {
   if (isLoading) {
     return null;
   }
-
+  // hi
   return (
     <StyledPageContainer className={getBackgroundClassName()}>
       <Header tabs={mainSiteTabInfo} isDay={isDay} />

package.json

@@ -45,6 +45,8 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "11.10.6",
     "babel-plugin-styled-components": "^2.0.7",
     "framer-motion": "^7.10.0",
     "gatsby-plugin-mailchimp": "^5.2.2",

shared-ui/components/404/404.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { fonts, H1, H4 } from '../../style/typography';
 import { colors } from '../../style/colors';
 import { max } from '../../lib/responsive';

shared-ui/components/arrow/Arrow.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledArrow = styled.img`
   z-index: 5;

shared-ui/components/footer/Footer.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { min, max } from '../../../shared-ui/lib/responsive';
 import { StyledFooterProps } from '../../lib/types';
 import { colors } from '../../style/colors';

shared-ui/components/header/Header.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max, min } from '../../lib/responsive';
 import { StyledHeaderProps } from '../../lib/types';
 import { colors } from '../../style/colors';

shared-ui/components/mailing-list-signup/MailingListSignup.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { P } from '../../style/typography';
 
 const StyledMailingMessage = styled(P)`

shared-ui/components/meet-the-team/MeetTheTeamSection.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledMeetTheTeamSection = styled.div`
   padding-top: 12em, 0;

shared-ui/components/meet-the-team/meet-all-core/MeetAllCore.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { P, H3 } from '../../../style/typography';
 import { colors } from '../../../style/colors';
 import { max, min } from '../../../lib/responsive';

shared-ui/components/meet-the-team/team-column/desktop-team-column/DesktopTeamColumn.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../lib/responsive';
 
 const StyledTeamColumn = styled.div`

shared-ui/components/meet-the-team/team-column/mobile-team-column/MobileTeamColumn.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../../../lib/responsive';
 
 const StyledMobileTeamColumn = styled.div`

shared-ui/components/meet-the-team/tooltip/ToolTip.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { team } from '../../../lib/data';
 import { max } from '../../../lib/responsive';
 import { StyledToolTipProps } from '../../../lib/types';

shared-ui/components/primary-button/PrimaryButton.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { colors } from '../../style/colors';
 import { fonts } from '../../style/typography';
 import { min } from '../../lib/responsive';

shared-ui/components/secondary-button/SecondaryButton.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../lib/responsive';
 import { StyledSecondaryButtonProps } from '../../lib/types';
 import { colors } from '../../style/colors';

shared-ui/components/time-remaining/TimeRemaining.styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../lib/responsive';
 import { colors } from '../../style/colors';
 import { fonts, H2, P } from '../../style/typography';

shared-ui/components/toggle-mode/ToggleMode.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { max } from '../../lib/responsive';
 
 const ToggleContainer = styled.div.attrs(

shared-ui/style/typography.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { min } from '../lib/responsive';
 import { colors } from './colors';
 

shared-ui/styled-components/Background.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledBackgrounds = styled.img`
   width: 100%;