From f2ebba7b1df775d33d2af6abc3ee2c9de5f2e57a Mon Sep 17 00:00:00 2001
From: Alex Zoitos <azoitos1@gmail.com>
Date: Wed, 23 Dec 2020 21:37:11 -0500
Subject: [PATCH] fix(frontend): invalid dom-nesting title card fix (#482)

fix #476
---
 src/components/TitleCard/index.tsx | 290 ++++++++++++++---------------
 1 file changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index c460a9f90..15f71d52c 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -159,155 +159,155 @@ const TitleCard: React.FC<TitleCardProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
-              <a
-                className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
-                style={{
-                  background:
-                    'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
-                }}
-              >
-                <div className="absolute bottom-0 w-full left-0 right-0">
-                  <div className="px-2 text-white">
-                    {year && <div className="text-sm">{year}</div>}
+            <div>
+              <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
+                <a
+                  className="absolute w-full h-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
+                  style={{
+                    background:
+                      'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
+                  }}
+                >
+                  <div className="flex items-end h-full w-full">
+                    <div className="px-2 pb-11 text-white">
+                      {year && <div className="text-sm">{year}</div>}
 
-                    <h1 className="text-xl leading-tight whitespace-normal">
-                      {title}
-                    </h1>
-                    <div
-                      className="text-xs whitespace-normal"
-                      style={{
-                        WebkitLineClamp: 3,
-                        display: '-webkit-box',
-                        overflow: 'hidden',
-                        WebkitBoxOrient: 'vertical',
-                      }}
-                    >
-                      {summary}
-                    </div>
-                  </div>
-                  <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
-                    <Link
-                      href={
-                        mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`
-                      }
-                    >
-                      <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
-                        <svg
-                          className="w-4 mx-auto"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                      </a>
-                    </Link>
-                    {(!currentStatus ||
-                      currentStatus === MediaStatus.UNKNOWN) && (
-                      <button
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setShowRequestModal(true);
+                      <h1 className="text-xl leading-tight whitespace-normal">
+                        {title}
+                      </h1>
+                      <div
+                        className="text-xs whitespace-normal"
+                        style={{
+                          WebkitLineClamp: 3,
+                          display: '-webkit-box',
+                          overflow: 'hidden',
+                          WebkitBoxOrient: 'vertical',
                         }}
-                        className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
-                      >
-                        <svg
-                          className="w-4 mx-auto"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                          />
-                        </svg>
-                      </button>
-                    )}
-                    {currentStatus === MediaStatus.PENDING && (
-                      <button
-                        className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
-                        disabled
-                      >
-                        <svg
-                          className="w-4 mx-auto"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-                          />
-                        </svg>
-                      </button>
-                    )}
-                    {currentStatus === MediaStatus.PROCESSING && (
-                      <button
-                        className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
-                        disabled
-                      >
-                        <svg
-                          className="w-4 mx-auto"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                          />
-                        </svg>
-                      </button>
-                    )}
-                    {(currentStatus === MediaStatus.AVAILABLE ||
-                      currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
-                      <button
-                        className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
-                        disabled
                       >
-                        <svg
-                          className="w-4 mx-auto"
-                          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>
-                      </button>
-                    )}
+                        {summary}
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </a>
-            </Link>
+                </a>
+              </Link>
+
+              <div className="absolute flex justify-between left-0 bottom-0 right-0 px-2 py-2">
+                <Link
+                  href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
+                >
+                  <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                  </a>
+                </Link>
+                {(!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setShowRequestModal(true);
+                    }}
+                    className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
+                  >
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                      />
+                    </svg>
+                  </button>
+                )}
+                {currentStatus === MediaStatus.PENDING && (
+                  <button
+                    className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
+                    disabled
+                  >
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                      />
+                    </svg>
+                  </button>
+                )}
+                {currentStatus === MediaStatus.PROCESSING && (
+                  <button
+                    className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
+                    disabled
+                  >
+                    <svg
+                      className="w-4 mx-auto"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                  </button>
+                )}
+                {(currentStatus === MediaStatus.AVAILABLE ||
+                  currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
+                  <button
+                    className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
+                    disabled
+                  >
+                    <svg
+                      className="w-4 mx-auto"
+                      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>
+                  </button>
+                )}
+              </div>
+            </div>
           </Transition>
         </div>
       </div>