From bf95d47a68a56703bb823021a1163d5315afaa5a Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 18:47:42 +0530
Subject: [PATCH 01/14] feat: add slideover component

---
 .../src/components/SlideOver.stories.tsx      | 24 ++++++++++
 packages/ui/components/SlideOver.tsx          | 46 +++++++++++++++++++
 packages/ui/components/index.tsx              |  1 +
 3 files changed, 71 insertions(+)
 create mode 100644 apps/design-system/src/components/SlideOver.stories.tsx
 create mode 100644 packages/ui/components/SlideOver.tsx

diff --git a/apps/design-system/src/components/SlideOver.stories.tsx b/apps/design-system/src/components/SlideOver.stories.tsx
new file mode 100644
index 000000000..2ee9890b1
--- /dev/null
+++ b/apps/design-system/src/components/SlideOver.stories.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { SlideOver } from "ui";
+
+export default {
+  component: SlideOver,
+};
+
+export const Example = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <div>
+      <button onClick={handleOpen}>Open SlideOver</button>
+
+      <SlideOver isOpen={isOpen} onClose={handleClose}>
+        <h2>Content of the SlideOver</h2>
+        {/* Other contents... */}
+      </SlideOver>
+    </div>
+  );
+};
diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
new file mode 100644
index 000000000..a8aa44bf8
--- /dev/null
+++ b/packages/ui/components/SlideOver.tsx
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+
+interface SlideOverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const CloseIcon: React.FC = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 18L18 6M6 6L18 18" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children }) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <div className="fixed inset-0 flex items-center justify-end z-50">
+      <div className="fixed inset-0 bg-black opacity-50" onClick={onClose} />
+      <div className="w-full max-w-lg bg-gray-950 text-gray-200 rounded-md shadow-lg overflow-auto relative p-2.5">
+        <button className="absolute top-2 right-2" onClick={onClose}>
+          <CloseIcon />
+        </button>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default SlideOver;
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index c3d7761d3..b3c61c442 100644
--- a/packages/ui/components/index.tsx
+++ b/packages/ui/components/index.tsx
@@ -7,5 +7,6 @@ export * from "./Logo"
 export * from "./Modal"
 export * from "./OperationIcon"
 export * from "./Sidebar"
+export * from "./SlideOver"
 export * from "./Toolbar"
 export { default as Tooltip } from "./Tooltip"
\ No newline at end of file

From 222b5694c8a3f13e63494d208f835ea4506eec4c Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 20:32:54 +0530
Subject: [PATCH 02/14] fix: change the height and few other changes

---
 .../src/components/SlideOver.stories.tsx      |  1 -
 packages/ui/components/SlideOver.tsx          | 29 +++++++------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/apps/design-system/src/components/SlideOver.stories.tsx b/apps/design-system/src/components/SlideOver.stories.tsx
index 2ee9890b1..4e69436e0 100644
--- a/apps/design-system/src/components/SlideOver.stories.tsx
+++ b/apps/design-system/src/components/SlideOver.stories.tsx
@@ -17,7 +17,6 @@ export const Example = () => {
 
       <SlideOver isOpen={isOpen} onClose={handleClose}>
         <h2>Content of the SlideOver</h2>
-        {/* Other contents... */}
       </SlideOver>
     </div>
   );
diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index a8aa44bf8..345c0676b 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
 
 interface SlideOverProps {
   isOpen: boolean;
@@ -14,32 +13,24 @@ const CloseIcon: React.FC = () => (
 );
 
 export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children }) => {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [onClose]);
 
   if (!isOpen) return null;
 
