Merge pull request 'resolve animation - resolve responsive' (#171) from fix/404-page into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/171

package-lock.json

@@ -35,6 +35,7 @@
         "react-hotkeys": "^2.0.0",
         "react-i18next": "^11.18.3",
         "react-loading-skeleton": "^3.1.0",
+        "react-lottie": "^1.2.3",
         "react-markdown": "^8.0.3",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0",
@@ -69,6 +70,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
+        "@types/react-lottie": "^1.2.6",
         "@types/react-syntax-highlighter": "^15.5.5",
         "autoprefixer": "^10.4.8",
         "babel-plugin-named-exports-order": "^0.0.2",
@@ -11558,6 +11560,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-lottie": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react-lottie/-/react-lottie-1.2.6.tgz",
+      "integrity": "sha512-fvGJHD7SeUdVESHo7f7erRnXkTWaa/6Mo5TB+R0/ieSftKoFspA4sMlF2qMH6BljXI7ehFJbBtrD5bzDxPCkGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-syntax-highlighter": {
       "version": "15.5.5",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz",
@@ -13600,6 +13611,27 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -25646,6 +25678,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "node_modules/loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -30383,6 +30420,21 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/react-lottie": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
+      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "lottie-web": "^5.1.3"
+      },
+      "engines": {
+        "npm": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.3.tgz",
@@ -48597,6 +48649,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-lottie": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react-lottie/-/react-lottie-1.2.6.tgz",
+      "integrity": "sha512-fvGJHD7SeUdVESHo7f7erRnXkTWaa/6Mo5TB+R0/ieSftKoFspA4sMlF2qMH6BljXI7ehFJbBtrD5bzDxPCkGg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-syntax-highlighter": {
       "version": "15.5.5",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz",
@@ -50205,6 +50266,27 @@
         }
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -59330,6 +59412,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -62603,6 +62690,15 @@
       "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
       "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw=="
     },
+    "react-lottie": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
+      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "lottie-web": "^5.1.3"
+      }
+    },
     "react-markdown": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.3.tgz",

package.json

@@ -30,6 +30,7 @@
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
     "react-loading-skeleton": "^3.1.0",
+    "react-lottie": "^1.2.3",
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
@@ -109,6 +110,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/react-lottie": "^1.2.6",
     "@types/react-syntax-highlighter": "^15.5.5",
     "autoprefixer": "^10.4.8",
     "babel-plugin-named-exports-order": "^0.0.2",

src/components/fetchAnArticle/NotFound.tsx

@@ -3,7 +3,19 @@ import Container from "components/Container";
 import { Button } from "components/Button/Button";
 import Link from "components/typography/Link";
 
+import Lottie from "react-lottie";
+import animationData from "../../assets/lotties/notFoundAnimation.json";
+
 const NotFound = () => {
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animationData,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice",
+    },
+  };
+
   return (
     <Container
       variant="straight"
@@ -11,13 +23,8 @@ const NotFound = () => {
       font-serif h-screen my-auto
       "
     >
-      <div
+      <Lottie options={defaultOptions} height={200} width={200} />
-        className="bg-[url('https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif')] 
+      <span className="font-bold text-5xl ">404</span>
-        h-[450px]
-        w-full text-center text-7xl "
-      >
-        404
-      </div>
       <h3 className="font-bold text-2xl text-center">Page does not exist</h3>
       <h4 className="text-center">
         Maybe you got a broken link, or maybe you made a misprint in the address