[Cloud Security]Added new Google Cloud icon to be used on our component

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>
 );