-  return ReactDOM.createPortal(
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  return (
     <div className="fixed inset-0 flex items-center justify-end z-50">
-      <div className="fixed inset-0 bg-black opacity-50" onClick={onClose} />
-      <div className="w-full max-w-lg bg-gray-950 text-gray-200 rounded-md shadow-lg overflow-auto relative p-2.5">
-        <button className="absolute top-2 right-2" onClick={onClose}>
+      <div className="w-full h-full max-w-lg bg-gray-950 text-gray-200 rounded-md shadow-lg overflow-auto relative p-2.5" tabIndex={0} onKeyDown={handleKeyDown}>
+        <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
           <CloseIcon />
         </button>
         {children}
       </div>
-    </div>,
-    document.body
+    </div>
   );
 };
 

From 06656dea8dc1f69d047473520913daa2c10deb74 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 20:56:42 +0530
Subject: [PATCH 03/14] fix: change color

---
 packages/ui/components/SlideOver.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 345c0676b..f04ff727a 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -23,8 +23,8 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-end z-50">
-      <div className="w-full h-full max-w-lg bg-gray-950 text-gray-200 rounded-md shadow-lg overflow-auto relative p-2.5" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed inset-0 flex items-center justify-end z-50 backdrop-blur-20 opacity-67">
+      <div className="w-full h-full max-w-lg bg-gray-950 text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
           <CloseIcon />
         </button>

From 45fb27de028c72b29c345c23e91e6b4554f128fc Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 21:28:53 +0530
Subject: [PATCH 04/14] fix: change color

---
 packages/ui/components/SlideOver.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index f04ff727a..2cbc69283 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -23,7 +23,7 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-end z-50 backdrop-blur-20 opacity-67">
+    <div className="fixed inset-0 flex items-center justify-end z-50 backdrop-blur-[20px] opacity-[.67]">
       <div className="w-full h-full max-w-lg bg-gray-950 text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
           <CloseIcon />

From 269825109a44d546c9dcd6b6f3b3cac7a570ca10 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 21:47:21 +0530
Subject: [PATCH 05/14] fix: remove unsed import useState and useEffect

---
 packages/ui/components/SlideOver.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 2cbc69283..7ee5e9656 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from "react";
-
 interface SlideOverProps {
   isOpen: boolean;
   onClose: () => void;

From 85361baa20a7b9f6e623b4807c014e2e74f29e00 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 22:25:29 +0530
Subject: [PATCH 06/14] fix: import icon from ui/icons

---
 packages/ui/components/SlideOver.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 7ee5e9656..149c80a80 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -1,15 +1,11 @@
+import { XMarkIcon } from 'ui/icons';
+
 interface SlideOverProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
 }
 
-const CloseIcon: React.FC = () => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6 18L18 6M6 6L18 18" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
 export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children }) => {
 
   if (!isOpen) return null;
@@ -21,13 +17,11 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-end z-50 backdrop-blur-[20px] opacity-[.67]">
-      <div className="w-full h-full max-w-lg bg-gray-950 text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="w-full h-full max-w-lg bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
-          <CloseIcon />
+            <XMarkIcon/>
         </button>
         {children}
-      </div>
     </div>
   );
 };

From f0661395b2961a0fb8180a08263bd32569307fdf Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sun, 2 Jul 2023 22:47:58 +0530
Subject: [PATCH 07/14] fix: fix icon path

---
 packages/ui/components/SlideOver.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 149c80a80..eb9ff60dc 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -1,4 +1,4 @@
-import { XMarkIcon } from 'ui/icons';
+import { XMarkIcon } from './icons';
 
 interface SlideOverProps {
   isOpen: boolean;

From c287124a398afed430cffd99895947996fbf1fc3 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Mon, 3 Jul 2023 22:21:31 +0530
Subject: [PATCH 08/14] fix: fix position and icon

---
 packages/ui/components/SlideOver.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index eb9ff60dc..d85c1fc74 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,13 +17,15 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="w-full h-full max-w-lg bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed inset-0 flex items-start justify-end z-50"> 
+      <div className="w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
-            <XMarkIcon/>
+            <XMarkIcon className="h-6 w-6"/> 
         </button>
         {children}
+      </div>
     </div>
   );
 };
 
-export default SlideOver;
+export default SlideOver;
\ No newline at end of file

