Merge branch 'dev' into peer-judging-changes

src/components/BackgroundImage.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import hackcamp2023bg from '../assets/hc2023mainbg.png'
+import hackcamp2023noobjectsbg from '../assets/hc2023noobjectsbg.png'
+
+const Hackcamp2023Background = styled.div`
+  position: fixed;
+  background-image: URL(${hackcamp2023bg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-width: calc(100% - 265px);
+  min-height: 100%;
+  z-index: -1;
+  top: 0;
+  left: 270px;
+
+  ${p => p.theme.mediaQueries.mobile} {
+    left: 0px;
+    min-width: 100%;
+  }
+`
+
+const Hackcamp2023NoObjectsBackground = styled.div`
+  position: fixed;
+  background-image: URL(${hackcamp2023noobjectsbg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-width: calc(100% - 265px);
+  min-height: 100%;
+  z-index: -1;
+  top: 0;
+  left: 270px;
+
+  ${p => p.theme.mediaQueries.mobile} {
+    left: 0px;
+    min-width: 100%;
+  }
+`
+
+const Hackcamp2023BG = ({ version }) => {
+  if (version === 'noObjects') {
+    return <Hackcamp2023NoObjectsBackground />
+  } else {
+    return <Hackcamp2023Background />
+  }
+}
+
+export default Hackcamp2023BG

src/components/Faq.js

@@ -3,6 +3,7 @@ import Accordion from '../components/Accordion'
 import { H2 } from './Typography'
 import { DetailContainer, DetailColumn, DetailAnswer } from './Common'
 import { chunkify } from '../utility/utilities'
+import Hackcamp2023BG from '../components/BackgroundImage'
 
 const COLUMNS_OF_FAQ = 2
 
