From effc80977a4ed732092254248f82363e52233171 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Mon, 4 Jan 2021 15:21:46 +0000
Subject: [PATCH] fix(frontend): adjust titlecard badge styling

this commit aligns the badges, removes the border from the availability badge (replaces it with a
light shadow) and also adds a new animation to the titlecard
---
 src/components/Slider/index.tsx    |   2 +-
 src/components/TitleCard/index.tsx | 122 +++++++++++++++--------------
 2 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 743894df5..03923225e 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -207,7 +207,7 @@ const Slider: React.FC<SliderProps> = ({
         </button>
       </div>
       <div
-        className="relative px-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain"
+        className="relative px-2 py-2 -my-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain"
         ref={containerRef}
         onScroll={onScroll}
       >
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 8e5f21e51..358ceab19 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -76,7 +76,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
         onCancel={closeModal}
       />
       <div
-        className="outline-none cursor-default titleCard"
+        className="transition duration-300 transform scale-100 outline-none cursor-default titleCard hover:scale-105 focus:scale-105"
         style={{
           backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`,
         }}
@@ -95,66 +95,68 @@ const TitleCard: React.FC<TitleCardProps> = ({
         role="link"
         tabIndex={0}
       >
-        <div className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden shadow-xl">
-          <div
-            className={`absolute left-2 top-2 rounded-md z-40 pointer-events-none ${
-              mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
-            }`}
-          >
-            <div className="flex items-center h-4 px-1 py-2 text-xs font-normal tracking-wider text-center text-white uppercase">
-              {mediaType === 'movie'
-                ? intl.formatMessage(messages.movie)
-                : intl.formatMessage(messages.tvshow)}
-            </div>
-          </div>
-          <div className="absolute z-40 pointer-events-none top-2 right-2">
-            {(currentStatus === MediaStatus.AVAILABLE ||
-              currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
-              <div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 border border-green-600 rounded-full sm:w-5 sm:h-5">
-                <svg
-                  className="w-3 h-3 sm:w-4 sm:h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
+        <div className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden shadow">
+          <div className="absolute left-0 right-0 flex items-center justify-between p-2">
+            <div
+              className={`rounded-full z-40 pointer-events-none shadow ${
+                mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
+              }`}
+            >
+              <div className="flex items-center h-4 px-2 py-2 text-xs font-normal tracking-wider text-center text-white uppercase sm:h-5">
+                {mediaType === 'movie'
+                  ? intl.formatMessage(messages.movie)
+                  : intl.formatMessage(messages.tvshow)}
               </div>
-            )}
-            {currentStatus === MediaStatus.PENDING && (
-              <div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 border border-yellow-600 rounded-full sm:w-5 sm:h-5">
-                <svg
-                  className="w-3 h-3 sm:w-4 sm:h-4"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
-                </svg>
-              </div>
-            )}
-            {currentStatus === MediaStatus.PROCESSING && (
-              <div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 border border-indigo-600 rounded-full sm:w-5 sm:h-5">
-                <svg
-                  className="w-3 h-3 sm:w-4 sm:h-4"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            )}
+            </div>
+            <div className="z-40 pointer-events-none">
+              {(currentStatus === MediaStatus.AVAILABLE ||
+                currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
+                <div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 rounded-full shadow sm:w-5 sm:h-5">
+                  <svg
+                    className="w-3 h-3 sm:w-4 sm:h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                </div>
+              )}
+              {currentStatus === MediaStatus.PENDING && (
+                <div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 rounded-full shadow sm:w-5 sm:h-5">
+                  <svg
+                    className="w-3 h-3 sm:w-4 sm:h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+                  </svg>
+                </div>
+              )}
+              {currentStatus === MediaStatus.PROCESSING && (
+                <div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 rounded-full shadow sm:w-5 sm:h-5">
+                  <svg
+                    className="w-3 h-3 sm:w-4 sm:h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+              )}
+            </div>
           </div>
           <Transition
             show={isUpdating}