changed sampledatabox to euicard, changed style incompatibility

Signed-off-by: Amit Galitzky <[email protected]>
opensearch-project · Apr 6, 2022 · 61c319b · 61c319b
1 parent e10395f
commit 61c319b
Show file tree

Hide file tree

Showing 7 changed files with 498 additions and 843 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -41,7 +41,6 @@ type ContentPanelProps = {
   hideBody?: boolean;
   titleDataTestSubj?: string;
 };
-
 const ContentPanel = (props: ContentPanelProps) => {
   const titleDataTestSubj = get(
     props,
@@ -50,12 +49,11 @@ const ContentPanel = (props: ContentPanelProps) => {
   );
   return (
     <EuiPanel
-      style={{ padding: '20px', ...props.panelStyles }}
+      style={{ padding: '20px'}}
       className={props.contentPanelClassName}
-      betaBadgeLabel={props.badgeLabel}
     >
       <EuiFlexGroup
-        style={{ padding: '0px', ...props.titleContainerStyles }}
+        style={{ padding: '0px' }}
         justifyContent="spaceBetween"
         alignItems="center"
       >
@@ -135,7 +133,7 @@ const ContentPanel = (props: ContentPanelProps) => {
             margin="s"
             className={props.horizontalRuleClassName}
           />
-          <div style={{ padding: '10px 0px', ...props.bodyStyles }}>
+          <div style={{ padding: '10px 0px' }}>
             {props.children}
           </div>
         </div>

diff --git a/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx b/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx
@@ -18,6 +18,8 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiLink,
+  EuiCard,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { PLUGIN_NAME } from '../../../../utils/constants';
 
@@ -37,7 +39,7 @@ interface SampleDataBoxProps {
 export const SampleDataBox = (props: SampleDataBoxProps) => {
   return (
     <div style={{ height: 'auto' }}>
-      <ContentPanel
+      <EuiCard
         title={
           <div
             style={{
@@ -62,9 +64,15 @@ export const SampleDataBox = (props: SampleDataBoxProps) => {
           </div>
         }
         titleSize="s"
-        badgeLabel={props.isDataLoaded ? 'INSTALLED' : undefined}
+        betaBadgeLabel={props.isDataLoaded ? 'INSTALLED' : undefined}
+        paddingSize='l'
       >
         <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiHorizontalRule
+              size="full"
+              margin="s"
+            >
+            </EuiHorizontalRule>
           <EuiFlexItem grow={false} style={{ height: '70px' }}>
             <p
               style={{
@@ -118,7 +126,7 @@ export const SampleDataBox = (props: SampleDataBoxProps) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexGroup>
-      </ContentPanel>
+      </EuiCard>
     </div>
   );
-};
+};