[Guided onboarding] Fix card footer button markup (#145050)

elastic · Nov 14, 2022 · 94437f8 · 94437f8
1 parent 6ac78d7
commit 94437f8
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 74 deletions.
diff --git a/...ided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap b/...ided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap
diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx b/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
-import { EuiButton, EuiProgress, EuiSpacer } from '@elastic/eui';
+import { EuiButton, EuiProgress, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { GuideId, GuideState } from '../../types';
 import { UseCase } from './use_case_card';
@@ -54,16 +54,18 @@ export interface GuideCardFooterProps {
 export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFooterProps) => {
   const guideState = guides.find((guide) => guide.guideId === (useCase as GuideId));
   const viewGuideButton = (
-    <div className="eui-textCenter">
-      <EuiButton
-        // Used for FS tracking
-        data-test-subj={`onboarding--guideCard--view--${useCase}`}
-        fill
-        onClick={() => activateGuide(useCase, guideState)}
-      >
-        {viewGuideLabel}
-      </EuiButton>
-    </div>
+    <EuiFlexGroup justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          // Used for FS tracking
+          data-test-subj={`onboarding--guideCard--view--${useCase}`}
+          fill
+          onClick={() => activateGuide(useCase, guideState)}
+        >
+          {viewGuideLabel}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
   // guide has not started yet
   if (!guideState || guideState.status === 'not_started') {
@@ -108,16 +110,18 @@ export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFoo
         }}
       />
       <EuiSpacer size="l" />
-      <div className="eui-textCenter">
-        <EuiButton
-          // Used for FS tracking
-          data-test-subj={`onboarding--guideCard--continue--${useCase}`}
-          fill
-          onClick={() => activateGuide(useCase, guideState)}
-        >
-          {continueGuideLabel}
-        </EuiButton>
-      </div>
+      <EuiFlexGroup justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            // Used for FS tracking
+            data-test-subj={`onboarding--guideCard--continue--${useCase}`}
+            fill
+            onClick={() => activateGuide(useCase, guideState)}
+          >
+            {continueGuideLabel}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </>
   );
 };