fix: improve payment link sharing UI with updated styles and icons (#5313)

Author: idoshamun

packages/webapp/pages/recruiter/[opportunityId]/payment.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import { RecruiterPaymentContext } from '@dailydotdev/shared/src/contexts/RecruiterPaymentContext/RecruiterPaymentContext';
 import HeaderLogo from '@dailydotdev/shared/src/components/layout/HeaderLogo';
 import {
+  CreditCardIcon,
   MoveToIcon,
   ShareIcon,
 } from '@dailydotdev/shared/src/components/icons';
@@ -227,16 +228,26 @@ const RecruiterPaymentPage = (): ReactElement => {
                   </Typography>
                 </div>
               </div>
-              <div className="mt-6 flex flex-col gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4">
-                <Typography
-                  type={TypographyType.Footnote}
-                  color={TypographyColor.Tertiary}
-                >
-                  Need someone else to complete the payment?
-                </Typography>
+              <div className="relative mt-6 overflow-hidden rounded-16 border-l-4 border-accent-cabbage-default bg-gradient-to-r from-action-share-float to-transparent p-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex size-12 shrink-0 items-center justify-center rounded-12 bg-action-share-float">
+                    <CreditCardIcon className="text-accent-cabbage-default" />
+                  </div>
+                  <FlexCol className="flex-1 gap-1">
+                    <Typography type={TypographyType.Body} bold>
+                      Need someone else to pay?
+                    </Typography>
+                    <Typography
+                      type={TypographyType.Footnote}
+                      color={TypographyColor.Secondary}
+                    >
+                      Share a secure payment link with your finance team
+                    </Typography>
+                  </FlexCol>
+                </div>
                 <Button
+                  className="mt-4 w-full"
                   variant={ButtonVariant.Secondary}
-                  size={ButtonSize.Small}
                   icon={<ShareIcon />}
                   onClick={handleSharePaymentLink}
                 >

packages/webapp/pages/recruiter/[opportunityId]/plans.tsx

@@ -11,6 +11,7 @@ import {
   Typography,
   TypographyType,
   TypographyColor,
+  TypographyTag,
 } from '@dailydotdev/shared/src/components/typography/Typography';
 import { VIcon } from '@dailydotdev/shared/src/components/icons/V';
 import { InfoIcon } from '@dailydotdev/shared/src/components/icons/Info';
@@ -28,7 +29,10 @@ import { getPathnameWithQuery } from '@dailydotdev/shared/src/lib';
 import { anchorDefaultRel } from '@dailydotdev/shared/src/lib/strings';
 import { Loader } from '@dailydotdev/shared/src/components/Loader';
 import { recruiterPremiumPlanBg } from '@dailydotdev/shared/src/styles/custom';
-import { WarningIcon } from '@dailydotdev/shared/src/components/icons';
+import {
+  CreditCardIcon,
+  WarningIcon,
+} from '@dailydotdev/shared/src/components/icons';
 import {
   getLayout,
   layoutProps,
@@ -312,6 +316,27 @@ const RecruiterPlans = (): ReactElement => {
         </Typography>
       </div>
 
+      <div className="flex items-center gap-3 rounded-12 border-l-4 border-accent-cabbage-default bg-gradient-to-r from-action-share-float to-transparent px-4 py-3">
+        <CreditCardIcon
+          size={IconSize.Medium}
+          className="text-accent-cabbage-default"
+        />
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Callout}
+            bold
+          >
+            Not the one paying?
+          </Typography>{' '}
+          No problem — you can share a secure payment link with your finance
+          team in the next step.
+        </Typography>
+      </div>
+
       <div className="flex flex-col gap-4 laptop:flex-row">
         {isPending && !prices && (
           <div className="flex min-h-[31rem] flex-1 flex-col items-center justify-center gap-6 rounded-16 border border-border-subtlest-tertiary p-6">