From 34a1aeee2d839ccbe3f79e36a616638567ccab87 Mon Sep 17 00:00:00 2001
From: Muhsin Shah C P <muhsinshah21@gmail.com>
Date: Wed, 26 Jan 2022 09:01:52 +0530
Subject: [PATCH] Fix: OnClick doesn't fire event on SVG icons of Datasource
 manager modal (#1933)

* Fixed: click event didn't work on svg

* Fixed: list items' height problem

* changed CardIcon component to a function
---
 frontend/src/_styles/left-sidebar.scss | 4 ++++
 frontend/src/_ui/card/Card.jsx         | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index d2f94d63a3..036a59f897 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -184,6 +184,10 @@
     border-radius: 4px!important;
     background-color: $primary!important;
   }
+
+  .list-group-item + .list-group-item.active  {
+    margin-top: 0px!important;
+  }
 }
 
 .modal-body-content {
diff --git a/frontend/src/_ui/card/Card.jsx b/frontend/src/_ui/card/Card.jsx
index 1e3800fa8b..091f68e874 100644
--- a/frontend/src/_ui/card/Card.jsx
+++ b/frontend/src/_ui/card/Card.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { allSvgs } from '@tooljet/plugins/client';
 
 const Card = ({ title, src, handleClick, height = 50, width = 50, usepluginIcon = false }) => {
-  const CardIcon = ({ src, height, width }) => {
+  const displayIcon = (src) => {
     if (usepluginIcon) {
       const Icon = allSvgs[src];
       return <Icon style={{ height, width }} />;
@@ -23,7 +23,7 @@ const Card = ({ title, src, handleClick, height = 50, width = 50, usepluginIcon
       >
         <div className="card-body">
           <center>
-            <CardIcon src={src} height={height} width={width} />
+            {displayIcon(src)}
             <br></br>
             <br></br>
             <span>{title}</span>