From 3c54a6261dedc0074ec68c9290f50110e3ba40ec Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Wed, 10 Apr 2024 20:45:18 -0400
Subject: [PATCH] Make scrollbar transparent and work on making transitions
 more apealing

---
 src/assets/locales/en.json                 |  1 +
 src/pages/Discover.tsx                     | 13 +++++++------
 src/pages/parts/player/ScrapeErrorPart.tsx | 17 +++++++++++++----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index cf6aaec4..07627655 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -427,6 +427,7 @@
         "badge": "Not found",
         "detailsButton": "Show details",
         "homeButton": "Go home",
+        "discoverButton": "Discover more",
         "text": "We have searched through our providers and cannot find the media you are looking for! We do not host the media and have no control over what is available. Please click 'Show details' below for more details.",
         "title": "We couldn't find that"
       },
diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
index 827bb28c..68c667d4 100644
--- a/src/pages/Discover.tsx
+++ b/src/pages/Discover.tsx
@@ -258,10 +258,11 @@ export function Discover() {
         </h2>
         <div
           id={`carousel-${categorySlug}`}
-          className="flex whitespace-nowrap overflow-auto pb-2 scrollbar rounded-xl"
+          className="flex whitespace-nowrap overflow-auto rounded-xl"
           style={{
             scrollbarWidth: "thin",
-            scrollbarColor: `${bgColor} transparent`,
+            // scrollbarColor: `${bgColor} transparent`,
+            scrollbarColor: `transparent transparent`,
           }}
           ref={(el) => {
             carouselRefs.current[categorySlug] = el;
@@ -280,7 +281,7 @@ export function Discover() {
                   }`,
                 )
               }
-              className="text-center relative mt-4 mb-4 ml-[0.4em] mr-[0.2em]"
+              className="text-center relative mt-2 ml-[0.285em] mr-[0.2em]"
               style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
             >
               <div className="relative transition-transform hover:scale-105 duration-[0.45s]">
@@ -310,7 +311,7 @@ export function Discover() {
           <button
             type="button"
             title="Back"
-            className="absolute top-1/2 transform -translate-y-1/2 z-10 left-5"
+            className="absolute pb-12 left-5 top-1/2 transform -translate-y-1/2 z-10"
             onClick={() => scrollCarousel(categorySlug, "left")}
           >
             <div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
@@ -320,7 +321,7 @@ export function Discover() {
           <button
             type="button"
             title="Next"
-            className="absolute top-1/2 right-5 transform -translate-y-1/2 z-10"
+            className="absolute pb-12 right-5 top-1/2 transform -translate-y-1/2 z-10"
             onClick={() => scrollCarousel(categorySlug, "right")}
           >
             <div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
@@ -514,7 +515,7 @@ export function Discover() {
                 {renderMovies(genreMovies[genre.id] || [], genre.name)}
               </div>
             ))}
-            <div className="flex items-center mt-6">
+            <div className="flex items-center">
               <Divider marginClass="mr-5" />
               <h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
               <Divider marginClass="ml-5" />
diff --git a/src/pages/parts/player/ScrapeErrorPart.tsx b/src/pages/parts/player/ScrapeErrorPart.tsx
index bc1f78e6..cff8cece 100644
--- a/src/pages/parts/player/ScrapeErrorPart.tsx
+++ b/src/pages/parts/player/ScrapeErrorPart.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { sendPage } from "@/backend/extension/messaging";
 import { Button } from "@/components/buttons/Button";
@@ -30,6 +30,7 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
   const location = useLocation();
   const [extensionState, setExtensionState] =
     useState<ExtensionStatus>("unknown");
+  const navigate = useNavigate();
 
   const error = useMemo(() => {
     const data = props.data;
@@ -117,14 +118,22 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
             {t("player.scraping.notFound.homeButton")}
           </Button>
           <Button
-            onClick={() => modal.show()}
-            theme="purple"
+            onClick={() => navigate("/discover")}
+            theme="secondary"
             padding="md:px-12 p-2.5"
             className="mt-6"
           >
-            {t("player.scraping.notFound.detailsButton")}
+            {t("player.scraping.notFound.discoverButton")}
           </Button>
         </div>
+        <Button
+          onClick={() => modal.show()}
+          theme="purple"
+          padding="md:px-12 p-2.5"
+          className="mt-6"
+        >
+          {t("player.scraping.notFound.detailsButton")}
+        </Button>
       </ErrorContainer>
       {error ? (
         <ErrorCardInModal