add mobile styles

1 files changed, 40 insertions, 41 deletions

diff --git a/components/App.js b/components/App.js
index b24aead..c539e72 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react'
 import useSettings from 'hooks/useSettings'
 import useMediaQuery from 'hooks/useMediaQuery'
-import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
+import {close, toggleMin, toggleMax, move, focus} from 'helpers/windowActions'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
@@ -11,50 +11,49 @@ const App = ({children, app, setApps}) => {
   const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`);
 
   useEffect(() => {
-    move(app.name, winRef, setApps)
+    move(app, winRef, setApps)
   }, [])
 
   return (
-    <>
-      <div
-        ref={winRef}
-        className={
-          'window'
-          + (app.min ? ' hidden' : '')
-          + (app.max || forceMax ? ' maximized' : '')
-        }
-        style={{
-          height: app.height,
-          width: app.width,
-          ...app.pos.length
-            ? {top: app.pos[1], left: app.pos[0]}
-            : {
-                top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
-                left: `calc(( 100vw - ${app.width} ) / 2)`,
-            }
-        }}
-      >
-        <h2 className='window__title'>{t(app.name)}</h2>
-        <div className='window__content'>{children}</div>
-        <div className='window__title-buttons'>
-          { app.buttons.includes('min') && (
-            <span onClick={() => toggleMin(app.name, setApps)}>
-              <FontAwesomeIcon icon={faArrowUp} />
-            </span>
-          )}
-          { app.buttons.includes('max') && !forceMax && (
-            <span onClick={() => toggleMax(app.name, setApps)}>
-              <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
-            </span>
-          )}
-          { app.buttons.includes('close') && (
-            <span onClick={() => close(app.name, setApps)}>
-              <FontAwesomeIcon icon={faTimes} />
-            </span>
-          )}
-        </div>
+    <div
+      ref={winRef}
+      onClick={() => {focus(app.name, setApps)}}
+      className={
+        'window'
+        + (app.min ? ' hidden' : '')
+        + (app.max || forceMax ? ' maximized' : '')
+      }
+      style={{
+        height: app.height,
+        width: app.width,
+        ...app.pos.length
+          ? {top: app.pos[1], left: app.pos[0]}
+          : {
+              top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+              left: `calc(( 100vw - ${app.width} ) / 2)`,
+          }
+      }}
+    >
+      <h2 className='window__title'>{t(app.name)}</h2>
+      <div className='window__content'>{children}</div>
+      <div className='window__title-buttons'>
+        { app.buttons.includes('min') && (
+          <span onClick={() => toggleMin(app.name, setApps)}>
+            <FontAwesomeIcon icon={faArrowUp} />
+          </span>
+        )}
+        { app.buttons.includes('max') && !forceMax && (
+          <span onClick={() => toggleMax(app.name, setApps)}>
+            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
+          </span>
+        )}
+        { app.buttons.includes('close') && (
+          <span onClick={() => close(app.name, setApps)}>
+            <FontAwesomeIcon icon={faTimes} />
+          </span>
+        )}
       </div>
-    </>
+    </div>
   )
 }