DRAFT PR

src/App.css

@@ -1,6 +1,6 @@
-.App {
-  margin: 0 auto;
-  max-width: 575px;
-  width: 100%;
-  /* ^^ Temporary constraint so it's mobile view all the time, will remove for tablet/desktop view once we get it */
-}
+.App {
+  margin: 0 auto;
+  max-width: 700px;
+  width: 100%;
+  /* ^^ Temporary constraint so it's mobile view all the time, will remove for tablet/desktop view once we get it */
+}

src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import "./App.css";
 import HomePage from "./organisms/HomePage";
 import CategoryPage from "./organisms/CategoryPage";
@@ -62,6 +62,18 @@ const App = () => {
     }
   }, []);
 
+  // useEffect(() => {
+  //   document.getElementById("appContainer").addEventListener(
+  //     "click",
+  //     function() {
+  //       document.documentElement.requestFullscreen();
+  //       screen.orientation.lock("natural");
+  //     },
+  //     false
+  //   );
+  //   console.log(window.screen.orientation.type);
+  // }, []);
+
   const toggleShutterPress = () => {
     return setShutterPress(!shutterPress);
   };
@@ -72,7 +84,7 @@ const App = () => {
 
   return (
     <ThemeProvider theme={themeMode}>
-      <div className="App">
+      <div className="App" id="appContainer">
         <GlobalStyles />
 
         <Switch>

src/molecules/BottomNav.jsx

@@ -7,7 +7,7 @@ import { Link, useLocation, useHistory } from "react-router-dom";
 import cameraImg from "../images/camera_center_icon.svg";
 
 const Container = styled.div`
-  max-width: 573px;
+  max-width: 697px;
   width: 100vw;
   height: 56px;
 
@@ -105,7 +105,7 @@ const InnerContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   position: relative;
-  max-width: 575px;
+  max-width: 700px;
 `;
 
 const CameraButton = styled.button`

src/molecules/CameraNav.jsx

@@ -10,7 +10,7 @@ import cameraBtnImgDarkMode from "../images/camera_icon_camera.svg";
 import cameraBtnImgLightMode from "../images/camera_icon_camera_light.svg";
 
 const Container = styled.div`
-  max-width: 575px;
+  max-width: 700px;
   width: 100vw;
   height: 56px;
 
@@ -41,7 +41,7 @@ const InnerContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   position: relative;
-  max-width: 573px;
+  max-width: 693px;
 `;
 
 const CameraImage = styled.img`

src/organisms/ClusterPage.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { useHistory } from "react-router-dom";
 import GridCard from "../molecules/GridCard";
-import placeholderImg from "../images/category_placeholder.svg";
+import placeholderImg from "../images/category_placeholder.png";
 
 const Root = styled.div``;
 

src/organisms/HomePage.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import HomeSearchBar from "../molecules/HomeSearchBar";
 import CategoryGrid from "../molecules/CategoryGrid";
 import styled from "styled-components";
@@ -16,8 +16,19 @@ const TopContainer = styled.div`
 `;
 
 const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => {
+  useEffect(() => {
+    document.getElementById("homeContainer").addEventListener(
+      "click",
+      function() {
+        document.documentElement.requestFullscreen();
+        screen.orientation.lock("natural");
+      },
+      false
+    );
+  }, []);
+
   return (
-    <Container onClick={() => toggleSearchFocus(false)}>
+    <Container id="homeContainer" onClick={() => toggleSearchFocus(false)}>
       <TopContainer>
         <HomeSearchBar
           searchFocus={searchFocus}

src/organisms/TutorialPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { withTheme } from "styled-components";
 import Stepper from "../molecules/Stepper";
 import styled from "styled-components";
@@ -145,6 +145,19 @@ export const TutorialPage = ({ theme }) => {
   const [step, setStep] = useState(1);
   const history = useHistory();
 
+  useEffect(() => {
+    if (step === 3) {
+      document.getElementById("button").addEventListener(
+        "click",
+        function() {
+          document.documentElement.requestFullscreen();
+          screen.orientation.lock("natural");
+        },
+        false
+      );
+    }
+  }, [step]);
+
   const handleNext = () => {
     switch (step) {
       case 3: {
@@ -177,7 +190,7 @@ export const TutorialPage = ({ theme }) => {
     <Container>
       {renderPage(step, theme)}
       <Stepper amount={3} currentStep={step} />
-      <Button marginTop="75" marginBottom="70" onClick={handleNext}>
+      <Button id="button" marginTop="75" marginBottom="70" onClick={handleNext}>
         Next
       </Button>
     </Container>