voteagora · JacobHomanics · Jan 23, 2025
diff --git a/app/public/assets/icons/info-green.svg b/app/public/assets/icons/info-green.svg
diff --git a/app/src/components/application/5/ApplicationProjectImpact.tsx b/app/src/components/application/5/ApplicationProjectImpact.tsx
@@ -57,9 +57,12 @@ const ApplicationProjectImpactForm = ({
         {!!!projects?.length && (
           <Callout
             type="error"
-            text="You haven't added or joined any projects"
-            linkText="View projects"
-            linkHref="/dashboard"
+            leftAlignedContent="You haven't added or joined any projects"
+            rightAlignedContent={
+              <ExternalLink href="/dashboard">View projects</ExternalLink>
+            }
+            leftHandSize="sm"
+            rightHandSize="sm"
           />
         )}
 

diff --git 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.
                 </p>
                 <Callout
-                  className="!text-sm"
                   type="info"
-                  text="Promises of future deliverables or impact are not allowed."
+                  leftAlignedContent="Promises of future deliverables or impact are not allowed."
+                  leftHandSize="sm"
                 />
 
                 {categories

diff --git a/app/src/components/application/6/ApplicationProjectImpact.tsx b/app/src/components/application/6/ApplicationProjectImpact.tsx
@@ -53,9 +53,12 @@ const ApplicationProjectImpactForm = ({
         {!!!projects?.length && (
           <Callout
             type="error"
-            text="You haven't added or joined any projects"
-            linkText="View projects"
-            linkHref="/dashboard"
+            leftAlignedContent="You haven't added or joined any projects"
+            rightAlignedContent={
+              <ExternalLink href={"/dashboard"}>View projects</ExternalLink>
+            }
+            leftHandSize="sm"
+            rightHandSize="sm"
           />
         )}
 

diff --git 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&apos;s impact.
                 </p>
                 <Callout
-                  className="!text-sm"
                   type="info"
-                  text="Promises of future deliverables or impact are not allowed."
+                  leftAlignedContent="Promises of future deliverables or impact are not allowed."
+                  leftHandSize="sm"
                 />
 
                 {(() => {

diff --git a/app/src/components/application/FundingApplication.tsx b/app/src/components/application/FundingApplication.tsx
@@ -240,9 +240,12 @@ export const FundingApplication = ({
         {projects.length === 0 ? (
           <Callout
             type="error"
-            text="You haven't created or joined any projects"
-            linkText="View projects"
-            linkHref="/dashboard"
+            leftAlignedContent={"You haven't created or joined any projects"}
+            rightAlignedContent={
+              <ExternalLink href={"/dashboard"}>View projects</ExternalLink>
+            }
+            leftHandSize="sm"
+            rightHandSize="sm"
           />
         ) : (
           <div className="flex flex-col gap-y-2">

diff --git 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 (
     <div
-      className={cn(
-        "flex items-center rounded-md py-2.5 px-3  w-full",
-        type === "error"
-          ? "bg-red-200 text-destructive-foreground"
-          : "bg-accent text-accent-foreground",
-        className,
-      )}
+      className={`flex items-center rounded-md py-2.5 px-3 w-full ${
+        type && types[type].backgroundColor
+      } ${type && types[type].textColor}`}
     >
-      {showIcon && (
+      {showIcon && type && types[type].icon && (
         <Image
           alt="Info"
-          src={
-            type === "error"
-              ? "/assets/icons/info-red.svg"
-              : "/assets/icons/info-blue.svg"
-          }
-          width={16.5}
-          height={16.5}
+          src={types[type].icon}
+          width={iconSizes[iconSize]}
+          height={iconSizes[iconSize]}
         />
       )}
-      <p className={cn("mr-5 text-sm font-medium", showIcon && "ml-2")}>
-        {text}
-      </p>
-      {linkText && (
-        <ExternalLink
-          href={linkHref ?? "#"}
-          className="ml-auto text-sm font-medium shrink-0"
-        >
-          {linkText}
-        </ExternalLink>
-      )}
+
+      <div
+        className={`mr-5 font-medium ${textSizes[leftHandSize]} ${
+          showIcon && "ml-2"
+        }`}
+      >
+        {leftAlignedContent}
+      </div>
+      <div
+        className={`ml-auto shrink-0 font-medium ${textSizes[rightHandSize]}`}
+      >
+        {rightAlignedContent}
+      </div>
     </div>
   )
 })
diff --git 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.
           </p>
+
           <Callout
             type="info"
-            text="Failure to report will result in disqualification from Retro Funding"
+            leftAlignedContent="Failure to report will result in disqualification from Retro Funding"
+            leftHandSize="sm"
           />
           <div className="flex flex-col gap-y-2">
             <p className="text-sm font-medium text-foreground">

diff --git a/app/src/components/projects/teams/TeamForm.tsx b/app/src/components/projects/teams/TeamForm.tsx
@@ -106,7 +106,8 @@ export default function AddTeamDetailsForm({
           </p>
           <Callout
             type="info"
-            text="Access to an admin account is needed to claim Retro Funding rewards"
+            leftAlignedContent="Access to an admin account is needed to claim Retro Funding rewards"
+            leftHandSize="sm"
           />
         </div>
         <div className="flex flex-col gap-1.5">

diff --git a/app/src/components/rewards/ClaimForm.tsx b/app/src/components/rewards/ClaimForm.tsx
@@ -470,10 +470,11 @@ function ClaimFormSuperfluid({
               <Callout
                 type="info"
                 showIcon={false}
-                text={`You can start your token stream on or after ${format(
+                leftAlignedContent={`You can start your token stream on or after ${format(
                   reward.claim.tokenStreamClaimableAt,
                   "eeee, MMMM d",
                 )}`}
+                leftHandSize="sm"
               />
             ) : (
               <MaybeLink