fix(dataLoaders): add styling to telegraf conf overlay (#5701)

Author: blegesse-w

src/dataLoaders/components/DataLoadersOverlay.scss

@@ -43,6 +43,12 @@
   padding: $ix-marg-d;
 }
 
+.configuration-overlay--body {
+  padding: 45px !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 /*
   Telegraf Instructions Overlay
   ------------------------------------------------------------------------------

src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard.tsx

@@ -45,6 +45,7 @@ import {isSystemBucket} from 'src/buckets/constants'
 
 // Constants
 import {getBucketOverlayWidth} from 'src/buckets/constants'
+
 const TELEGRAF_UI_REFRESH_OVERLAY_DEFAULT_WIDTH = 1200
 
 interface OwnProps {
@@ -79,7 +80,7 @@ class TelegrafUIRefreshWizard extends PureComponent<Props> {
       (currentStepIndex === 0 && substepIndex === 1) ||
       currentStepIndex === 1
     ) {
-      overlayBodyClassName = ''
+      overlayBodyClassName = 'configuration-overlay--body'
     }
 
     return (

src/writeData/components/PluginAddToExistingConfiguration/Wizard.tsx

@@ -115,9 +115,12 @@ const Wizard: FC<Props> = props => {
 
   let overlayBodyClassName = 'data-loading--overlay'
 
-  if (currentStepIndex === 0 || currentStepIndex === 1) {
+  if (currentStepIndex === 0) {
     overlayBodyClassName = ''
   }
+  if (currentStepIndex === 1) {
+    overlayBodyClassName = 'configuration-overlay--body'
+  }
 
   return (
     <Overlay visible={isVisible}>

src/writeData/components/PluginCreateConfiguration/Wizard.tsx

@@ -111,6 +111,7 @@ const Wizard: FC<Props> = props => {
   }
 
   let title = 'Configuration Options'
+
   if (currentStepIndex === 0 && substepIndex === 1) {
     title = 'Create Bucket'
   } else if (currentStepIndex !== 0) {
@@ -128,9 +129,12 @@ const Wizard: FC<Props> = props => {
 
   let overlayBodyClassName = 'data-loading--overlay'
 
-  if (currentStepIndex === 0 || currentStepIndex === 1) {
+  if (currentStepIndex === 0 || substepIndex === 1) {
     overlayBodyClassName = ''
   }
+  if (currentStepIndex === 1) {
+    overlayBodyClassName = 'configuration-overlay--body'
+  }
 
   return (
     <Overlay visible={isVisible}>