responsive cta button

Signed-off-by: Huong Nguyen <huongg1409@gmail>

src/components/flowchart/components/slice-pipeline-action/slice-pipeline-action.js

@@ -1,12 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
+import classnames from 'classnames';
 import Button from '../../../ui/button';
 
 import './slice-pipeline-action.scss';
 
-export const SlicePipelineAction = ({ filteredPipeline }) => {
+export const SlicePipelineAction = ({ chartSize, filteredPipeline }) => {
+  const { outerWidth, sidebarWidth } = chartSize;
+  const sidebarVisible = sidebarWidth > 140;
+
+  const transformX = sidebarVisible ? outerWidth / 2 + 100 : outerWidth / 2;
   if (filteredPipeline.length > 0) {
     return (
-      <div className="pipeline-flowchart_slice-action">
+      <div
+        className="pipeline-flowchart_slice-action"
+        style={{ transform: `translateX(${transformX}px)` }}
+      >
         <div className="pipeline-flowchart_slice-action--info">
           {`${filteredPipeline.length} selected`}
         </div>

src/components/flowchart/components/slice-pipeline-action/slice-pipeline-action.scss

@@ -1,4 +1,4 @@
-@use '../../../../styles/variables' as colors;
+@use '../../../../styles/variables' as styles;
 @use '../../styles/variables';
 
 $padding-top-bottom: 8px;
@@ -9,10 +9,10 @@ $padding-right-left: 16px;
   border-radius: 4px;
   bottom: 30px;
   display: flex;
-  left: 60%;
   margin: 0;
   padding: 0;
   position: absolute;
+  transition: transform ease 0.7s;
 }
 
 .pipeline-flowchart_slice-action--info {

src/components/flowchart/flowchart.js

@@ -754,7 +754,11 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
-        <SlicePipelineAction filteredPipeline={filteredPipelineState.range} />
+        <SlicePipelineAction
+          chartSize={chartSize}
+          filteredPipeline={filteredPipelineState.range}
+          ref={this.layerNamesRef}
+        />
         <Tooltip
           chartSize={chartSize}
           {...this.state.tooltip}