From b85507838e99bc48cc6ef59b268df20256f01bf4 Mon Sep 17 00:00:00 2001 From: DonaldKLee Date: Mon, 18 Nov 2024 17:44:25 -0800 Subject: [PATCH] mobile login --- src/assets/nwHacksMobileLogin.svg | 626 ++++++++++++++++++++++++++++++ src/containers/Landing/index.jsx | 38 +- 2 files changed, 657 insertions(+), 7 deletions(-) create mode 100644 src/assets/nwHacksMobileLogin.svg diff --git a/src/assets/nwHacksMobileLogin.svg b/src/assets/nwHacksMobileLogin.svg new file mode 100644 index 00000000..c3e7e542 --- /dev/null +++ b/src/assets/nwHacksMobileLogin.svg @@ -0,0 +1,626 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/containers/Landing/index.jsx b/src/containers/Landing/index.jsx index fac1fa12..69db7c74 100644 --- a/src/containers/Landing/index.jsx +++ b/src/containers/Landing/index.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import styled from 'styled-components' import cmdf_logo from '../../assets/cmdf_logo.png' import hc_logo from '../../assets/hc_logo.svg' @@ -9,6 +9,7 @@ import { H1, P } from '../../components/Typography' import Footer from './Footer' import hackcampLoginBackground from '../../assets/hc_login.svg' import nwHacksLoginBackground from '../../assets/nwHacksLogin.svg' +import nwHacksMobileLoginBackground from '../../assets/nwHacksMobileLogin.svg' import cmdfLoginBackground from '../../assets/cmdf_loginbg.svg' import { useHackathon } from '../../utility/HackathonProvider' @@ -63,19 +64,42 @@ const BackgroundContainer = styled.img` const Landing = ({ heading, description, showFooter, children }) => { const { activeHackathon } = useHackathon() + const [isMobile, setIsMobile] = useState(window.innerWidth <= 600) + + useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth <= 600) + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) const options = { - '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 }, + 'hackcamp': { + logo: hc_logo, + background: hackcampLoginBackground, + mobileBackground: hackcampLoginBackground, + }, + 'cmd-f': { + logo: cmdf_logo, + background: cmdfLoginBackground, + mobileBackground: cmdfLoginBackground, + }, + 'nwhacks': { + logo: nwhacks_logo, + background: nwHacksLoginBackground, + mobileBackground: nwHacksMobileLoginBackground, + }, + 'default': { + logo: nwplus_logo, + background: nwHacksLoginBackground, + mobileBackground: nwHacksMobileLoginBackground, + }, } - const { logo, background } = options[activeHackathon] || options.default + const { logo, background, mobileBackground } = options[activeHackathon] || options.default return ( - {background && } + {background && }

{heading}