[SharedUX] SCSS migration kibana_overview plugin (elastic#215942)

## Summary

This PR is a part of SCSS migration of SharedUX team code.
Here is a [meta](elastic/kibana-team#1417)
issue for it.

---------

Co-authored-by: Eyo O. Eyo <7893459+eokoneyo@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
Co-authored-by: Sergi Massaneda <sergi.massaneda@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 6 people

src/platform/plugins/private/kibana_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap

@@ -9,7 +9,16 @@
 
 import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { css } from '@emotion/react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiTitle,
+  UseEuiTheme,
+  useEuiMinBreakpoint,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { CoreStart } from '@kbn/core/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
@@ -27,6 +36,7 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => {
   const {
     services: { application },
   } = useKibana<CoreStart>();
+  const minBreakpointM = useEuiMinBreakpoint('m');
   return (
     <>
       {features.length > 1 ? <EuiHorizontalRule margin="xl" aria-hidden="true" /> : null}
@@ -47,9 +57,20 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => {
 
           <EuiSpacer size="m" />
 
-          <EuiFlexGroup className="kbnOverviewDataManage__content" wrap>
+          <EuiFlexGroup wrap>
             {features.map((feature) => (
-              <EuiFlexItem className="kbnOverviewDataManage__item" key={feature.id}>
+              <EuiFlexItem
+                key={feature.id}
+                css={({ euiTheme }: UseEuiTheme) =>
+                  css({
+                    ':not(:only-child)': {
+                      [minBreakpointM]: {
+                        flex: `0 0 calc(50% - ${euiTheme.size.l})`,
+                      },
+                    },
+                  })
+                }
+              >
                 <RedirectAppLinks
                   coreStart={{
                     application,

src/platform/plugins/private/kibana_overview/public/components/manage_data/manage_data.tsx

@@ -8,26 +8,42 @@
  */
 
 import React, { FC } from 'react';
-import { EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiLink, EuiSpacer, EuiText, EuiTitle, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { FetchResult } from '@kbn/newsfeed-plugin/public';
 
 interface Props {
-  newsFetchResult: FetchResult;
+  newsFetchResult: FetchResult | null | void;
 }
+const styles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    article: {
+      '& + article': {
+        marginTop: euiTheme.size.l,
+      },
+      '&, header': {
+        '& > * + *': {
+          marginTop: euiTheme.size.xs,
+        },
+      },
+      h3: {
+        fontWeight: 'inherit',
+      },
+    },
+  });
 
 export const NewsFeed: FC<Props> = ({ newsFetchResult }) => (
-  <section aria-labelledby="kbnOverviewNews__title" className="kbnOverviewNews">
+  <section aria-labelledby="kbnOverviewNews__title">
     <EuiTitle size="s">
       <h2 id="kbnOverviewNews__title">
         <FormattedMessage id="kibanaOverview.news.title" defaultMessage="What's new" />
       </h2>
     </EuiTitle>
 
     <EuiSpacer size="m" />
-
-    <div className="kbnOverviewNews__content">
-      {newsFetchResult.feedItems
+    <div css={styles}>
+      {newsFetchResult?.feedItems
         .slice(0, 3)
         .map(({ title, description, linkUrl, publishOn }, index) => (
           <article key={title} aria-labelledby={`kbnOverviewNews__title${index}`}>