From 808526251ec1e51d64682c37ca22b331aa044243 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 27 Jun 2024 14:30:36 +0200
Subject: [PATCH] change(ui): modal height and scroll

---
 .../NewDashModal/NewDashboardModal.tsx        | 46 +++++++++++--------
 frontend/app/styles/general.css               | 10 +---
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index 79b26d019..5c975a9d1 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import {Modal} from 'antd';
 import SelectCard from './SelectCard';
 import CreateCard from "Components/Dashboard/components/DashboardList/NewDashModal/CreateCard";
+import colors from "tailwindcss/colors";
 
 interface NewDashboardModalProps {
     onClose: () => void;
@@ -25,28 +26,35 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
 
     return (
         <>
-            <Modal 
-            open={open} 
-            onCancel={onClose} 
-            width={900} 
-            destroyOnClose={true} 
-            footer={null} 
-            closeIcon={false} 
-            className='chooseDashboardCards'
-            centered>
-                <div>
-                    <div className="flex flex-col gap-4">
-                        {step === 0 && <SelectCard onClose={onClose}
-                                                   selected={selectedCategory}
-                                                   setSelectedCategory={setSelectedCategory}
-                                                   onCard={() => setStep(step + 1)}
-                                                   isLibrary={isAddingFromLibrary}/>}
-                        {step === 1 && <CreateCard onBack={() => setStep(0)}/>}
-                    </div>
+            <Modal
+                open={open}
+                onCancel={onClose}
+                width={900}
+                destroyOnClose={true}
+                footer={null}
+                closeIcon={false}
+                styles={{
+                    content: {
+                        backgroundColor: colors.gray[100],
+                    }
+                }}
+            >
+                <div className="flex flex-col gap-4" style={{
+                    height: 700,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                }}>
+                    {step === 0 && <SelectCard onClose={onClose}
+                                               selected={selectedCategory}
+                                               setSelectedCategory={setSelectedCategory}
+                                               onCard={() => setStep(step + 1)}
+                                               isLibrary={isAddingFromLibrary}/>}
+                    {step === 1 && <CreateCard onBack={() => setStep(0)}/>}
                 </div>
             </Modal>
         </>
-    );
+    )
+        ;
 };
 
 export default NewDashboardModal;
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 5332c0533..5c1f77172 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -412,14 +412,6 @@ p {
   background-color: #E6E9FA;
 }
 
-
-.chooseDashboardCards .ant-modal-content{
-  background-color: #efefef;
-  border-radius: 0.75rem;
-  max-height: 700px;
-  overflow: hidden;
-}
-
 .dashboardDataPeriodSelector .dashboardMoreOptionsLabel{
   display: none;
-}
\ No newline at end of file
+}