Add link to new recording app

package.json

@@ -26,54 +26,54 @@
   },
   "homepage": "https://github.com/metalex9/generative-music#readme",
   "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "@babel/polyfill": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/core": "^7.10.4",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "app-manifest-loader": "^2.4.1",
-    "aws-sdk": "^2.608.0",
-    "babel-loader": "^8.0.6",
+    "aws-sdk": "^2.709.0",
+    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^0.1.19",
     "cross-env": "^5.2.1",
     "css-loader": "^2.1.1",
     "eslint": "^4.19.1",
     "eslint-config-metalex9": "^0.1.1",
-    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react": "^7.20.3",
     "file-loader": "^3.0.1",
     "glob": "^7.1.6",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^4.6.0",
-    "mime-types": "^2.1.26",
+    "mime-types": "^2.1.27",
     "mini-css-extract-plugin": "^0.4.5",
     "node-gzip": "^1.1.2",
-    "node-lame": "^1.2.0",
+    "node-lame": "^1.2.2",
     "node-sass": "^4.14.1",
     "offline-plugin": "^5.0.7",
     "prettier": "^1.19.1",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "sass-loader": "^7.3.1",
-    "source-map-loader": "^1.0.0",
+    "source-map-loader": "^1.0.1",
     "url-loader": "^1.1.2",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@generative-music/pieces-alex-bainter": "^3.3.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@generative-music/pieces-alex-bainter": "^3.4.0",
     "@generative-music/samples-alex-bainter": "^1.1.0",
     "@generative-music/visualizer": "^2.3.5",
-    "@generative-music/web-provider": "^1.0.0",
+    "@generative-music/web-provider": "^1.1.0",
     "audiobuffer-to-wav": "^1.0.0",
     "classnames": "^2.2.6",
     "clone": "^2.1.2",
     "nice-color-palettes": "^2.0.0",
-    "react-device-detect": "^1.11.14",
+    "react-device-detect": "^1.13.1",
     "react-redux": "^5.1.2",
     "react-render-html": "^0.6.0",
     "react-router": "^4.3.1",

src/components/app/record-tab/index.jsx

@@ -87,6 +87,17 @@ const RecordTabComponent = ({
 
   return (
     <div className="centered-tab record-tab">
+      <a
+        className="alert"
+        href="https://record.generative.fm"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Try the new{' '}
+        <span className="fake-link">Generative.fm recording app</span>. Add fade
+        ins and outs, with more consistent waiting times—often faster—and
+        smaller file sizes.
+      </a>
       This page enables you to generate and download recordings. Recording
       generation may take a while, and longer recordings require more time to
       generate. Music playback is not supported while recording generation is in

src/components/app/record-tab/record-tab.scss

@@ -41,4 +41,17 @@
     text-align: center;
     display: inline-block;
   }
+
+  .alert {
+    padding: 1em;
+    background-color: $highlightColor;
+    margin-bottom: 1em;
+    display: block;
+    color: $primaryColor;
+    text-decoration: none;
+
+    .fake-link {
+      text-decoration: underline;
+    }
+  }
 }