From 002964572c487e5062ce7045863d7bec9ec84130 Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Fri, 18 Feb 2022 14:36:32 +0100
Subject: [PATCH] Added icon patch and better looking error+search suffix

---
 src/components/Buttons/IconPatch.tsx | 25 ++++++++++++++++
 src/components/Icon.tsx              |  4 ++-
 src/providers/list/temp/index.ts     |  1 -
 src/views/SearchView.tsx             | 43 +++++++++++++++++++++-------
 4 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Buttons/IconPatch.tsx

diff --git a/src/components/Buttons/IconPatch.tsx b/src/components/Buttons/IconPatch.tsx
new file mode 100644
index 00000000..67f18106
--- /dev/null
+++ b/src/components/Buttons/IconPatch.tsx
@@ -0,0 +1,25 @@
+import { Icon, Icons } from "components/Icon";
+
+export interface IconPatchProps {
+  active?: boolean;
+  onClick?: () => void;
+  clickable?: boolean;
+  className?: string;
+  icon: Icons;
+}
+
+export function IconPatch(props: IconPatchProps) {
+  return (
+    <div className={props.className || undefined} onClick={props.onClick}>
+      <div
+        className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
+          props.clickable
+            ? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
+            : ""
+        } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
+      >
+        <Icon icon={props.icon} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 249f02d8..d714ca89 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -9,6 +9,7 @@ export enum Icons {
   CLAPPER_BOARD = "clapperBoard",
   FILM = "film",
   DRAGON = "dragon",
+  WARNING = "warning",
 }
 
 export interface IconProps {
@@ -16,7 +17,7 @@ export interface IconProps {
   className?: string;
 }
 
-const iconList = {
+const iconList: Record<Icons, string> = {
   search: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>`,
   bookmark: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M384 48V512l-192-112L0 512V48C0 21.5 21.5 0 48 0h288C362.5 0 384 21.5 384 48z"/></svg>`,
   clock: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM232 256C232 264 236 271.5 242.7 275.1L338.7 339.1C349.7 347.3 364.6 344.3 371.1 333.3C379.3 322.3 376.3 307.4 365.3 300L280 243.2V120C280 106.7 269.3 96 255.1 96C242.7 96 231.1 106.7 231.1 120L232 256z"/></svg>`,
@@ -27,6 +28,7 @@ const iconList = {
   clapperBoard: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M326.1 160l127.4-127.4C451.7 32.39 449.9 32 448 32h-86.06l-128 128H326.1zM166.1 160l128-128H201.9l-128 128H166.1zM497.7 56.19L393.9 160H512V96C512 80.87 506.5 67.15 497.7 56.19zM134.1 32H64C28.65 32 0 60.65 0 96v64h6.062L134.1 32zM0 416c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V192H0V416z"/></svg>`,
   film: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M463.1 32h-416C21.49 32-.0001 53.49-.0001 80v352c0 26.51 21.49 48 47.1 48h416c26.51 0 48-21.49 48-48v-352C511.1 53.49 490.5 32 463.1 32zM111.1 408c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 408zM111.1 280c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM111.1 152c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 152zM351.1 400c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V400zM351.1 208c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V208zM463.1 408c0 4.418-3.582 8-8 8h-47.1c-4.418 0-7.1-3.582-7.1-8l0-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V408zM463.1 280c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM463.1 152c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8l0-48c0-4.418 3.582-8 7.1-8h47.1c4.418 0 8 3.582 8 8V152z"/></svg>`,
   dragon: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M18.43 255.8L192 224L100.8 292.6C90.67 302.8 97.8 320 112 320h222.7c-9.499-26.5-14.75-54.5-14.75-83.38V194.2L200.3 106.8C176.5 90.88 145 92.75 123.3 111.2l-117.5 116.4C-6.562 238 2.436 258 18.43 255.8zM575.2 289.9l-100.7-50.25c-16.25-8.125-26.5-24.75-26.5-43V160h63.99l28.12 22.62C546.1 188.6 554.2 192 562.7 192h30.1c11.1 0 23.12-6.875 28.5-17.75l14.37-28.62c5.374-10.87 4.25-23.75-2.999-33.5l-74.49-99.37C552.1 4.75 543.5 0 533.5 0H296C288.9 0 285.4 8.625 290.4 13.62L351.1 64L292.4 88.75c-5.874 3-5.874 11.37 0 14.37L351.1 128l-.0011 108.6c0 72 35.99 139.4 95.99 179.4c-195.6 6.75-344.4 41-434.1 60.88c-8.124 1.75-13.87 9-13.87 17.38C.0463 504 8.045 512 17.79 512h499.1c63.24 0 119.6-47.5 122.1-110.8C642.3 354 617.1 310.9 575.2 289.9zM489.1 66.25l45.74 11.38c-2.75 11-12.5 18.88-24.12 18.25C497.7 95.25 484.8 83.38 489.1 66.25z"/></svg>`,
+  warning: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
 };
 
 export function Icon(props: IconProps) {
diff --git a/src/providers/list/temp/index.ts b/src/providers/list/temp/index.ts
index adb4e392..9530b7a1 100644
--- a/src/providers/list/temp/index.ts
+++ b/src/providers/list/temp/index.ts
@@ -24,7 +24,6 @@ export const tempScraper: MWMediaProvider = {
   },
 
   async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
-
     return [];
   },
 };
diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx
index 0fbc0202..3c75e594 100644
--- a/src/views/SearchView.tsx
+++ b/src/views/SearchView.tsx
@@ -16,6 +16,7 @@ import { Tagline } from "components/Text/Tagline";
 import { Title } from "components/Text/Title";
 import { useDebounce } from "hooks/useDebounce";
 import { useLoading } from "hooks/useLoading";
+import { IconPatch } from "components/Buttons/IconPatch";
 
 function SearchLoading() {
   return <Loading className="my-12" text="Fetching your favourite shows..." />;
@@ -26,18 +27,38 @@ function SearchSuffix(props: {
   total: number;
   resultsSize: number;
 }) {
+  const allFailed: boolean = props.fails === props.total;
+  const icon: Icons = allFailed ? Icons.WARNING : Icons.EYE_SLASH;
+
   return (
-    <div>
-      {props.fails > 0 ? (
-        <p>
-          {props.fails}/{props.total} providers failed
-        </p>
+    <div className="my-24 flex flex-col items-center justify-center space-y-3 text-center">
+      <IconPatch
+        icon={icon}
+        className={`text-xl ${allFailed ? "text-red-400" : "text-bink-600"}`}
+      />
+
+      {/* standard suffix */}
+      {!allFailed ? (
+        <div>
+          {props.fails > 0 ? (
+            <p className="text-red-400">
+              {props.fails}/{props.total} providers failed
+            </p>
+          ) : null}
+          {props.resultsSize > 0 ? (
+            <p>That's all we have &mdash; sorry</p>
+          ) : (
+            <p>We couldn't find anything &mdash; sorry</p>
+          )}
+        </div>
+      ) : null}
+
+      {/* Error result */}
+      {allFailed ? (
+        <div>
+          <p>All providers failed &mdash; whoops</p>
+        </div>
       ) : null}
-      {props.resultsSize > 0 ? (
-        <p>Thats all we have to show</p>
-      ) : (
-        <p>No results to show</p>
-      )}
     </div>
   );
 }
@@ -82,7 +103,7 @@ function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
       ) : null}
 
       {/* error */}
-      {error ? <p>All scrapers failed</p> : null}
+      {error ? <SearchSuffix resultsSize={0} fails={1} total={1} /> : null}
 
       {/* Loading icon */}
       {loading ? <SearchLoading /> : null}