feat: Add Settings modal.

package.json

@@ -9,10 +9,10 @@
     "help": "nps --scripts"
   },
   "devDependencies": {
-    "@babel/node": "^7.10.3",
-    "@darkobits/ts-unified": "^5.1.3",
-    "@types/jest": "^26.0.3",
-    "@types/node": "^14.0.14",
+    "@babel/node": "^7.10.5",
+    "@darkobits/ts-unified": "^5.2.1",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.6.4",
     "lerna": "^3.22.1",
     "nps-utils": "^1.7.0"
   }

packages/backend/package.json

@@ -13,9 +13,9 @@
     "@awspilot/dynamodb": "^2.0.0",
     "@darkobits/env": "^1.3.1",
     "aws-sdk": "^2.707.0",
-    "axios": "^0.19.0",
+    "axios": "^0.20.0",
     "chalk": "^4.0.0",
-    "is-plain-object": "^3.0.1",
+    "is-plain-object": "^4.1.1",
     "ramda": "^0.27.0"
   },
   "devDependencies": {
@@ -29,7 +29,7 @@
     "read-pkg-up": "^7.0.0",
     "serverless": "^1.74.1",
     "serverless-domain-manager": "^4.1.1",
-    "serverless-dotenv-plugin": "^2.0.1",
+    "serverless-dotenv-plugin": "^3.0.0",
     "serverless-webpack": "^5.2.0",
     "source-map-support": "^0.5.19",
     "webpack": "^4.41.2"

packages/client/package.json

@@ -10,18 +10,22 @@
     "url": "git+https://github.com/darkobits/inspirat.git"
   },
   "dependencies": {
-    "axios": "^0.19.0",
+    "axios": "^0.20.0",
+    "bootstrap": "^4.5.2",
     "boxen": "^4.2.0",
     "chalk": "^4.0.0",
     "date-fns": "^2.14.0",
-    "linaria": "^1.4.0-beta.10",
+    "jquery": "^3.5.1",
+    "linaria": "^2.0.0-alpha.1",
     "localforage": "^1.7.2",
     "mousetrap": "^1.6.2",
     "ms": "^2.1.1",
     "polished": "^3.4.2",
+    "popper.js": "^1.16.1",
     "query-string": "^6.9.0",
     "ramda": "^0.27.0",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.3.0",
     "react-dom": "^16.12.0",
     "shuffle-seed": "^1.1.6",
     "url-parse-lax": "^4.0.0",
@@ -47,29 +51,29 @@
     "@types/semver": "^7.1.0",
     "@types/webpack": "^4.41.0",
     "@types/webpack-dev-server": "^3.9.0",
-    "archiver": "^4.0.1",
+    "archiver": "^5.0.0",
     "babel-loader": "^8.0.4",
     "bytes": "^3.1.0",
-    "chrome-webstore-upload": "^0.2.2",
+    "chrome-webstore-upload": "^0.4.0",
     "copy-webpack-plugin": "^6.0.1",
-    "css-loader": "^3.3.0",
+    "css-loader": "^4.2.2",
     "env-ci": "^5.0.2",
     "eslint-loader": "^4.0.2",
     "execa": "^4.0.0",
-    "favicons-webpack-plugin": "^3.0.1",
+    "favicons-webpack-plugin": "^4.2.0",
     "file-loader": "^6.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^9.0.0",
     "get-port": "^5.0.0",
     "globby": "^11.0.1",
     "html-loader": "^1.0.0",
     "html-webpack-plugin": "^4.0.2",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^0.11.0",
     "raw-loader": "^4.0.0",
     "react-hot-loader": "^4.12.20",
     "read-pkg-up": "^7.0.0",
     "semver": "^7.3.2",
-    "tempy": "^0.5.0",
+    "tempy": "^0.6.0",
     "typescript-styled-plugin": "^0.15.0",
     "url-loader": "^4.0.0",
     "webpack": "^4.41.2",

packages/client/src/components/App.tsx

@@ -2,13 +2,42 @@ import {hot} from 'react-hot-loader/root';
 import React from 'react';
 
 import Splash from 'components/Splash';
-import {Provider as PhotoContextProvider} from 'contexts/photo';
+import Settings from 'components/Settings';
+import { Provider as PhotoContextProvider } from 'contexts/photo';
 
+type GenericFunction = (...args: Array<any>) => any;
+
+const onClickAndHold = (threshold: number, cb: GenericFunction) => (e: React.MouseEvent) => {
+  const target = e.currentTarget;
+
+  if (target) {
+    const timeoutHandle = setTimeout(() => cb(target), threshold);
+
+    const onMouseUp = () => {
+      clearTimeout(timeoutHandle);
+      target.removeEventListener('mouseup', onMouseUp);
+    };
+
+    target.addEventListener('mouseup', onMouseUp);
+  }
+};
 
 const App: React.FunctionComponent = () => {
+  const [showSettings, setShowSettings] = React.useState(true);
+
+  const handleClickAndHold = React.useCallback(() => {
+    setShowSettings(true);
+  }, []);
+
   return (
     <PhotoContextProvider>
-      <Splash />
+      <Settings
+        show={showSettings}
+        onClose={() => setShowSettings(false)}
+      />
+      <Splash
+        onMouseDown={onClickAndHold(750, handleClickAndHold)}
+      />
     </PhotoContextProvider>
   );
 };