[ML] [File data visualizer] Removing scss files

x-pack/plugins/data_visualizer/public/application/_index.scss

@@ -1,2 +1 @@
 @import 'common/components/index';
-@import 'file_data_visualizer/index';

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx

@@ -7,6 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { FC } from 'react';
 import React from 'react';
 
@@ -28,6 +30,13 @@ interface Props {
   hasPermissionToImport: boolean;
 }
 
+const aboutPanelContentStyle = css({
+  '.euiFilePicker__icon': {
+    width: euiThemeVars.euiSizeXXL,
+    height: euiThemeVars.euiSizeXXL,
+  },
+});
+
 export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImport }) => {
   return (
     <EuiPageTemplate.Section alignment="center" data-test-subj="dataVisualizerPageFileUpload">
@@ -40,14 +49,15 @@ export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImpor
           <div css={{ textAlign: 'center' }}>
             <EuiFilePicker
               id="filePicker"
+              fullWidth
               initialPromptText={i18n.translate(
                 'xpack.dataVisualizer.file.aboutPanel.selectOrDragAndDropFileDescription',
                 {
                   defaultMessage: 'Select or drag and drop a file',
                 }
               )}
               onChange={(files) => onFilePickerChange(files)}
-              className="file-datavisualizer-file-picker"
+              css={aboutPanelContentStyle}
             />
           </div>
           <EuiSpacer size="l" />
@@ -59,11 +69,7 @@ export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImpor
 
 export const LoadingPanel: FC = () => {
   return (
-    <EuiPageTemplate.Section
-      alignment="center"
-      data-test-subj="dataVisualizerPageFileLoading"
-      className="file-datavisualizer-about-panel__content"
-    >
+    <EuiPageTemplate.Section alignment="center" data-test-subj="dataVisualizerPageFileLoading">
       <EuiPageTemplate.EmptyPrompt
         title={
           <EuiTitle size="s">

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx

@@ -8,11 +8,25 @@
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FC } from 'react';
 import React from 'react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/react';
 
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 
 import { useDataVisualizerKibana } from '../../../kibana_context';
 
+const docIconStyle = css({
+  marginLeft: euiThemeVars.euiSizeL,
+  marginTop: euiThemeVars.euiSizeXS,
+});
+
+const mainIconStyle = css({
+  width: '96px',
+  height: '96px',
+  marginLeft: euiThemeVars.euiSizeXL,
+  marginRight: euiThemeVars.euiSizeL,
+});
+
 interface Props {
   hasPermissionToImport: boolean;
 }
@@ -28,7 +42,7 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
   return (
     <EuiFlexGroup gutterSize="xl" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiIcon size="xxl" type="addDataApp" className="file-datavisualizer-about-panel__icon" />
+        <EuiIcon size="xxl" type="addDataApp" css={mainIconStyle} />
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiTitle size="m">
@@ -65,8 +79,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -81,8 +95,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -97,8 +111,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/failures.tsx

@@ -7,8 +7,10 @@
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { Component } from 'react';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { EuiAccordion, EuiPagination } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 const PAGE_SIZE = 100;
 
@@ -28,6 +30,15 @@ interface State {
   page: number;
 }
 
+const containerStyle = css({
+  maxHeight: '200px',
+  overflowY: 'auto',
+});
+
+const errorStyle = css({
+  color: euiThemeVars.euiColorDanger,
+});
+
 export class Failures extends Component<Props, State> {
   state: State = { page: 0 };
 
@@ -56,11 +67,11 @@ export class Failures extends Component<Props, State> {
         }
         paddingSize="m"
       >
-        <div className="failure-list">
+        <div css={containerStyle}>
           {this._renderPaginationControl()}
           {this.props.failedDocs.slice(startIndex, endIndex).map(({ item, reason, doc }) => (
             <div key={item}>
-              <div className="error-message">
+              <div css={errorStyle}>
                 {item}: {reason}
               </div>
               <div>{JSON.stringify(doc)}</div>

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/results_view.tsx

@@ -84,7 +84,7 @@ export const ResultsView: FC<Props> = ({
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />
-      <div className="results">
+      <div>
         <EuiPanel data-test-subj="dataVisualizerFileFileContentPanel" hasShadow={false} hasBorder>
           <FileContents
             data={data}