Merge pull request #605 from nwplus/dev

src/components/ApplicationDashboard.jsx

@@ -57,7 +57,7 @@ const EditAppButton = styled(Button)`
 `
 
 const StatusContainer = styled.div`
-  padding: 48px;
+  padding: 48px 48px 36px 48px;
   ${p => p.theme.mediaQueries.mobile} {
     padding: 2em;
   }
@@ -77,7 +77,7 @@ const AppStatusText = styled.p`
 
 const StatusBlurbText = styled.p`
   color: ${p => p.theme.colors.text};
-  font-weight: 700;
+  font-weight: 500;
   line-height: 2em;
   margin-top: 0.75em;
 `

src/components/ApplicationForm/ReviewCards.jsx

@@ -8,6 +8,8 @@ import { A, H1, P, QuestionHeading, ErrorSpan as Required } from '../Typography'
 import { FormSpacing, SubHeading } from './index'
 import { useHackerApplication } from '../../utility/HackerApplicationContext'
 import { toOtherCamelCase } from '../../utility/utilities'
+import { copyText } from '../../utility/Constants'
+import { useHackathon } from '../../utility/HackathonProvider'
 
 const ReviewContainer = styled.div`
   position: relative;
@@ -77,6 +79,10 @@ const CenterH1 = styled(H1)`
   justify-content: center;
 `
 
+const IndentedCheckbox = styled(Checkbox)`
+  margin-left: 1.5em;
+`
+
 const PortfolioInfoGroup = ({ formInputs }) => {
   return (
     <>
@@ -182,6 +188,7 @@ const getMajors = obj => Object.keys(obj).filter(key => obj[key])
 
 const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
   const { basicInfoQuestions, skillsQuestions, questionnaireQuestions } = useHackerApplication()
+  const { activeHackathon } = useHackathon()
 
   return (
     <>
@@ -303,7 +310,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
             </span>{' '}
             cmd-f 2024 is an MLH partner event. The following 3 checkboxes are for this partnership.
           </P> */}
-          <Checkbox
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.MLHCodeOfConduct}
             onChange={() =>
@@ -325,8 +332,8 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               </A>
               .<Required />
             </span>
-          </Checkbox>
-          {/* <Checkbox
+          </IndentedCheckbox>
+          {/* <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.MLHPrivacyPolicy}
             onChange={() =>
@@ -356,8 +363,8 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               </A>{' '}
               <Required />
             </span>
-          </Checkbox>
-          <Checkbox
+          </IndentedCheckbox>
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.MLHEmailSubscription}
             onChange={() =>
@@ -382,7 +389,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
             participants to trust that everyone attending belongs at cmd-f.
           </P>
 
-          <Checkbox
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.genderAcknowledgement}
             onChange={() =>
@@ -395,7 +402,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               I agree
               <Required />
             </span>
-          </Checkbox>
+          </IndentedCheckbox>
         </ContentWrapper> */}
 
         <ContentWrapper textBlock>
@@ -404,12 +411,12 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               💾
             </span>{' '}
             We use your (anonymized!) data to help you get the best sponsors and continuously
-            improve cmd-f with each iteration.
+            improve {copyText[activeHackathon].hackathonNameShort} with each iteration.
           </P>
         </ContentWrapper>
 
         <ContentWrapper textBlock>
-          <Checkbox
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.nwPlusPrivacyPolicy}
             onChange={() =>
@@ -426,8 +433,8 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               </A>
               <Required />
             </span>
-          </Checkbox>
-          <Checkbox
+          </IndentedCheckbox>
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.shareWithnwPlus}
             onChange={() =>
@@ -441,7 +448,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
               I authorize nwPlus to use my anonymized data for data reporting.
               <Required />
             </span>
-          </Checkbox>
+          </IndentedCheckbox>
         </ContentWrapper>
 
         <ContentWrapper textBlock>
@@ -456,7 +463,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
         </ContentWrapper>
 
         <ContentWrapper textBlock>
-          <Checkbox
+          <IndentedCheckbox
             flex
             checked={formInputs.termsAndConditions.shareWithSponsors}
             onChange={() =>
@@ -467,7 +474,7 @@ const ReviewCards = ({ formInputs, handleEdit, onChange }) => {
           >
             I authorize nwPlus to provide my resume and supporting documents (Github, Linkedin, etc)
             to event sponsors for recruitment purposes upon request.
-          </Checkbox>
+          </IndentedCheckbox>
         </ContentWrapper>
       </ReviewContainer>
 

src/components/HackathonCard.jsx

@@ -146,6 +146,7 @@ const Button = styled.button`
 const ApplicationStatusTextDesktop = styled(H1)`
   font-size: 1.15rem;
   font-weight: 600;
+  color: #ffffff;
 
   ${p => p.theme.mediaQueries.tabletLarge} {
     display: ${props => (props.isUpNext ? 'block' : 'none')};
@@ -158,6 +159,7 @@ const ApplicationStatusTextDesktop = styled(H1)`
 const ApplicationStatusTextMobile = styled(H1)`
   font-weight: 600;
   display: none;
+  color: #ffffff;
 
   ${p => p.theme.mediaQueries.tabletLarge} {
     display: ${props => (props.isUpNext ? 'none' : 'block')};

src/components/Input/Dropdown.jsx

@@ -64,7 +64,7 @@ const sharedStyle = css`
 
   .react-select__option:hover,
   .react-select__option--is-selected {
-    background-color: ${p => p.theme.colors.dropdown.background.selected};
+    background-color: ${p => p.theme.colors.dropdown.background.hover};
     color: white;
     border-radius: 5px;
     font-weight: bold;

src/components/Schedule/Event.jsx

@@ -10,12 +10,13 @@ import { useTheme } from 'styled-components'
 const EventDescription = styled(P)`
   opacity: 0.8;
   color: ${p => p.theme.colors.schedule.description} !important;
-  overflow: ${props => (props.expanded ? 'visible' : 'hidden')};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: ${props => (props.expanded ? 'unset' : '3')};
+  -webkit-box-orient: vertical;
   max-height: ${props => (props.expanded ? 'none' : '4.5em')};
   transition: max-height 0.3s ease;
-  display: ${props => (props.expanded ? 'block' : '-webkit-box')};
-  webkitlineclamp: ${props => (props.expanded ? 'none' : '3')};
-  webkitboxorient: 'vertical';
   ${p => p.theme.mediaQueries.mobile} {
     overflow-y: scroll;
     ${ScrollbarLike}
@@ -100,13 +101,12 @@ const StyledH3 = styled(H3)`
 const formatTime = timeString => {
   const time = new Date(timeString)
   const options = {
-    month: 'short',
-    day: 'numeric',
+    weekday: 'short',
     hour: '2-digit',
     minute: '2-digit',
     hour12: true,
   }
-  return time.toLocaleDateString('en-US', options)
+  return time.toLocaleString('en-US', options)
 }
 
 const Event = ({ event }) => {

src/components/Sidebar.jsx

@@ -15,7 +15,7 @@ import { IS_DEVICE_IOS, APPLICATION_STATUS } from '../utility/Constants'
 import { useHackathon } from '../utility/HackathonProvider'
 
 const SidebarContainer = styled.div`
-  min-width: 275px;
+  min-width: 235px;
   min-height: 100%;
   transition: opacity 1s ease-out;
   z-index: 999;
@@ -94,8 +94,8 @@ const StyledA = styled(A)`
 
 const BackLink = styled(StyledA)`
   padding-top: 32px;
-  color: ${p => p.theme.colors.text};
-  opacity: 0.75;
+  color: ${p => p.theme.colors.sidebar.textDefault};
+  opacity: 0.8;
   font-weight: 600;
 
   &:hover {

src/components/Toast.jsx

@@ -16,6 +16,7 @@ const ToastDiv = styled.div`
   right: 0;
   border-radius: 5px;
   word-break: break-word;
+  z-index: 1000;
 `
 const ToastText = styled.p`
   text-align: center;

src/components/Typography.js

@@ -95,7 +95,7 @@ export const A = styled.a.attrs(props => ({
   width: ${p => p.width || 'auto'};
   font-weight: ${p => (p.bolded ? 600 : 400)};
   border-bottom: 1px solid ${p => p.theme.colors.link};
-  color: #fff;
+  color: ${p => p.theme.colors.text};
   transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
   &:hover {
     color: ${p => p.theme.colors.linkHover};

src/containers/Countdown.jsx

@@ -12,25 +12,12 @@ export const Centered = styled.div`
   padding: 16px 0;
   z-index: 99;
 
-  position: relative;
-  width: calc(100% + 100px);
-  left: -50px;
-  top: -24px; // the parent component has a padding top of 24px
-
   background: ${p => p.theme.colors.sidebar.backgroundSecondary};
 
   ${p => p.theme.mediaQueries.tabletLarge} {
     flex-direction: column;
     padding: 0;
     width: 100%;
-
-    left: 0;
-    top: -8px; // the parent component has a padding top of 8px
-
-    background: none;
-    width: calc(100% + 40px);
-    left: -20px;
-    top: -8px;
   }
 `
 

src/containers/Landing/index.jsx

@@ -7,8 +7,9 @@ import nwplus_logo from '../../assets/nwplus_icon.svg'
 import Banner from '../../components/Banner'
 import { H1, P } from '../../components/Typography'
 import Footer from './Footer'
-import nwHacksLoginBackground from '../../../src/assets/nwHacksLogin.svg'
-import cmdfLoginBackground from '../../../src/assets/cmdf_loginbg.svg'
+import hackcampLoginBackground from '../../assets/hc_login.svg'
+import nwHacksLoginBackground from '../../assets/nwHacksLogin.svg'
+import cmdfLoginBackground from '../../assets/cmdf_loginbg.svg'
 import { useHackathon } from '../../utility/HackathonProvider'
 
 const LandingContainer = styled.div`
@@ -32,8 +33,12 @@ const StyledLogoLockup = styled.img`
   transform: translateX(-50%);
   z-index: 9999;
 
-  top: 7em;
-  height: ${p => (p.theme.name === 'hackcamp' ? '90px' : '150px')};
+  top: 128px;
+  height: ${p => (p.theme.name === 'hackcamp' ? '100px' : '150px')};
+
+  ${p => p.theme.mediaQueries.mobile} {
+    height: ${p => (p.theme.name === 'hackcamp' ? '75px' : '100px')};
+  }
 `
 
 const StyledBanner = styled(Banner)`
@@ -42,7 +47,7 @@ const StyledBanner = styled(Banner)`
     z-index: 0;
     display: block;
     padding: 0;
-    width: 75%;
+    width: 60%;
   }
 `
 
@@ -54,17 +59,13 @@ const BackgroundContainer = styled.img`
   position: fixed;
   left: 0;
   top: 0;
-  ${p => p.theme.mediaQueries.xs} {
-    height: 100vh;
-    width: auto;
-  }
 `
 
 const Landing = ({ heading, description, showFooter, children }) => {
   const { activeHackathon } = useHackathon()
 
   const options = {
-    'hackcamp': { logo: hc_logo, background: null },
+    'hackcamp': { logo: hc_logo, background: hackcampLoginBackground },
     'cmd-f': { logo: cmdf_logo, background: cmdfLoginBackground },
     'nwhacks': { logo: nwhacks_logo, background: nwHacksLoginBackground },
     'default': { logo: nwplus_logo, background: nwHacksLoginBackground },

src/pages/HackathonSelection.jsx

@@ -112,6 +112,7 @@ export default function HackathonSelection() {
         hackathonName={'HackCamp'}
         isUpNext={UP_NEXT_HACKATHON_NAME === 'HackCamp'}
         dates={applicationData.hackathonWeekends.hackcamp}
+        headerTextColour={'#ffffff'}
         planet={hc_planet}
         buttonColour={'linear-gradient(92.58deg, #0DEFE1 0%, #78FF96 100%)'}
         buttonTextColour={'#2C2543'}
@@ -138,6 +139,7 @@ export default function HackathonSelection() {
         hackathonName={'cmd-f'}
         isUpNext={UP_NEXT_HACKATHON_NAME === 'cmd-f'}
         dates={applicationData.hackathonWeekends['cmd-f']}
+        headerTextColour={'#ffffff'}
         planet={cmdf_planet}
         buttonColour={'#ffffff'}
         buttonTextColour={'#2C2543'}