plate locator button size and live video modal font size update

Author: Raidakarim

feedingwebapp/src/Pages/Header/LiveVideoModal.jsx

@@ -1,5 +1,6 @@
 // React imports
 import React, { useRef } from 'react'
+import { useMediaQuery } from 'react-responsive'
 // The Modal is a screen that appears on top of the main app, and can be toggled
 // on and off.
 import Modal from 'react-bootstrap/Modal'
@@ -21,6 +22,9 @@ function LiveVideoModal(props) {
   const modalBodyRef = useRef(null)
   const margin = convertRemToPixels(1)
 
+  // Flag to check if the current orientation is portrait
+  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
+
   return (
     <Modal
       show={props.show}
@@ -34,7 +38,7 @@ function LiveVideoModal(props) {
       fullscreen={true}
     >
       <Modal.Header closeButton>
-        <Modal.Title id='contained-modal-title-vcenter' style={{ fontSize: '3vh' }}>
+        <Modal.Title id='contained-modal-title-vcenter' style={{ fontSize: isPortrait ? '3vh' : '6vh' }}>
           Live Video
         </Modal.Title>
       </Modal.Header>

feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx

@@ -40,9 +40,9 @@ const PlateLocator = (props) => {
   // done button width
   let doneButtonWidth = '47vw'
   // button height
-  let buttonHeight = '8vh'
+  let buttonHeight = isPortrait ? '6vh' : '11vh'
   // arrow button width
-  let arrowButtonWidth = '13vw'
+  let arrowButtonWidth = '16vw'
 
   /**
    * Callback function for when the user presses one of the buttons to teleop

feedingwebapp/src/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
@@ -7,20 +7,11 @@ import { View } from 'react-native'
 import { useWindowSize } from './helpers'
 
 const AppComponent = () => {
-  // set initial value of window height
-  let windowHeight = useRef(0)
-  // set a variable for storing window inner height
-  let newHeight = window.innerHeight
-  // callback function when height is resized
-  const resizeHeight = useCallback(() => {
-    windowHeight.current = newHeight
-  }, [newHeight])
-  // update window size when orienttaion changes with callback
-  useWindowSize(resizeHeight)
+  let windowSize = useWindowSize(null)
 
   return (
     <>
-      <View style={{ flex: 1, height: windowHeight.current }}>
+      <View style={{ flex: 1, height: windowSize.height }}>
         <App />
       </View>
     </>