@@ -15,6 +16,7 @@ export default ({ faq }) => {
   const createFAQList = entries => {
     return (
       <DetailContainer>
+        <Hackcamp2023BG />
         {chunkify(entries, COLUMNS_OF_FAQ, true).map((half, i) => (
           <DetailColumn key={i}>{half.map(singleEntry)}</DetailColumn>
         ))}

src/components/Judging/JudgingCard.js

@@ -6,6 +6,7 @@ import { CardLike } from '../Common.js'
 import { Button } from '../Input/Button'
 import { MAX_CHARACTERS_IN_DESCRIPTION } from '../../utility/Constants'
 import { cutString } from '../../utility/utilities'
+import Hackcamp2023BG from '../../components/BackgroundImage'
 
 const StyledCard = styled.div`
   ${CardLike};
@@ -68,6 +69,7 @@ export default ({
 }) => {
   return (
     <StyledCard className={className}>
+      <Hackcamp2023BG version="noObjects" />
       <a href={href}>
         <StyledImg alt={title} src={imgUrl} />
       </a>

src/components/Judging/Submission.js

@@ -5,6 +5,8 @@ import { Card, CardWithHeader } from '../Common'
 import { Button } from '../Input'
 import { H1, H3, P } from '../Typography'
 import JudgingCard from './JudgingCard'
+import { JUDGING_RUBRIC } from '../../utility/Constants'
+import Hackcamp2023BG from '../../components/BackgroundImage'
 
 const ItemList = styled.ul`
   list-style: none;
@@ -102,6 +104,7 @@ export default ({ project, reportCallback }) => {
 
   return (
     <>
+      <Hackcamp2023BG version="noObjects" />
       <H1>Project Submission</H1>
       <H3>Team Members: {project?.teamMembers?.map(member => member.name).join(', ')}</H3>
       <H3>

src/components/Judging/SubmissionForm.js

@@ -12,6 +12,7 @@ import { findElement } from '../../utility/utilities'
 import { Button, Dropdown, Select, TextArea, TextInput } from '../Input'
 import Toast from '../Toast'
 import { A, ErrorMessage, H1, H3, Label, P, ErrorSpan as Required } from '../Typography'
+import Hackcamp2023BG from '../../components/BackgroundImage'
 
 const FormSection = styled.div`
   display: flex;
@@ -279,6 +280,8 @@ export default ({
 
   return (
     <div>
+      <Hackcamp2023BG version="noObjects" />
+
       <H1>Project Submission</H1>
       <FormSection>
         <div>

src/components/Judging/ViewProject.js

@@ -5,6 +5,7 @@ import { Select, Button, TextArea } from '../Input'
 // import Youtube from '../Youtube'
 import { Card } from '../Common'
 import { JUDGING_RUBRIC } from '../../utility/Constants'
+import Hackcamp2023BG from '../../components/BackgroundImage'
 
 const Container = styled.div`
   display: flex;
@@ -103,6 +104,8 @@ export default ({ project, score, error, success, isSubmitting, onChange, onSubm
     : ''
   return (
     <Container>
+      <Hackcamp2023BG version="noObjects" />
+
       <JudgingColumn>
         <H2>Judging "{project.title}"</H2>
         <Card>
@@ -128,7 +131,11 @@ export default ({ project, score, error, success, isSubmitting, onChange, onSubm
         <H2>Scorecard</H2>
         <StyledP>
           For a full break-down on the rubric, please refer to the Judging Guide on the{' '}
-          <ExternalLink target="_blank" rel="noreferrer noopener" href="https://www.notion.so/nwplus/Judging-Rubric-2023-026e041c729d48ca8c75efa63d430c42">
+          <ExternalLink
+            target="_blank"
+            rel="noreferrer noopener"
+            href="https://www.notion.so/nwplus/Judging-Rubric-2023-026e041c729d48ca8c75efa63d430c42"
+          >
             Hacker Package
           </ExternalLink>
           !

src/components/Schedule/Schedule.js

@@ -6,6 +6,7 @@ import { TimelineColumn } from './Timeline'
 import { TagLegend } from './Tag'
 import Event from './Event'
 import { H1 } from '../Typography'
+import Hackcamp2023BG from '../../components/BackgroundImage'
 
 // Rotation transformation is done to make the scroll bar on top
 const ScrollableContainer = styled.div`
@@ -140,6 +141,8 @@ export default ({ events, hackathonStart, hackathonEnd }) => {
 
   return (
     <ScheduleContainer header="Day-Of-Events Schedule">
+      <Hackcamp2023BG />
+
       <TagLegend />
       <ScrollableContainer>
         <ScheduleFlexContainer>

src/components/Sidebar.js

@@ -10,6 +10,7 @@ import { Button } from './Input/index'
 import { useAuth } from '../utility/Auth'
 import { hackerStatuses } from './ApplicationDashboard'
 import { getSponsors } from '../utility/firebase'
+import sidebarBackground from '../assets/hc2023sidebarbg.png'
 // import poweredBy from '../assets/powered_by_livepeer.svg'
 // import covalent from '../assets/sponsors/covalent.png'
 // import hootsuite from '../assets/sponsors/hootsuite.png'
@@ -28,6 +29,18 @@ const SidebarContainer = styled.div`
     ${p => (p.showMobileSidebar ? 'visibility: visible' : 'visibility: hidden; display: none')};
   }
 `
+
+const SidebarBackGroundImage = styled.div`
+  position: fixed;
+  background-image: URL(${sidebarBackground});
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-width: 280px;
+  min-height: 100%;
+  z-index: -1;
+  left: -2px;
+`
+
 const chooseLogo = hackathon => {
   switch (hackathon) {
     case 'hackCamp':
@@ -68,6 +81,7 @@ const ItemsContainer = styled.div`
 `
 
 /* Old styles
+  background: ${p => p.theme.colors.secondaryBackground};
   color: ${p =>
     p.theme.name !== 'cmdf' && p.selected ? p.theme.colors.primary : p.theme.colors.highlight};
   ${p => p.selected && `background: ${p.theme.colors.secondaryBackgroundTransparent};`}
@@ -85,7 +99,7 @@ const StyledA = styled(A)`
   font-weight: bold;
   padding: 1em 50px 1em 2rem;
   border-bottom: none;
-  background: ${p => p.theme.colors.secondaryBackground};
+  background: transparent;
 
   color: ${p => p.theme.colors.sidebar.link};
 
@@ -269,6 +283,8 @@ export default ({
 
   return (
     <SidebarContainer showMobileSidebar={showMobileSidebar}>
+      <SidebarBackGroundImage />
+
       <LogoContainer>
         <Logo alt="logo" />
         {/* <SponsorIcon src={poweredBy} alt="powered by Livepeer" /> */}

src/components/SponsorLogos.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import Hackcamp2023BG from '../components/BackgroundImage'
 
 const SponsorListContainer = styled.div`
   display: flex;
@@ -52,6 +53,7 @@ export default ({ sponsors }) => {
     const imgWidth = maxSponsorWidth * (1 - 0.1 * tierRanks[entry.tier.toLowerCase()])
     return (
       <SponsorContainer key={i}>
+        <Hackcamp2023BG />
         <a href={entry.link}>
           <SponsorImage src={entry.imgURL} alt={entry.imgName} width={imgWidth} />
         </a>

src/components/Typography.js

@@ -29,6 +29,7 @@ export const H3 = styled.h3`
   font-weight: ${p => p.theme.typography.h3.weight};
   font-size: ${p => p.theme.typography.h3.size};
   opacity: ${p => p.theme.typography.h3.opacity};
+  color: #ffbf76;
 `
 
 export const P = styled.p`
@@ -121,11 +122,12 @@ export const QuestionHeading = styled.p`
   font-weight: 600;
   text-transform: uppercase;
 `
-
+// old style   color: ${p => (p.color ? p.color : p.theme.colors.primary)};
 export const Label = styled.label`
-  color: ${p => (p.color ? p.color : p.theme.colors.primary)};
+  color: #ffbf76;
   font-weight: 600;
   text-transform: uppercase;
+  font-weight: bold;
 `
 
 export const CenteredH1 = styled(H1)`

src/containers/GalleryPage.js

@@ -4,6 +4,7 @@ import JudgingCard from '../components/Judging/JudgingCard'
 import Pagination, { getClickedPageIndex } from '../components/Pagination'
 import { H2 } from '../components/Typography'
 import { getYoutubeThumbnail } from '../utility/utilities'
+import Hackcamp2023BG from '../components/BackgroundImage'
 
 const ProjectPageWrapper = styled.div`
   width: 100%;
@@ -72,6 +73,8 @@ export function GalleryPage({ projects, startingPageIndex = 0 }) {
   }
   return (
     <ProjectPageWrapper>
+      <Hackcamp2023BG version="noObjects" />
+
       {currPageProjects.length === 0 ? (
         <H2>No projects found :(</H2>
       ) : (

src/pages/Home.js

@@ -7,6 +7,7 @@ import styled, { withTheme } from 'styled-components'
 import head_decal from '../assets/cmdf_bannerdecal.svg'
 import QrCode from '../components/QrCode'
 import { useAuth } from '../utility/Auth'
+import Hackcamp2023BG from '../components/BackgroundImage'
 
 const HomeContainer = styled.div`
   height: 100%;
@@ -30,6 +31,7 @@ export default withTheme(({ announcements, theme }) => {
   return (
     <HomeContainer>
       {theme.name === 'cmdf' && <TopDecal src={head_decal} />}
+      {theme.name === 'hackCamp' && <Hackcamp2023BG />}
       <HackerCountdown />
       <Livestream />
       {/*