From 23409e6f2ffb060e7914db28375e141a6087ddfa Mon Sep 17 00:00:00 2001
From: Ryan Cohen <r-cohen@mercari.com>
Date: Wed, 24 Aug 2022 20:57:30 +0900
Subject: [PATCH] fix: correct safe margin for slideover (#2977)

---
 src/components/Common/ButtonWithDropdown/index.tsx | 9 +++++----
 src/components/Common/SlideOver/index.tsx          | 4 ++--
 src/styles/globals.css                             | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index edb5a7499..25162ac04 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -19,11 +19,11 @@ const DropdownItem = ({
   switch (buttonType) {
     case 'ghost':
       styleClass +=
-        ' bg-gray-700 hover:bg-gray-600 focus:border-gray-500 focus:text-white';
+        ' bg-transparent rounded hover:bg-gradient-to-br from-indigo-600 to-purple-600 text-white focus:border-gray-500 focus:text-white';
       break;
     default:
       styleClass +=
-        ' bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:text-white';
+        ' bg-indigo-600 rounded hover:bg-indigo-500 focus:border-indigo-700 focus:text-white';
   }
   return (
     <a
@@ -65,14 +65,15 @@ const ButtonWithDropdown = ({
       styleClasses.mainButtonClasses +=
         ' bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
       styleClasses.dropdownSideButtonClasses = styleClasses.mainButtonClasses;
-      styleClasses.dropdownClasses += ' bg-gray-700';
+      styleClasses.dropdownClasses +=
+        ' bg-gray-800 border border-gray-700 bg-opacity-80 p-1 backdrop-blur';
       break;
     default:
       styleClasses.mainButtonClasses +=
         ' bg-indigo-600 border-indigo-600 hover:bg-indigo-500 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
       styleClasses.dropdownSideButtonClasses +=
         ' bg-indigo-700 border-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:ring-blue';
-      styleClasses.dropdownClasses += ' bg-indigo-600';
+      styleClasses.dropdownClasses += ' bg-indigo-600 p-1';
   }
 
   return (
diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 079bd7a8d..f69d3e519 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -67,12 +67,12 @@ const SlideOver = ({
             >
               {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
               <div
-                className="h-full w-screen max-w-md p-2 sm:p-4"
+                className="slideover h-full w-screen max-w-md p-2 sm:p-4"
                 ref={slideoverRef}
                 onClick={(e) => e.stopPropagation()}
               >
                 <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">
+                  <header className="space-y-1 border-b border-gray-700 py-4 px-4">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-2xl font-bold leading-7 text-transparent">
                         {title}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b3e2543ee..1d16b5087 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -36,8 +36,8 @@
   }
 
   .slideover {
-    padding-top: calc(1.5rem + env(safe-area-inset-top));
-    padding-bottom: 1.5rem;
+    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
+    padding-bottom: calc(1rem + env(safe-area-inset-top)) !important;
   }
 
   .sidebar-close-button {