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

@@ -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}
       >

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,22 +95,23 @@ 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 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={`absolute left-2 top-2 rounded-md z-40 pointer-events-none ${
+              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-1 py-2 text-xs font-normal tracking-wider text-center text-white uppercase">
+              <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>
             </div>
-          <div className="absolute z-40 pointer-events-none top-2 right-2">
+            <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 border border-green-600 rounded-full sm:w-5 sm:h-5">
+                <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"
@@ -128,7 +129,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 </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">
+                <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"
@@ -140,7 +141,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 </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">
+                <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"
@@ -156,6 +157,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 </div>
               )}
             </div>
+          </div>
           <Transition
             show={isUpdating}
             enter="transition ease-in-out duration-300 transform opacity-0"