From e1e187299679de159338702ea465739e91c17eb7 Mon Sep 17 00:00:00 2001
From: lynx <141365347+iLynxcat@users.noreply.github.com>
Date: Sun, 1 Sep 2024 04:20:46 -0500
Subject: [PATCH] gradient CTA button icon + CTA button text shadow for
contrast
---
.../src/components/cta-primary-button.tsx | 19 +++++++++++++------
1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/apps/landing/src/components/cta-primary-button.tsx b/apps/landing/src/components/cta-primary-button.tsx
index 30ba86739..54b86683d 100644
--- a/apps/landing/src/components/cta-primary-button.tsx
+++ b/apps/landing/src/components/cta-primary-button.tsx
@@ -1,10 +1,10 @@
-import { ArrowCircleDown } from '@phosphor-icons/react/dist/ssr';
+import { ArrowCircleDown, Icon } from '@phosphor-icons/react';
import clsx from 'clsx';
import Link from 'next/link';
-import { ReactNode } from 'react';
+import { ReactNode, useId } from 'react';
import { Platform } from '~/utils/current-platform';
-type CtaButtonProps = { icon?: ReactNode; glow?: 'lg' | 'sm' | 'none' } & (
+type CtaButtonProps = { iconComponent?: Icon; glow?: 'lg' | 'sm' | 'none' } & (
| {
href: string;
children: ReactNode;
@@ -15,7 +15,7 @@ type CtaButtonProps = { icon?: ReactNode; glow?: 'lg' | 'sm' | 'none' } & (
);
export function CtaPrimaryButton({
- icon = ,
+ iconComponent: Icon = ArrowCircleDown,
glow = 'lg',
...props
}: CtaButtonProps) {
@@ -32,6 +32,8 @@ export function CtaPrimaryButton({
const children =
'children' in props ? props.children : `Download for ${platformName ?? 'Linux'}`;
+ const id = useId();
+
return (
- {icon}
-
+
+
+
+
+
+
+
{children}