fix: issue related to zoom controls (#438)

Author: talhainvenxion

src/index.css

@@ -132,3 +132,7 @@ html {
   top: 50%;
   transform: translateY(-50%);
 }
+
+.react-flow__controls-button svg {
+  background-color: transparent !important;
+}

src/ui/components/lineage/index.module.scss

@@ -28,17 +28,17 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 1px solid #443E99 !important;
+  border: 1px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #ffffff;
   min-width: 6rem;
 }
-.stepBody:hover{
+.stepBody:hover {
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 1px solid #443E9980 !important;
+  border: 1px solid #443e9980 !important;
   border-radius: 4px;
   font-size: 8px;
   background-color: #f5f4ff;
@@ -50,7 +50,7 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 3px solid #443E99 !important;
+  border: 3px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #ffffff;
@@ -60,7 +60,7 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 3px solid #443E99 !important;
+  border: 3px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #f5f4ff;
@@ -103,8 +103,7 @@
   clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
 }
 
-.nodeContainer
-{
+.nodeContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -189,20 +188,17 @@
   width: 100%;
   padding-left: 20px;
   padding-right: 20px;
-  background-color: "pink";
+  background-color: 'pink';
   justify-content: center;
   align-items: center;
 }
 
-
 .closeArrow {
   height: 500px;
   width: 500px;
   background-color: aqua;
 }
 
-
-
 // SIDE BAR
 
 .sidebarMainContainer {
@@ -230,7 +226,7 @@
   z-index: -1000;
 }
 
-.btnContainer>img {
+.btnContainer > img {
   z-index: -1000;
 }
 

src/ui/components/lineage/index.tsx

@@ -230,7 +230,13 @@ export const LayoutFlow: React.FC<any> = (graph: any) => {
               }}
               fitView
             >
-              <Controls />
+              <Controls
+                style={{
+                  top: '0px',
+                  bottom: '50%',
+                  boxShadow: 'none',
+                }}
+              />
             </ReactFlow>
           </div>
         </div>