- fix border radius (#1339)

- upgrade button / input components
- clean up markup

pages/auth/forgot-password/index.tsx

@@ -1,13 +1,14 @@
 import debounce from "lodash/debounce";
 import { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/client";
-import Link from "next/link";
 import React, { SyntheticEvent } from "react";
 
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 
+import { TextField } from "@components/form/fields";
 import { HeadSeo } from "@components/seo/head-seo";
+import Button from "@components/ui/Button";
 
 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   const { t, i18n } = useLocale();
@@ -78,9 +79,9 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
 
   return (
     <div className="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">
-      <HeadSeo title={t("forgot_password")} description={t("forgot_password")} />
+      <HeadSeo title={t("forgot_password")} description={t("request_password_reset")} />
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 mx-2 space-y-6 bg-white rounded-lg shadow sm:px-10">
+        <div className="px-4 pt-3 pb-8 mx-2 space-y-6 bg-white rounded-lg shadow sm:px-10">
           {success && <Success />}
           {!success && (
             <>
@@ -88,67 +89,41 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
                 <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">
                   {t("forgot_password")}
                 </h2>
-                <p>{t("reset_instructions")}</p>
+                <p className="text-sm text-gray-500">{t("reset_instructions")}</p>
                 {error && <p className="text-red-600">{error.message}</p>}
               </div>
               <form className="space-y-6" onSubmit={handleSubmit} action="#">
                 <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                    {t("email_address")}
-                  </label>
-                  <div className="mt-1">
-                    <input
-                      onChange={handleChange}
-                      id="email"
-                      name="email"
-                      type="email"
-                      inputMode="email"
-                      autoComplete="email"
-                      placeholder="john.doe@example.com"
-                      required
-                      className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
-                    />
-                  </div>
-                </div>
 
-                <div>
+                <TextField
-                  <button
+                  onChange={handleChange}
+                  id="email"
+                  name="email"
+                  label={t("email_address")}
+                  type="email"
+                  inputMode="email"
+                  autoComplete="email"
+                  placeholder="john.doe@example.com"
+                  required
+                />
+                <div className="space-y-2">
+                  <Button
+                    className="justify-center w-full"
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-brandcontrast bg-brand hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
+                    aria-label={t("request_password_reset")}
-                      loading ? "cursor-not-allowed" : ""
+                    loading={loading}>
-                    }`}>
-                    {loading && (
-                      <svg
-                        className="w-5 h-5 mr-3 -ml-1 text-white animate-spin"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24">
-                        <circle
-                          className="opacity-25"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="currentColor"
-                          strokeWidth="4"></circle>
-                        <path
-                          className="opacity-75"
-                          fill="currentColor"
-                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                      </svg>
-                    )}
                     {t("request_password_reset")}
-                  </button>
+                  </Button>
-                </div>
+
-                <div className="space-y-2">
+                  <Button
-                  <Link href="/auth/login">
+                    href="/auth/login"
-                    <button
+                    color="minimal"
-                      type="button"
+                    role="button"
-                      className="flex justify-center w-full px-4 py-2 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+                    aria-label={t("login_instead")}
-                      {t("login")}
+                    className="justify-center w-full">
-                    </button>
+                    {t("login_instead")}
-                  </Link>
+                  </Button>
                 </div>
               </form>
             </>