Merge branch 'mhacks13'

app/pages/edit_profile.jsx

@@ -120,7 +120,7 @@ class EditProfile extends React.Component {
                         another one by clicking{' '}
                         <Link
                             onClick={this.onClickRequestEmailVerification}
-                            color={this.props.theme.secondary}
+                            color={this.props.theme.highlightSecondary}
                         >
                             here
                         </Link>

app/pages/home/apply.jsx

@@ -49,6 +49,7 @@ const StyledNavLinkWrapper = styled.div`
 const ApplyBoxText = styled(SectionHeader)`
     color: ${theme.secondary};
     padding: 0 10px;
+    text-transform: none;
 
     ${devices.tiny`
         font-size: 20px;
@@ -108,9 +109,9 @@ class Apply extends React.Component {
                             ) : (
                                 <StyledNavLink
                                     to={routes.LOGIN}
-                                    color={this.props.theme.highlight}
+                                    color={this.props.theme.highlightSecondary}
                                 >
-                                    Login
+                                    {is_application_open ? 'Register' : 'Login'}
                                 </StyledNavLink>
                             )}
                         </StyledNavLinkWrapper>

app/pages/home/hacking_categories.jsx

@@ -5,13 +5,11 @@ import { devices } from '../../styles';
 import theme from '../../styles/theme';
 
 const Images = {
-    'AI/ML': require('../../../static/m12/cortices/ai.svg'),
-    'Android <br />Development': require('../../../static/m12/cortices/android.svg'),
-    'AR/VR': require('../../../static/m12/cortices/vr.svg'),
-    'Game <br />Development': require('../../../static/m12/cortices/game.svg'),
-    Hardware: require('../../../static/m12/cortices/hardware.svg'),
-    'iOS <br />Development': require('../../../static/m12/cortices/ios.svg'),
-    'Web <br />Development': require('../../../static/m12/cortices/web.svg')
+    'Social Justice': require('../../../static/m13/subtracks/SocialJustice.png'),
+    Professional: require('../../../static/m13/subtracks/Professional.png'),
+    Educational: require('../../../static/m13/subtracks/Educational.png'),
+    Social: require('../../../static/m13/subtracks/Social.png'),
+    Medical: require('../../../static/m13/subtracks/Medical.png')
 };
 
 const Wrapper = styled.div`
@@ -36,12 +34,13 @@ const Container = styled.div`
 
 const SectionHeader = styled.h2`
     display: block;
-    font-size: 48px;
+    font-size: 30px;
     font-weight: 900;
     margin: 0px 20px 20px 20px;
     min-width: 100%;
     text-align: center;
     color: ${theme.highlight};
+    text-transform: uppercase;
 `;
 
 const Flexbox = styled.div`
@@ -73,7 +72,7 @@ const Caption = styled.p`
     display: block;
     font-size: 16px;
     text-align: center;
-    color: ${theme.primary};
+    color: ${theme.highlightSecondary};
 `;
 
 class HackingCategories extends React.Component {
@@ -82,7 +81,7 @@ class HackingCategories extends React.Component {
             <Wrapper style={{ backgroundColor: this.props.backgroundColor }}>
                 <Container>
                     <Flexbox>
-                        <SectionHeader>Hacking Cortices</SectionHeader>
+                        <SectionHeader>Subtracks</SectionHeader>
                         {Object.keys(Images).map(function(name, index) {
                             return (
                                 <Flex1 key={index}>

app/pages/home/hero.jsx

@@ -38,13 +38,14 @@ const LeftSideContainer = styled.div`
 `;
 
 const Text = styled.h2`
-    font-size: 42px;
+    font-size: 30px;
     font-weight: 900;
     margin-bottom: 0;
     text-align: center;
     color: ${props => props.color};
+    text-transform: uppercase;
     ${devices.desktop`
-        font-size: 42px;
+        font-size: 30px;
         margin: -50px 15px 25px 0;
         text-align: left;
     `};

app/pages/home/landing.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import { devices } from '../../styles';
+// import { devices } from '../../styles';
 
 import Apply from './apply.jsx';
 
 // import Cover from 'react-video-cover';
+const BackgroundVideo = require('../../../static/m13/background.mp4');
 const LandingBackground = require('../../../static/m13/landing.png');
-const LandingLogo = require('../../../static/m12/logo-landing.png');
+// const LandingLogo = require('../../../static/m12/logo-landing.png');
 
 const Wrapper = styled.div`
     background: ${props => props.theme.primary};
@@ -34,18 +35,18 @@ const InnerContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
 `;
 
-const Logo = styled.div`
-    height: auto;
+// const Logo = styled.div`
+//     height: auto;
 
-    ${devices.tiny`
-        width: 100vw;
-    `} ${devices.small`
-        width: 70vw;
-    `};
-`;
+//     ${devices.tiny`
+//         width: 100vw;
+//     `} ${devices.small`
+//         width: 70vw;
+//     `};
+// `;
 
 const ApplyBox = styled.div`
     width: 100%;
@@ -80,7 +81,7 @@ class Landing extends React.Component {
         //     src: BackgroundVideo,
         //     autoPlay: true,
         //     muted: true,
-        //     loop: true,
+        //     loop: false,
         //     playsInline: true
         // };
 
@@ -95,12 +96,30 @@ class Landing extends React.Component {
                         alt="Major League Hacking 2020 Hackathon Season"
                     />
                 </MLHBanner>
-                <Container>
-                    <img src={LandingBackground} style={{ height: '100vh' }} />
+                <Container style={{ height: '100vh' }}>
+                    <img
+                        src={LandingBackground}
+                        style={{
+                            zIndex: '2',
+                            height: '100%',
+                            width: '100%',
+                            objectFit: 'cover'
+                        }}
+                    />
                     <InnerContainer>
-                        <Logo>
-                            <img src={LandingLogo} style={{ width: '100%' }} />
-                        </Logo>
+                        <video
+                            src={BackgroundVideo}
+                            autoPlay
+                            muted
+                            playsInline
+                            style={{
+                                zIndex: '1',
+                                maxHeight: '35vh',
+                                maxWidth: '90vw',
+                                height: 'auto',
+                                width: 'auto'
+                            }}
+                        />
                         <ApplyBox>
                             <Apply />
                         </ApplyBox>

app/pages/home/section_components.jsx

@@ -30,6 +30,7 @@ const SectionHeader = styled.h2`
     text-align: center;
     color: ${theme.highlight};
     padding-top: 50px;
+    text-transform: uppercase;
 
     ${devices.tiny`
         font-size: 32px;

app/styles/theme.js

@@ -35,7 +35,7 @@ function hexToRgbA(hex, opq) {
 let theme = {
     // Color primitives
     primaryFont: 'FFDINWebProRegular',
-    primary: '#0A192E',
+    primary: '#081A33',
     secondary: '#FFFBF1',
     highlight: '#9CB9C7',
     highlightSecondary: '#ACDD8F',