Add missing translation (#227)

* Add missing translation

* Add more missing translations

public/locales/en/app.json

@@ -1,7 +1,9 @@
 {
   "12h": "12-hour",
   "24h": "24-hour",
+  "addTimeOption": "Add time option",
   "admin": "Admin",
+  "applyToAllDates": "Apply to all dates",
   "areYouSure": "Are you sure?",
   "back": "Back",
   "blog": "Blog",
@@ -9,10 +11,7 @@
   "calendarHelpTitle": "Forget something?",
   "cancel": "Cancel",
   "comment": "Comment",
-  "applyToAllDates": "Apply to all dates",
   "commentPlaceholder": "Leave a comment on this poll (visible to everyone)",
-  "deleteDate": "Delete date",
-  "addTimeOption": "Add time option",
   "comments": "Comments",
   "continue": "Continue",
   "copied": "Copied",
@@ -22,6 +21,7 @@
   "creatingDemo": "Creating demo poll…",
   "delete": "Delete",
   "deleteComment": "Delete comment",
+  "deleteDate": "Delete date",
   "deletedPoll": "Deleted poll",
   "deletedPollInfo": "this poll doesn't exist anymore.",
   "deletePoll": "Delete poll",
@@ -55,7 +55,14 @@
   "locationPlaceholder": "Joe's Coffee Shop",
   "lockPoll": "Lock poll",
   "login": "Login",
+  "loginCheckInbox": "Please check your inbox.",
+  "loginMagicLinkSent": "A magic link has been sent to:",
+  "loginSendMagicLink": "Send me a magic link",
+  "loginViaMagicLink": "Login via magic link",
+  "loginViaMagicLinkDescription": "We'll send you an email with a magic link that you can use to login.",
+  "loginWithValidEmail": "Please enter a valid email address",
   "logout": "Logout",
+  "manage": "Manage",
   "menu": "Menu",
   "mixedOptionsDescription": "You can't have both time and date options in the same poll. Which would you like to keep?",
   "mixedOptionsKeepDates": "Keep date options",
@@ -113,6 +120,7 @@
   "voteCount": "{{count}} vote",
   "weekStartsOn": "Week starts on",
   "weekView": "Week view",
+  "whatsThis": "What's this?",
   "yes": "Yes",
   "yourDetails": "Your details",
   "yourPolls": "Your polls"

src/components/login-form.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import { usePlausible } from "next-plausible";
 import * as React from "react";
 import { useForm } from "react-hook-form";
@@ -11,6 +12,7 @@ import { validEmail } from "@/utils/form-validation";
 import { trpc } from "../utils/trpc";
 
 const LoginForm: React.VoidFunctionComponent = () => {
+  const { t } = useTranslation("app");
   const { register, formState, handleSubmit, getValues } =
     useForm<{ email: string }>();
 
@@ -24,7 +26,9 @@ const LoginForm: React.VoidFunctionComponent = () => {
         <Magic className="h-24 text-slate-300" />
       </div>
       <div className="max-w-sm p-6">
-        <div className="mb-2 text-xl font-semibold">Login via magic link</div>
+        <div className="mb-2 text-xl font-semibold">
+          {t("loginViaMagicLink")}
+        </div>
         {!formState.isSubmitSuccessful ? (
           <form
             onSubmit={handleSubmit(async ({ email }) => {
@@ -33,8 +37,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
             })}
           >
             <div className="mb-2 text-slate-500">
-              We&apos;ll send you an email with a magic link that you can use to
+              {t("loginViaMagicLinkDescription")}
-              login.
             </div>
             <div className="mb-4">
               <input
@@ -48,7 +51,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
               />
               {formState.errors.email ? (
                 <div className="mt-1 text-sm text-rose-500">
-                  Please enter a valid email address
+                  {t("loginWithValidEmail")}
                 </div>
               ) : null}
             </div>
@@ -58,17 +61,17 @@ const LoginForm: React.VoidFunctionComponent = () => {
                 loading={formState.isSubmitting}
                 type="primary"
               >
-                Send me a magic link
+                {t("loginSendMagicLink")}
               </Button>
             </div>
           </form>
         ) : (
           <div>
-            <div className="text-slate-500">A magic link has been sent to:</div>
+            <div className="text-slate-500">{t("loginMagicLinkSent")}</div>
-            <div className="text-primary-500 font-mono">
+            <div className="font-mono text-primary-500">
               {getValues("email")}
             </div>
-            <div className="mt-2 text-slate-500">Please check you inbox.</div>
+            <div className="mt-2 text-slate-500">{t("loginCheckInbox")}</div>
           </div>
         )}
       </div>

src/components/poll/manage-poll.tsx

@@ -177,7 +177,7 @@ const ManagePoll: React.VoidFunctionComponent<{
       {changePollDetailsModalContextHolder}
       <Dropdown
         placement={placement}
-        trigger={<Button icon={<Cog />}>Manage</Button>}
+        trigger={<Button icon={<Cog />}>{t("manage")}</Button>}
       >
         <DropdownItem
           icon={Pencil}

src/components/standard-layout.tsx

@@ -160,7 +160,7 @@ const UserDropdown: React.VoidFunctionComponent<
       {user.isGuest ? (
         <DropdownItem
           icon={Question}
-          label="What's this?"
+          label={t("whatsThis")}
           onClick={() => {
             modalContext.render({
               showClose: true,