[SharedUX] SCSS migration reporting plugin (#215492)

## Summary

This PR is a part of a [Replace SCSS with
CSS-in-JS](https://github.com/elastic/kibana-team/issues/1417) epic.

- rewriting styles using `@emotion/react`

x-pack/platform/plugins/private/reporting/public/management/report_listing.scss

@@ -1,7 +0,0 @@
-.kbnReporting {
-  &__reportListing {
-    &__typeIcon {
-      padding-left: $euiSizeS;
-    }
-  }
-}

x-pack/platform/plugins/private/reporting/public/management/report_listing.tsx

@@ -6,8 +6,6 @@
  */
 
 import React from 'react';
-
-import './report_listing.scss';
 import { useInternalApiClient, useKibana } from '@kbn/reporting-public';
 import { ReportListingStateful } from './stateful/report_listing_stateful';
 import { ReportListingDefault } from './default/report_listing_default';

x-pack/platform/plugins/private/reporting/public/management/report_listing_table.tsx

@@ -16,8 +16,10 @@ import {
   EuiIconTip,
   EuiLink,
   EuiSpacer,
+  UseEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { ILicense } from '@kbn/licensing-plugin/public';
 import { durationToNumber, REPORT_TABLE_ID, REPORT_TABLE_ROW_ID } from '@kbn/reporting-common';
 
@@ -230,7 +232,7 @@ export class ReportListingTable extends Component<ListingPropsInternal, State> {
         }),
         render: (_type: string, job) => {
           return (
-            <div className="kbnReporting__reportListing__typeIcon">
+            <div css={({ euiTheme }: UseEuiTheme) => css({ paddingLeft: euiTheme.size.s })}>
               <EuiIconTip
                 type={guessAppIconTypeFromObjectType(job.objectType)}
                 size="s"

x-pack/platform/plugins/private/reporting/public/redirect/redirect_app.scss

@@ -1,8 +0,0 @@
-.reportingRedirectApp {
-  &__interstitialPage {
-    /*
-      Create some padding above and below the page so that the errors (if any) display nicely.
-    */
-    margin: $euiSizeXXL auto;
-  }
-}

x-pack/platform/plugins/private/reporting/public/redirect/redirect_app.tsx

@@ -9,8 +9,9 @@ import { parse } from 'query-string';
 import type { FunctionComponent } from 'react';
 import React, { useEffect, useState } from 'react';
 
-import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
+import { EuiCallOut, EuiCodeBlock, UseEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 
 import type { ScopedHistory } from '@kbn/core/public';
 import { REPORTING_REDIRECT_LOCATOR_STORE_KEY } from '@kbn/reporting-common';
@@ -20,8 +21,6 @@ import type { ScreenshotModePluginSetup } from '@kbn/screenshot-mode-plugin/publ
 import { ReportingAPIClient } from '@kbn/reporting-public';
 import type { SharePluginSetup } from '../shared_imports';
 
-import './redirect_app.scss';
-
 interface Props {
   apiClient: ReportingAPIClient;
   history: ScopedHistory;
@@ -75,7 +74,14 @@ export const RedirectApp: FunctionComponent<Props> = ({ apiClient, screenshotMod
   }, [apiClient, screenshotMode, share]);
 
   return (
-    <div className="reportingRedirectApp__interstitialPage">
+    <div
+      css={({ euiTheme }: UseEuiTheme) =>
+        css({
+          // Create some padding above and below the page so that the errors (if any) display nicely.
+          margin: `${euiTheme.size.xxl} auto`,
+        })
+      }
+    >
       {error ? (
         <EuiCallOut title={i18nTexts.errorTitle} color="danger">
           <p>{error.message}</p>