From af505935bddca68b93f79f1eca9648969b426440 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Esa=C3=BA=20Morais?= <55207584+esau-morais@users.noreply.github.com> Date: Fri, 16 Jun 2023 22:06:04 -0300 Subject: [PATCH] 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 --- apps/web/public/static/locales/da/common.json | 1 - apps/web/public/static/locales/en/common.json | 4 +-- apps/web/public/static/locales/nl/common.json | 3 +- .../public/static/locales/pt-BR/common.json | 2 +- .../users/components/VerifyEmailBanner.tsx | 11 ++++--- .../ui/components/top-banner/TopBanner.tsx | 31 ++++++++++++++----- 6 files changed, 35 insertions(+), 17 deletions(-) diff --git a/apps/web/public/static/locales/da/common.json b/apps/web/public/static/locales/da/common.json index 5c91b56f99..7692e522df 100644 --- a/apps/web/public/static/locales/da/common.json +++ b/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", diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index a494565baa..080fb4a281 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/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", diff --git a/apps/web/public/static/locales/nl/common.json b/apps/web/public/static/locales/nl/common.json index 01812093dc..b5852ca91b 100644 --- a/apps/web/public/static/locales/nl/common.json +++ b/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", diff --git a/apps/web/public/static/locales/pt-BR/common.json b/apps/web/public/static/locales/pt-BR/common.json index 0b1e67eb9d..cf2ba62caa 100644 --- a/apps/web/public/static/locales/pt-BR/common.json +++ b/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", diff --git a/packages/features/users/components/VerifyEmailBanner.tsx b/packages/features/users/components/VerifyEmailBanner.tsx index b909755ddf..cc8aebbff1 100644 --- a/packages/features/users/components/VerifyEmailBanner.tsx +++ b/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 ( <> { mutation.mutate(); showToast(t("email_sent"), "success"); }}> - {t("send_email")} - + {t("resend_email")} + } /> diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx index 4fdd500b7c..e5d3d6edf9 100644 --- a/packages/ui/components/top-banner/TopBanner.tsx +++ b/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 & 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 ; + case "warning": + return ; + default: + return null; + } + }; + const defaultIcon = renderDefaultIconByVariant(); + return (

- {variant === "error" && ( -

{actions &&
{actions}
}