fix: update top banner (#9580)

* fix: update wrong banner message in english

* fix: update `resend_email` translation in pt-BR

* chore: add `Icon` prop to `TopBanner` component

* fix: remove unnecessary variant scope

* Remove translations so they can be retranslated, complete design

* Changed key of already translated entry

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/public/static/locales/da/common.json

@@ -1349,7 +1349,6 @@
   "your_team_disbanded_successfully": "Dit team er blevet opløst",
   "error_creating_team": "Fejl ved oprettelse af team",
   "you": "Dig",
-  "send_email": "Send e-mail",
   "member_already_invited": "Medlemmet er allerede blevet inviteret",
   "enter_email_or_username": "Indtast e-mail eller brugernavn",
   "team_name_taken": "Dette navn er allerede i brug",

apps/web/public/static/locales/en/common.json

@@ -14,7 +14,7 @@
   "verify_email_subject": "{{appName}}: Verify your account",
   "check_your_email": "Check your email",
   "verify_email_page_body": "We've sent an email to {{email}}. It is important to verify your email address to guarantee the best email and calendar deliverability from {{appName}}.",
-  "verify_email_banner_body": "Please verify your email adress to guarantee the best email and calendar deliverability from {{appName}}.",
+  "verify_email_banner_body": "Verify your email adress to guarantee the best email and calendar deliverability",
   "verify_email_email_header": "Verify your email address",
   "verify_email_email_button": "Verify email",
   "verify_email_email_body": "Please verify your email address by clicking the button below.",
@@ -1457,7 +1457,7 @@
   "your_org_disbanded_successfully": "Your organization has been disbanded successfully",
   "error_creating_team": "Error creating team",
   "you": "You",
-  "send_email": "Send email",
+  "resend_email": "Resend email",
   "member_already_invited": "Member has already been invited",
   "enter_email_or_username": "Enter an email or username",
   "team_name_taken": "This name is already taken",

apps/web/public/static/locales/nl/common.json

@@ -1413,7 +1413,7 @@
   "your_team_disbanded_successfully": "Uw team is ontbonden",
   "error_creating_team": "Fout bij het aanmaken van team",
   "you": "U",
-  "send_email": "E-mail versturen",
+  "resend_email": "E-mail opnieuw versturen",
   "member_already_invited": "Lid is al uitgenodigd",
   "enter_email_or_username": "Voer een e-mailadres of gebruikersnaam in",
   "team_name_taken": "Deze naam is al in gebruik",
@@ -1669,6 +1669,7 @@
   "verification_code": "Verificatiecode",
   "can_you_try_again": "Kunt u het opnieuw proberen met een andere tijd?",
   "verify": "Verifiëren",
+  "verify_email_banner_body": "Rond uw aanmelding af door de verificatie van uw e-mailadres te voltooien",
   "timezone_info": "De tijdzone van de ontvanger",
   "event_end_time_variable": "Eindtijd gebeurtenis",
   "event_end_time_info": "De eindtijd van de gebeurtenis",

apps/web/public/static/locales/pt-BR/common.json

@@ -1413,7 +1413,7 @@
   "your_team_disbanded_successfully": "Sua equipe foi desfeita com êxito",
   "error_creating_team": "Erro ao criar equipe",
   "you": "Você",
-  "send_email": "Enviar e-mail",
+  "resend_email": "Reenviar e-mail",
   "member_already_invited": "O membro já foi convidado",
   "enter_email_or_username": "Insira um e-mail ou nome de usuário",
   "team_name_taken": "Este nome já está em uso",

packages/features/users/components/VerifyEmailBanner.tsx

@@ -4,7 +4,8 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
-import { Button, TopBanner, showToast } from "@calcom/ui";
+import { TopBanner, showToast } from "@calcom/ui";
+import { Mail } from "@calcom/ui/components/icon";
 
 import { useFlagMap } from "../../flags/context/provider";
 
@@ -21,16 +22,18 @@ function VerifyEmailBanner() {
   return (
     <>
       <TopBanner
+        Icon={Mail}
         text={t("verify_email_banner_body", { appName: APP_NAME })}
         variant="warning"
         actions={
-          <Button
+          <a
+            className="underline hover:cursor-pointer"
             onClick={() => {
               mutation.mutate();
               showToast(t("email_sent"), "success");
             }}>
-            {t("send_email")}
-          </Button>
+            {t("resend_email")}
+          </a>
         }
       />
     </>

packages/ui/components/top-banner/TopBanner.tsx

@@ -1,10 +1,12 @@
 import classNames from "classnames";
 import { noop } from "lodash";
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 
+import type { LucideIcon, LucideProps } from "@calcom/ui/components/icon";
 import { X, AlertTriangle, Info } from "@calcom/ui/components/icon";
 
 export type TopBannerProps = {
+  Icon?: ComponentType<LucideProps> & LucideIcon;
   text: string;
   variant?: keyof typeof variantClassName;
   actions?: ReactNode;
@@ -17,8 +19,26 @@ const variantClassName = {
   error: "bg-red-400",
 };
 
+const defaultIconProps = {
+  className: "text-emphasis h-4 w-4 stroke-[2.5px]",
+  "aria-hidden": "true",
+} satisfies LucideProps;
+
 export function TopBanner(props: TopBannerProps) {
-  const { variant = "default", text, actions, onClose } = props;
+  const { Icon, variant = "default", text, actions, onClose } = props;
+
+  const renderDefaultIconByVariant = () => {
+    switch (variant) {
+      case "error":
+        return <AlertTriangle {...defaultIconProps} />;
+      case "warning":
+        return <Info {...defaultIconProps} />;
+      default:
+        return null;
+    }
+  };
+  const defaultIcon = renderDefaultIconByVariant();
+
   return (
     <div
       data-testid="banner"
@@ -28,12 +48,7 @@ export function TopBanner(props: TopBannerProps) {
       )}>
       <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
         <p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
-          {variant === "error" && (
-            <AlertTriangle className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
-          )}
-          {variant === "warning" && (
-            <Info className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
-          )}
+          {Icon ? <Icon {...defaultIconProps} /> : defaultIcon}
           {text}
         </p>
         {actions && <div className="text-sm font-medium">{actions}</div>}