From eb1b7eabf8ad7a0f14751542f9c304cc0099f5f0 Mon Sep 17 00:00:00 2001 From: Jacob Homanics Date: Thu, 23 Jan 2025 16:41:59 -0600 Subject: [PATCH] implemented improved callout card --- app/public/assets/icons/info-green.svg | 3 + .../5/ApplicationProjectImpact.tsx | 9 +- .../application/5/ProjectImpactForm.tsx | 4 +- .../6/ApplicationProjectImpact.tsx | 9 +- .../application/6/ProjectImpactForm.tsx | 4 +- .../application/FundingApplication.tsx | 9 +- app/src/components/common/Callout.tsx | 121 ++++++++++++------ .../components/projects/grants/GrantsForm.tsx | 5 +- .../components/projects/teams/TeamForm.tsx | 3 +- app/src/components/rewards/ClaimForm.tsx | 3 +- 10 files changed, 115 insertions(+), 55 deletions(-) create mode 100644 app/public/assets/icons/info-green.svg diff --git a/app/public/assets/icons/info-green.svg b/app/public/assets/icons/info-green.svg new file mode 100644 index 00000000..657140f7 --- /dev/null +++ b/app/public/assets/icons/info-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/src/components/application/5/ApplicationProjectImpact.tsx b/app/src/components/application/5/ApplicationProjectImpact.tsx index 37afd172..3e2265fa 100644 --- a/app/src/components/application/5/ApplicationProjectImpact.tsx +++ b/app/src/components/application/5/ApplicationProjectImpact.tsx @@ -57,9 +57,12 @@ const ApplicationProjectImpactForm = ({ {!!!projects?.length && ( View projects + } + leftHandSize="sm" + rightHandSize="sm" /> )} diff --git a/app/src/components/application/5/ProjectImpactForm.tsx b/app/src/components/application/5/ProjectImpactForm.tsx index a63f3271..5a40781e 100644 --- a/app/src/components/application/5/ProjectImpactForm.tsx +++ b/app/src/components/application/5/ProjectImpactForm.tsx @@ -206,9 +206,9 @@ const ProjectImpactForm = ({ focus on communicating your project’s impact.

{categories diff --git a/app/src/components/application/6/ApplicationProjectImpact.tsx b/app/src/components/application/6/ApplicationProjectImpact.tsx index b20a8ae1..3724c60c 100644 --- a/app/src/components/application/6/ApplicationProjectImpact.tsx +++ b/app/src/components/application/6/ApplicationProjectImpact.tsx @@ -53,9 +53,12 @@ const ApplicationProjectImpactForm = ({ {!!!projects?.length && ( View projects + } + leftHandSize="sm" + rightHandSize="sm" /> )} diff --git a/app/src/components/application/6/ProjectImpactForm.tsx b/app/src/components/application/6/ProjectImpactForm.tsx index 89f4dce1..4587b46c 100644 --- a/app/src/components/application/6/ProjectImpactForm.tsx +++ b/app/src/components/application/6/ProjectImpactForm.tsx @@ -219,9 +219,9 @@ const ProjectImpactForm = ({ Instead, focus on communicating your project's impact.

{(() => { diff --git a/app/src/components/application/FundingApplication.tsx b/app/src/components/application/FundingApplication.tsx index c0265118..6e771d85 100644 --- a/app/src/components/application/FundingApplication.tsx +++ b/app/src/components/application/FundingApplication.tsx @@ -240,9 +240,12 @@ export const FundingApplication = ({ {projects.length === 0 ? ( View projects + } + leftHandSize="sm" + rightHandSize="sm" /> ) : (
diff --git a/app/src/components/common/Callout.tsx b/app/src/components/common/Callout.tsx index 305a43db..aee8718c 100644 --- a/app/src/components/common/Callout.tsx +++ b/app/src/components/common/Callout.tsx @@ -1,59 +1,102 @@ import Image from "next/image" -import Link from "next/link" -import { memo } from "react" +import React, { memo, ReactNode } from "react" -import { cn } from "@/lib/utils" +type CalloutProperties = { + backgroundColor: string + textColor: string + icon: string +} -import ExternalLink from "../ExternalLink" +const types = { + info: { + backgroundColor: "bg-accent", + textColor: "text-accent-foreground", + icon: "/assets/icons/info-blue.svg", + } as CalloutProperties, + error: { + backgroundColor: "bg-red-200", + textColor: "text-destructive-foreground", + icon: "/assets/icons/info-red.svg", + } as CalloutProperties, + success: { + backgroundColor: "bg-green-100", + textColor: "text-green-800", + icon: "/assets/icons/info-green.svg", + } as CalloutProperties, + + optimism: { + backgroundColor: "bg-optimismRed", + textColor: "text-white", + } as CalloutProperties, + + optimismBright: { + backgroundColor: "bg-red-100", + textColor: "text-red-600", + } as CalloutProperties, +} + +const textSizes = { + xs: "text-xs", + sm: "text-sm", + base: "", + lg: "text-lg", + xl: "text-xl", + xxl: "text-2xl", +} + +const iconSizes = { + xs: 8, + sm: 12, + base: 16.5, + lg: 20, + xl: 24, + xxl: 28, +} export const Callout = memo(function Callout({ - className, type, - text, - linkText, - linkHref, showIcon = true, + leftAlignedContent, + rightAlignedContent, + leftHandSize = "base", + rightHandSize = "base", + iconSize = "base", }: { - className?: string - type: "info" | "error" - text: string - linkText?: string - linkHref?: string + type?: keyof typeof types showIcon?: boolean + leftAlignedContent?: ReactNode + rightAlignedContent?: ReactNode + leftHandSize?: keyof typeof textSizes + rightHandSize?: keyof typeof textSizes + iconSize?: keyof typeof iconSizes }) { return (
- {showIcon && ( + {showIcon && type && types[type].icon && ( Info )} -

- {text} -

- {linkText && ( - - {linkText} - - )} + +
+ {leftAlignedContent} +
+
+ {rightAlignedContent} +
) }) diff --git a/app/src/components/projects/grants/GrantsForm.tsx b/app/src/components/projects/grants/GrantsForm.tsx index 892449ad..b018f72b 100644 --- a/app/src/components/projects/grants/GrantsForm.tsx +++ b/app/src/components/projects/grants/GrantsForm.tsx @@ -41,6 +41,7 @@ import { PRICING_MODEL_TYPES, PRICINGMODELTYPES, } from "./schema" +import ExternalLink from "@/components/ExternalLink" function toFormValues( project: ProjectWithDetails, @@ -332,9 +333,11 @@ export const GrantsForm = ({ project }: { project: ProjectWithDetails }) => { Describe your pricing model, and list any Optimism Grants, Optimism Retro Funding, or investment your project has received.

+

diff --git a/app/src/components/projects/teams/TeamForm.tsx b/app/src/components/projects/teams/TeamForm.tsx index e519623e..4c6bc053 100644 --- a/app/src/components/projects/teams/TeamForm.tsx +++ b/app/src/components/projects/teams/TeamForm.tsx @@ -106,7 +106,8 @@ export default function AddTeamDetailsForm({

diff --git a/app/src/components/rewards/ClaimForm.tsx b/app/src/components/rewards/ClaimForm.tsx index d14434a9..6b2f778e 100644 --- a/app/src/components/rewards/ClaimForm.tsx +++ b/app/src/components/rewards/ClaimForm.tsx @@ -470,10 +470,11 @@ function ClaimFormSuperfluid({ ) : (