[Cloud Security]Added new Google Cloud icon to be used on our component (#163840)

## Summary

Originally I made a PR to add the icon into eui Library, however they
told me that they no longer support adding 3rd party logo into eui
library as such we will need to add it to Kibana instead.
This Changes includes changing the GCP logo on 
- Findings flyout
- Benchmark flyout
- Dashboard
- CSPM and CNVM onboarding page (GCP tab)
<img width="795" alt="Screenshot 2023-08-14 at 9 47 25 AM"
src="53e3aafa-7f3d-4c8f-b20c-ec365693ed88">

<img width="1223" alt="Screenshot 2023-08-14 at 9 33 58 AM"
src="2fcdf9ad-8088-42c4-bb32-d6cdf12d02bc">
<img width="563" alt="Screenshot 2023-08-14 at 9 35 36 AM"
src="5c63d03a-f929-4e5c-80e7-04d8327c7acb">
<img width="754" alt="Screenshot 2023-08-14 at 9 37 40 AM"
src="cd5bc65b-3118-4d1c-a943-7a12518ad5e6">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/cloud_security_posture/public/assets/icons/google_cloud_logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill="#EA4335" d="M20.951 10.723 23.56 8.09l.174-1.109C18.98 2.618 11.427 3.113 7.143 8.014c-1.19 1.36-2.073 3.058-2.543 4.81l.934-.133 5.215-.868.403-.416c2.32-2.573 6.242-2.919 8.92-.73l.88.046Z"/>
+    <path fill="#4285F4" d="M27.274 12.746a11.88 11.88 0 0 0-3.541-5.765l-3.66 3.696a6.595 6.595 0 0 1 2.388 5.21v.657c1.8 0 3.258 1.472 3.258 3.288a3.242 3.242 0 0 1-3.258 3.253h-6.524l-.64.702v3.945l.64.619h6.524c4.68.037 8.502-3.727 8.539-8.451a8.579 8.579 0 0 0-3.726-7.154Z"/>
+    <path fill="#34A853" d="M9.422 28.35h6.515v-5.265H9.422a3.17 3.17 0 0 1-1.336-.296l-.924.286-2.626 2.634-.229.896c1.473 1.122 3.27 1.754 5.115 1.746Z"/>
+    <path fill="#FBBC05" d="M9.422 11.268C4.743 11.296.972 15.15 1 19.874a8.584 8.584 0 0 0 3.308 6.73l3.779-3.815c-1.64-.748-2.369-2.696-1.628-4.352a3.245 3.245 0 0 1 5.937 0l3.78-3.815a8.435 8.435 0 0 0-6.754-3.354Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M1 4h30v24.375H1z"/>
+    </clipPath>
+  </defs>
+</svg>
+

x-pack/plugins/cloud_security_posture/public/common/constants.ts

@@ -27,6 +27,7 @@ import {
 import eksLogo from '../assets/icons/cis_eks_logo.svg';
 import aksLogo from '../assets/icons/cis_aks_logo.svg';
 import gkeLogo from '../assets/icons/cis_gke_logo.svg';
+import googleCloudLogo from '../assets/icons/google_cloud_logo.svg';
 
 export const statusColors = {
   passed: euiThemeVars.euiColorSuccess,
@@ -91,7 +92,7 @@ export const cloudPostureIntegrations: CloudPostureIntegrations = {
         benchmark: i18n.translate('xpack.csp.cspmIntegration.gcpOption.benchmarkTitle', {
           defaultMessage: 'CIS GCP',
         }),
-        icon: 'logoGCP',
+        icon: googleCloudLogo,
         isBeta: true,
       },
       {
@@ -191,7 +192,7 @@ export const cloudPostureIntegrations: CloudPostureIntegrations = {
           defaultMessage: 'GCP',
         }),
         disabled: true,
-        icon: 'logoGCP',
+        icon: googleCloudLogo,
         tooltip: i18n.translate('xpack.csp.vulnMgmtIntegration.gcpOption.tooltipContent', {
           defaultMessage: 'Coming soon',
         }),

x-pack/plugins/cloud_security_posture/public/components/accounts_evaluated_widget.tsx

@@ -38,12 +38,12 @@ export const AccountsEvaluatedWidget = ({
 
   return (
     <>
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup gutterSize="m">
         {cisAwsClusterAmount > 0 && (
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="xs">
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
               <EuiFlexItem>
-                <CISBenchmarkIcon type={CIS_AWS} name={cisAwsBenchmarkName} />
+                <CISBenchmarkIcon type={CIS_AWS} name={cisAwsBenchmarkName} size={'l'} />
               </EuiFlexItem>
               <EuiFlexItem
                 grow={false}
@@ -61,9 +61,9 @@ export const AccountsEvaluatedWidget = ({
         )}
         {cisGcpClusterAmount > 0 && (
           <EuiFlexItem>
-            <EuiFlexGroup gutterSize="xs">
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
               <EuiFlexItem>
-                <CISBenchmarkIcon type={CIS_GCP} name={cisGcpBenchmarkName} />
+                <CISBenchmarkIcon type={CIS_GCP} name={cisGcpBenchmarkName} size={'l'} />
               </EuiFlexItem>
               <EuiFlexItem
                 grow={false}

x-pack/plugins/cloud_security_posture/public/components/cis_benchmark_icon.tsx

@@ -6,15 +6,17 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip, IconSize } from '@elastic/eui';
 import { CSSInterpolation } from '@emotion/serialize';
 import type { BenchmarkId } from '../../common/types';
 import cisEksIcon from '../assets/icons/cis_eks_logo.svg';
+import googleCloudLogo from '../assets/icons/google_cloud_logo.svg';
 
 interface Props {
   type: BenchmarkId;
   name?: string;
   style?: CSSInterpolation;
+  size?: IconSize;
 }
 
 const getBenchmarkIdIconType = (props: Props): string => {
@@ -24,7 +26,7 @@ const getBenchmarkIdIconType = (props: Props): string => {
     case 'cis_aws':
       return 'logoAWS';
     case 'cis_gcp':
-      return 'logoGCP';
+      return googleCloudLogo;
     case 'cis_k8s':
     default:
       return 'logoKubernetes';
@@ -33,6 +35,6 @@ const getBenchmarkIdIconType = (props: Props): string => {
 
 export const CISBenchmarkIcon = (props: Props) => (
   <EuiToolTip content={props.name}>
-    <EuiIcon type={getBenchmarkIdIconType(props)} size="xl" css={props.style} />
+    <EuiIcon type={getBenchmarkIdIconType(props)} size={props.size || 'xl'} css={props.style} />
   </EuiToolTip>
 );