From 2dd7b265df9c2859dedca761129b5fa7e7203db0 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Mon, 3 Jul 2023 22:34:09 +0530
Subject: [PATCH 09/14] fix: change it to single div

---
 packages/ui/components/SlideOver.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index d85c1fc74..bbe49c05b 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,13 +17,11 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed inset-0 flex items-start justify-end z-50"> 
-      <div className="w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto relative p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
             <XMarkIcon className="h-6 w-6"/> 
         </button>
         {children}
-      </div>
     </div>
   );
 };

From 8d58de19efad5fd1e15976442fcc95ede8016acc Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com>
Date: Tue, 4 Jul 2023 13:07:22 +0530
Subject: [PATCH 10/14] Update
 apps/design-system/src/components/SlideOver.stories.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fran Méndez <fmvilas@gmail.com>
---
 apps/design-system/src/components/SlideOver.stories.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/design-system/src/components/SlideOver.stories.tsx b/apps/design-system/src/components/SlideOver.stories.tsx
index 4e69436e0..ac54a574e 100644
--- a/apps/design-system/src/components/SlideOver.stories.tsx
+++ b/apps/design-system/src/components/SlideOver.stories.tsx
@@ -3,6 +3,12 @@ import { SlideOver } from "ui";
 
 export default {
   component: SlideOver,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
 };
 
 export const Example = () => {

From 83736f574d0ab2146c9fbaeede76bdc995e44e6d Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com>
Date: Tue, 4 Jul 2023 13:07:41 +0530
Subject: [PATCH 11/14] Update packages/ui/components/SlideOver.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fran Méndez <fmvilas@gmail.com>
---
 packages/ui/components/SlideOver.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index bbe49c05b..7a968cb07 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,7 +17,7 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
             <XMarkIcon className="h-6 w-6"/> 
         </button>

From 8e3d379e8fb3ea128632855a70a77dfdd85c2800 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 4 Jul 2023 13:57:08 +0530
Subject: [PATCH 12/14] minor changes

---
 packages/ui/components/SlideOver.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 7a968cb07..f7fce94a2 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,7 +17,7 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8.0 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
             <XMarkIcon className="h-6 w-6"/> 
         </button>

From 9636ced99c2c2ed32cac90b9366eb64d7c3c7b8f Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 4 Jul 2023 14:03:11 +0530
Subject: [PATCH 13/14] minor changes

---
 packages/ui/components/SlideOver.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index f7fce94a2..7a968cb07 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,7 +17,7 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8.0 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
             <XMarkIcon className="h-6 w-6"/> 
         </button>

From c705381e57d422ac75dd10ab2c622331fa063936 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 4 Jul 2023 15:21:50 +0530
Subject: [PATCH 14/14] fix: add bg color in the text and fix padding

---
 apps/design-system/src/components/SlideOver.stories.tsx | 2 +-
 packages/ui/components/SlideOver.tsx                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/design-system/src/components/SlideOver.stories.tsx b/apps/design-system/src/components/SlideOver.stories.tsx
index ac54a574e..f2adacd49 100644
--- a/apps/design-system/src/components/SlideOver.stories.tsx
+++ b/apps/design-system/src/components/SlideOver.stories.tsx
@@ -19,7 +19,7 @@ export const Example = () => {
 
   return (
     <div>
-      <button onClick={handleOpen}>Open SlideOver</button>
+      <button onClick={handleOpen} className="bg-white text-black rounded mx-3 my-3">Open SlideOver</button>
 
       <SlideOver isOpen={isOpen} onClose={handleClose}>
         <h2>Content of the SlideOver</h2>
diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
index 7a968cb07..bbe49c05b 100644
--- a/packages/ui/components/SlideOver.tsx
+++ b/packages/ui/components/SlideOver.tsx
@@ -17,7 +17,7 @@ export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children
   };
 
   return (
-    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-8 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
         <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
             <XMarkIcon className="h-6 w-6"/> 
         </button>