Update buttons to match design colors for each state (#65)

* update buttons to be violet * basic secondary button color swap * remove color from disabled button * placeholder transparent button * update secondary links * fix button styling
CDCgov · Dec 5, 2024 · 886bf32 · 886bf32
1 parent e4a66ca
commit 886bf32
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 16 deletions.
diff --git a/src/app/components/LinkButton/LinkButton.tsx b/src/app/components/LinkButton/LinkButton.tsx
@@ -3,19 +3,22 @@ import Link, { LinkProps } from 'next/link';
 
 const BUTTON_STYLES = {
   primary: {
-    button: 'usa-button bg-[#224a58] hover:bg-green',
-    text: 'text-white',
+    button:
+      'text-white usa-button bg-violet-warm-60 hover:bg-violet-warm-50 active:bg-violet-warm-70',
   },
   secondary: {
     button:
-      'usa-button hover:bg-red items-center gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3 hover:border-2',
-    text: 'text-[#224a58]',
+      'usa-button !text-violet-warm-60 items-center gap-2.5 rounded border-2 border-violet-warm-60 hover:border-violet-warm-50 bg-white px-5 py-3 hover:border-violet-warm-50 hover:border-2 hover:bg-white active:border-violet-warm-70 hover:!text-violet-warm-50',
+  },
+  transparent: {
+    button:
+      'usa-button items-center gap-2.5 rounded border-2 border-white bg-transparent px-5 py-3 hover:border-2 hover:bg-transparent active:border-violet-warm-70 hover:!text-violet-warm-50',
   },
 } as const;
 
 interface LinkButtonProps extends LinkProps {
   children: React.ReactNode;
-  variant: 'primary' | 'secondary';
+  variant: 'primary' | 'secondary' | 'transparent';
   className?: string;
   disabled?: boolean;
   'aria-label'?: string;
@@ -33,7 +36,7 @@ export function LinkButton({
   if (disabled) {
     return (
       <div
-        className="usa-button usa-button--disabled self-end justify-self-start bg-[#224a58]"
+        className="usa-button usa-button--disabled self-end justify-self-start"
         aria-disabled="true"
         role="link"
         aria-label={ariaLabel}
@@ -50,12 +53,7 @@ export function LinkButton({
       aria-label={ariaLabel}
       {...props}
     >
-      <span
-        className={classNames(
-          'text-center text-base font-bold',
-          BUTTON_STYLES[variant].text,
-        )}
-      >
+      <span className="text-center text-base font-bold text-inherit">
         {children}
       </span>
     </Link>

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -100,7 +100,7 @@ function Left() {
       </Form>
       <Button
         type="submit"
-        className="hover:bg-green mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
+        className="bg-violet-warm-60 hover:bg-violet-warm-50 active:bg-violet-warm-70 mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded px-5 py-3 text-right text-base font-bold text-white"
       >
         Send inquiry
       </Button>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -106,7 +106,7 @@ const InvitationCta = () => (
         <Paragraph className="self-stretch text-center">
           {homeContent.cta.description}
         </Paragraph>
-        <LinkButton href={homeContent.cta.ctaHref} variant="secondary">
+        <LinkButton href={homeContent.cta.ctaHref} variant="transparent">
           {homeContent.cta.ctaText}
         </LinkButton>
       </div>

diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
@@ -34,6 +34,7 @@ function StandaloneProducts() {
           imgSrc={`${basePath}/images/placeholder.png`}
           linkText="Learn more about eCR Viewer"
           linkToHref="/products/ecr-viewer"
+          linkVariant="primary"
         />
         <ProductCard
           title="Query Connector"
@@ -44,6 +45,7 @@ function StandaloneProducts() {
           imgSrc={`${basePath}/images/placeholder.png`}
           linkText="Learn more about Query Connector"
           linkToHref=""
+          linkVariant="primary"
         />
         <ProductCard
           title="eCR Parser"
@@ -54,6 +56,7 @@ function StandaloneProducts() {
           imgSrc={`${basePath}/images/placeholder.png`}
           linkText="Learn more about eCR Parser"
           linkToHref=""
+          linkVariant="secondary"
         />
         <ProductCard
           title="eCR Refiner"
@@ -64,6 +67,7 @@ function StandaloneProducts() {
           imgSrc={`${basePath}/images/placeholder.png`}
           linkText="Learn more about eCR Refiner"
           linkToHref=""
+          linkVariant="secondary"
         />
       </div>
     </ContentContainer>
@@ -76,13 +80,15 @@ interface ProductCardProps {
   imgSrc: string;
   linkText: string;
   linkToHref: string;
+  linkVariant: 'primary' | 'secondary' | 'transparent';
 }
 function ProductCard({
   title,
   text,
   imgSrc,
   linkText,
   linkToHref,
+  linkVariant,
 }: ProductCardProps) {
   return (
     <div className="grid h-full max-w-[33.75rem] grid-cols-1 items-start">
@@ -99,8 +105,7 @@ function ProductCard({
       </div>
       <LinkButton
         className="justify-self-start"
-        variant="primary"
-        disabled={!linkToHref}
+        variant={linkVariant}
         href={linkToHref}
       >
         {linkText}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,6 +11,11 @@ const config: Config = {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+        'violet-warm': {
+          50: '#b04abd',
+          60: '#864381',
+          70: '#5c395a',
+        },
       },
     },
   },