[ML] Remove data frame analytics scss files (elastic#199572)

## Summary

Related meta issue: elastic#140695

DFA map legend changes:

<img width="1160" alt="image"
src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc">

Job messages changes:

<img width="1033" alt="image"
src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26">

job messages in AD:

<img width="1231" alt="image"
src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e">

### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 2c0825f)

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

@@ -5,7 +5,6 @@
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
   // Sub applications
-  @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
 
   // Components
@@ -16,4 +15,4 @@
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 
-}
+}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx

@@ -20,7 +20,7 @@ export const BackToListPanel: FC = () => {
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: '300px' }}
         icon={<EuiIcon size="xxl" type="list" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
           defaultMessage: 'Data Frame Analytics',

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx

@@ -7,7 +7,7 @@
 
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard, EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { DataFrameAnalysisConfigType } from '@kbn/ml-data-frame-analytics-utils';
 import { useMlLink } from '../../../../../contexts/kibana';
@@ -26,10 +26,14 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
     },
   });
 
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: `calc(${size.xxl} * 7.5)` }}
         icon={<EuiIcon size="xxl" type="visTable" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.viewResultsCardTitle', {
           defaultMessage: 'View Results',

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx

@@ -42,16 +42,17 @@ export const OverallDetails: FC<{
 }> = ({ overallDetails }) => (
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
     {overallDetails.items.map((item) => {
+      const key = item.title;
       if (item.title === 'badge') {
         return (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={key}>
             <EuiBetaBadge label={item.description} color="subdued" title={item.title} />
           </EuiFlexItem>
         );
       }
 
       return (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} key={key}>
           <EuiFlexGroup gutterSize="xs">
             <EuiFlexItem grow={false}>
               <EuiDescriptionListDescription className="descriptionListTitle">
@@ -82,7 +83,7 @@ export const Stats = ({ section }: { section: SectionConfig }) => (
     <EuiFlexItem grow={false}>
       <EuiFlexGroup>
         {section.items.map((item) => (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={item.title}>
             <EuiDescriptionListDescription className="descriptionListTitle">
               <EuiText size="xs">{item.title}</EuiText>
             </EuiDescriptionListDescription>
@@ -200,10 +201,10 @@ export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({
               </EuiTitle>
               <EuiSpacer size="xs" />
               {progress.items.map((item) => (
-                <>
+                <span key={item.title}>
                   {item.description}
                   <EuiSpacer size="s" />
-                </>
+                </span>
               ))}
             </EuiFlexItem>
             <EuiFlexItem grow={3}>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import './expanded_row_messages_pane.scss';
-
 import type { FC } from 'react';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { useMlApi } from '../../../../../contexts/kibana';
 import { useRefreshAnalyticsList } from '../../../../common';
 import { JobMessages } from '../../../../../components/job_messages';
@@ -23,6 +23,21 @@ interface Props {
 
 export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }) => {
   const mlApi = useMlApi();
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
+  const cssOverride = useMemo(
+    () =>
+      css({
+        padding: `0 ${size.s} ${size.s} ${size.s}`,
+        '.euiTable': {
+          backgroundColor: 'transparent',
+        },
+      }),
+    [size.s]
+  );
+
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -63,7 +78,7 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }
   useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
-    <div className="mlExpandedRowJobMessages" data-test-subj={dataTestSubj}>
+    <div data-test-subj={dataTestSubj} css={cssOverride}>
       <JobMessages
         messages={messages}
         loading={isLoading}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx

@@ -49,6 +49,10 @@ enum TASK_STATE_COLOR {
   stopping = 'hollow',
 }
 
+const badgeStyle = {
+  maxWidth: '100px',
+};
+
 export const getTaskStateBadge = (
   state: DataFrameAnalyticsStats['state'],
   failureReason?: DataFrameAnalyticsStats['failure_reason']
@@ -58,22 +62,22 @@ export const getTaskStateBadge = (
   if (isDataFrameAnalyticsFailed(state) && failureReason !== undefined) {
     return (
       <EuiToolTip content={failureReason}>
-        <EuiBadge className="mlTaskStateBadge" color={color}>
+        <EuiBadge css={badgeStyle} color={color}>
           {state}
         </EuiBadge>
       </EuiToolTip>
     );
   }
 
   return (
-    <EuiBadge className="mlTaskStateBadge" color={color}>
+    <EuiBadge css={badgeStyle} color={color}>
       {state}
     </EuiBadge>
   );
 };
 
 export const getJobTypeBadge = (jobType: string) => (
-  <EuiBadge className="mlTaskStateBadge" color="hollow">
+  <EuiBadge css={badgeStyle} color="hollow">
     {jobType}
   </EuiBadge>
 );