Fix PR review comments

Author: asadath1395

src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss

@@ -146,6 +146,13 @@
                             font-size: 10px;
                         }
                     }
+
+                    .info-icon {
+                        margin-left: $space-sm;
+                        color: $turq-160;
+                        cursor: pointer;
+                        outline: none;
+                    }
                 }
             }
             &.mobile {

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import React, { FocusEvent, SVGProps } from 'react'
 
-import { Button, HelpIcon, IconCheck, IconOutline, textFormatMoneyLocaleString, useCheckIsMobile } from '../../../../lib'
+import { Button, IconCheck, IconOutline, IconSolid, textFormatMoneyLocaleString, Tooltip, useCheckIsMobile } from '../../../../lib'
 import { FormCard, FormInputModel } from '../../form-input.model'
 
 import styles from './FormCardSet.module.scss'
@@ -67,14 +67,10 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                                                             <span className='body-main'>{row.text}</span>
                                                         }
                                                         {row.infoIcon && (
-                                                            <HelpIcon
-                                                                inverted
-                                                                arrowColor='#000000'
-                                                                backgroundColor='#000000'
-                                                                type='Info'
-                                                            >
-                                                                {row.tooltipText}
-                                                            </HelpIcon>
+                                                            <Tooltip
+                                                              content={row.tooltipText}
+                                                              trigger={<IconSolid.InformationCircleIcon className={styles['info-icon']} width={16} height={16} />}
+                                                            />
                                                         )}
                                                     </span>
                                                 )}

src-ts/lib/help-icon/HelpIcon.module.scss

@@ -48,4 +48,3 @@ export * from './radio-button'
 export * from './payment-form'
 export * from './react-select'
 export * from './social-share'
-export * from './help-icon'

src-ts/lib/help-icon/HelpIcon.tsx

@@ -74,5 +74,13 @@
     align-items: center;
     margin-left: $space-sm;
     color: $turq-160;
+
+    .help-icon {
+      cursor: pointer;
+
+      @include ltemd {
+        @include icon-xl;
+      }
+    }
   }
 }

src-ts/lib/help-icon/index.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { IconWrapper, textFormatMoneyLocaleString, Tooltip, IconOutline } from '../../../lib'
+import { IconOutline, IconWrapper, textFormatMoneyLocaleString, Tooltip } from '../../../lib'
 
 import styles from './WorkServicePrice.module.scss'
 
@@ -45,7 +45,7 @@ const ServicePrice: FC<WorkServicePriceProps> = (props: WorkServicePriceProps) =
                   content='The price and project length is dynamic and dependent on the
                   variables selected as you define your work.'
                   trigger={(
-                    <IconOutline.QuestionMarkCircleIcon width={14} height={14} />
+                    <IconOutline.QuestionMarkCircleIcon className={styles['help-icon']} width={16} height={16} />
                   )}
                 />
               </span>