From 22360f3b87055baab2046df7bbd038fe0d3f10e3 Mon Sep 17 00:00:00 2001
From: Ryan Cohen <r-cohen@mercari.com>
Date: Wed, 24 Aug 2022 15:00:04 +0900
Subject: [PATCH] refactor: slideover redesign (#2973)

---
 src/components/Common/SlideOver/index.tsx | 26 ++++++++++-----------
 src/components/ManageSlideOver/index.tsx  | 28 +++++++++++------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 895745a9..079bd7a8 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import Transition from '@app/components/Transition';
 import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
+import { Transition } from '@headlessui/react';
 import { XIcon } from '@heroicons/react/outline';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 interface SlideOverProps {
@@ -34,6 +34,7 @@ const SlideOver = ({
 
   return ReactDOM.createPortal(
     <Transition
+      as={Fragment}
       show={show}
       appear
       enter="opacity-0 transition ease-in-out duration-300"
@@ -54,9 +55,8 @@ const SlideOver = ({
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
-          <section className="absolute inset-y-0 right-0 flex max-w-full pl-10">
-            <Transition
-              show={show}
+          <section className="absolute inset-y-0 right-0 flex max-w-full">
+            <Transition.Child
               appear
               enter="transform transition ease-in-out duration-500 sm:duration-700"
               enterFrom="translate-x-full"
@@ -67,20 +67,20 @@ const SlideOver = ({
             >
               {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
               <div
-                className="w-screen max-w-md"
+                className="h-full w-screen max-w-md p-2 sm:p-4"
                 ref={slideoverRef}
                 onClick={(e) => e.stopPropagation()}
               >
-                <div className="flex h-full flex-col overflow-y-scroll bg-gray-700 shadow-xl">
-                  <header className="slideover space-y-1 bg-indigo-600 px-4">
+                <div className="hide-scrollbar flex h-full flex-col overflow-y-scroll rounded-lg bg-gray-800 bg-opacity-80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
+                  <header className="slideover space-y-1 border-b border-gray-700 px-4">
                     <div className="flex items-center justify-between space-x-3">
-                      <h2 className="text-lg font-bold leading-7 text-white">
+                      <h2 className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-2xl font-bold leading-7 text-transparent">
                         {title}
                       </h2>
                       <div className="flex h-7 items-center">
                         <button
                           aria-label="Close panel"
-                          className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
+                          className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
                           onClick={() => onClose()}
                         >
                           <XIcon className="h-6 w-6" />
@@ -89,9 +89,7 @@ const SlideOver = ({
                     </div>
                     {subText && (
                       <div>
-                        <p className="text-sm leading-5 text-indigo-300">
-                          {subText}
-                        </p>
+                        <p className="leading-5 text-gray-300">{subText}</p>
                       </div>
                     )}
                   </header>
@@ -100,7 +98,7 @@ const SlideOver = ({
                   </div>
                 </div>
               </div>
-            </Transition>
+            </Transition.Child>
           </section>
         </div>
       </div>
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index a2df65b0..87b96e3c 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -137,11 +137,11 @@ const ManageSlideOver = ({
       <div className="space-y-6">
         {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
           (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
-          <div>
+          <>
             <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.downloadstatus)}
             </h3>
-            <div className="overflow-hidden rounded-md bg-gray-600 shadow">
+            <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <ul>
                 {data.mediaInfo?.downloadStatus?.map((status, index) => (
                   <li
@@ -161,7 +161,7 @@ const ManageSlideOver = ({
                 ))}
               </ul>
             </div>
-          </div>
+          </>
         )}
         {hasPermission([Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES], {
           type: 'or',
@@ -171,7 +171,7 @@ const ManageSlideOver = ({
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalIssues)}
               </h3>
-              <div className="overflow-hidden rounded-md bg-gray-600 shadow">
+              <div className="overflow-hidden rounded-md border border-gray-700 shadow">
                 <ul>
                   {openIssues.map((issue) => (
                     <li
@@ -186,11 +186,11 @@ const ManageSlideOver = ({
             </>
           )}
         {requests.length > 0 && (
-          <div>
+          <>
             <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.manageModalRequests)}
             </h3>
-            <div className="overflow-hidden rounded-md bg-gray-600 shadow">
+            <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <ul>
                 {requests.map((request) => (
                   <li
@@ -205,13 +205,13 @@ const ManageSlideOver = ({
                 ))}
               </ul>
             </div>
-          </div>
+          </>
         )}
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl ||
             data.mediaInfo?.tautulliUrl ||
             !!watchData?.data?.playCount) && (
-            <div>
+            <>
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalMedia)}
               </h3>
@@ -219,13 +219,13 @@ const ManageSlideOver = ({
                 {!!watchData?.data && (
                   <div>
                     <div
-                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
+                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
                         data.mediaInfo?.tautulliUrl
                           ? 'rounded-t-md'
                           : 'rounded-md'
                       }`}
                     >
-                      <div className="grid grid-cols-3 divide-x divide-gray-500">
+                      <div className="grid grid-cols-3 divide-x divide-gray-700">
                         <div className="px-4 py-3">
                           <div className="font-bold">
                             {intl.formatMessage(messages.pastdays, { days: 7 })}
@@ -320,7 +320,7 @@ const ManageSlideOver = ({
                   </a>
                 )}
               </div>
-            </div>
+            </>
           )}
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl4k ||
@@ -334,13 +334,13 @@ const ManageSlideOver = ({
                 {!!watchData?.data4k && (
                   <div>
                     <div
-                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
+                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
                         data.mediaInfo?.tautulliUrl4k
                           ? 'rounded-t-md'
                           : 'rounded-md'
                       }`}
                     >
-                      <div className="grid grid-cols-3 divide-x divide-gray-500">
+                      <div className="grid grid-cols-3 divide-x divide-gray-700">
                         <div className="px-4 py-3">
                           <div className="font-bold">
                             {intl.formatMessage(messages.pastdays, { days: 7 })}
@@ -487,7 +487,7 @@ const ManageSlideOver = ({
                     {intl.formatMessage(messages.manageModalClearMedia)}
                   </span>
                 </ConfirmButton>
-                <div className="mt-1 text-xs text-gray-400">
+                <div className="mt-2 text-xs text-gray-400">
                   {intl.formatMessage(messages.manageModalClearMediaWarning, {
                     mediaType: intl.formatMessage(
                       mediaType === 'movie' ? messages.movie : messages.tvshow