align text and icon

Author: pd-redis

redisinsight/ui/src/components/base/icons/Icon.tsx

@@ -12,6 +12,7 @@ type BaseIconProps = Omit<MonochromeIconProps, 'color' | 'size'> & {
     | (string & {})
   size?: IconSizeType | null
   isSvg?: boolean
+  style?: React.CSSProperties
 }
 
 const sizesMap = {
@@ -43,6 +44,7 @@ export const Icon = ({
   color = 'primary600',
   size,
   className,
+  style = {},
   ...rest
 }: BaseIconProps) => {
   let sizeValue: number | string | undefined
@@ -73,7 +75,13 @@ export const Icon = ({
     ? svgProps
     : { color, customColor, size, customSize, ...rest }
 
-  return <IconComponent {...props} className={cx(className, 'RI-Icon')} />
+  return (
+    <IconComponent
+      {...props}
+      style={{ ...style, verticalAlign: 'middle' }}
+      className={cx(className, 'RI-Icon')}
+    />
+  )
 }
 
 export type IconProps = Omit<BaseIconProps, 'icon'>

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx

@@ -14,7 +14,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { createAxiosError, pipelineToJson } from 'uiSrc/utils'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
-import { Text } from 'uiSrc/components/base/text'
+import { ColorText, Text } from 'uiSrc/components/base/text'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
@@ -128,14 +128,19 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
           </PrimaryButton>
         }
       >
-        {isPipelineValid ? (
-          <Title size="XS">Are you sure you want to deploy the pipeline?</Title>
-        ) : (
-          <Text color="danger" size="M">
-           <RiIcon type="InfoIcon" size="M" color="danger500" />
-           Your RDI pipeline contains errors. Are you sure you want to continue?
-          </Text>
-        )}
+        <Title size="XS">
+          {isPipelineValid ? (
+            <ColorText color="default">
+              Are you sure you want to deploy the pipeline?
+            </ColorText>
+          ) : (
+            <ColorText color="warning">
+              <RiIcon type="ToastDangerIcon" size="L" color="attention500" />
+              Your RDI pipeline contains errors. Are you sure you want to
+              continue?
+            </ColorText>
+          )}
+        </Title>
         <Spacer size="s" />
         <Text size="s">
           When deployed, this local configuration will overwrite any existing