Merge pull request #222 from atapas/126-feature-request-design-the-pl…

…ay-not-found-page

styling play not found

src/common/playlists/PlayList.jsx

@@ -1,5 +1,7 @@
 import { useSearchFilter } from "common/search/hooks/useSearchFilter";
 import PlayThumbnail from "./PlayThumbnail";
+import { ReactComponent as ImageOops } from "images/img-oops.svg";
+import { Link } from 'react-router-dom';
 
 import "./playlist.css";
 
@@ -8,7 +10,11 @@ const PlayList = () => {
   if (plays.length === 0) {
     return (
         <div className="play-not-found">
-          <h2>Play Not Found</h2>
+          <ImageOops className="play-not-found-image" />
+          <p className='page-404-lead'>Play not found</p>
+          <p className='page-404-desc'>
+            Please change your search or adjust filters to find plays.
+          </p>
         </div>
     );
   }

src/common/playlists/playlist.css

@@ -614,4 +614,25 @@
     font-weight: var(--fw-bold);
     color: var(--color-neutral-80);
 
+}
+/* Play not found */
+.play-not-found {
+    min-height: calc(100vh - 100px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+}
+
+.play-not-found .play-not-found-image {
+    max-width: 100%;
+    height: auto;
+}
+
+@media screen and (max-width:768px) {
+    .play-not-found .play-not-found-image {
+        max-width: 50%;
+        margin-bottom: 2rem;
+    }
 }