Factorise Button and Input components

src/app/[locale]/(main)/add-tournament/TournamentForm.tsx

@@ -8,6 +8,7 @@ import dynamic from "next/dynamic";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { Button } from "@/components/Button";
 import { clearMessage } from "@/components/InfoMessage";
 import InfoMessage from "@/components/InfoMessage";
 import LoadingMap from "@/components/LoadingMap";
@@ -174,12 +175,14 @@ const TournamentForm = () => {
               required
             />
           </div>
-          <div className="col-span-4 row-span-2 sm:col-span-2">
+
+          <div className="col-span-4 row-span-2 self-stretch sm:col-span-2">
             <TextAreaField
+              className="h-full"
+              childrenWrapperClassName="h-full"
               name="message"
               control={form.control}
               label={t("messageLabel")}
-              rows={6}
               placeholder={t("messagePlaceholder")}
             />
           </div>
@@ -207,21 +210,16 @@ const TournamentForm = () => {
             <Map />
           </section>
         </div>
-        <button
-          disabled={form.formState.isSubmitting}
-          type="submit"
-          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-        >
-          {form.formState.isSubmitting ? t("sending") : t("sendButton")}
-        </button>
-        <button
-          onClick={() => form.reset()}
-          type="button"
-          className="ml-4 rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-        >
-          {t("clearForm")}
-        </button>
 
+        <div className="flex gap-4">
+          <Button disabled={form.formState.isSubmitting} type="submit">
+            {form.formState.isSubmitting ? t("sending") : t("sendButton")}
+          </Button>
+
+          <Button onClick={() => form.reset()} type="button" intent="secondary">
+            {t("clearForm")}
+          </Button>
+        </div>
         <InfoMessage responseMessage={responseMessage} />
       </form>
     </FormProvider>

src/app/[locale]/(main)/contact-us/ContactForm.tsx

@@ -7,6 +7,7 @@ import { useTranslations } from "next-intl";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { Button } from "@/components/Button";
 import InfoMessage from "@/components/InfoMessage";
 import { clearMessage } from "@/components/InfoMessage";
 import { TextAreaField } from "@/components/form/TextAreaField";
@@ -77,13 +78,9 @@ const ContactForm = () => {
           required
         />
 
-        <button
-          disabled={form.formState.isSubmitting}
-          type="submit"
-          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-        >
+        <Button disabled={form.formState.isSubmitting} type="submit">
           {form.formState.isSubmitting ? t("sending") : t("sendButton")}
-        </button>
+        </Button>
 
         <InfoMessage responseMessage={responseMessage} />
       </form>

src/app/[locale]/(main)/delete-account/page.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { signOut } from "next-auth/react";
 import { useTranslations } from "next-intl";
 
+import { Button } from "@/components/Button";
 import InfoMessage from "@/components/InfoMessage";
 import { deleteAccount } from "@/server/deleteAccount";
 import { useRouter } from "@/utils/routing";
@@ -67,21 +68,21 @@ export default function Contact() {
             )}
 
             <div className="flex items-center justify-center space-x-4 text-sm font-bold">
-              <button
+              <Button
                 type="button"
                 onClick={() => router.back()}
-                className="rounded-lg border border-primary px-5 py-3 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
+                intent="secondary"
               >
                 {at("cancelButton")}
-              </button>
+              </Button>
 
-              <button
+              <Button
                 onClick={() => onDeleteAccount()}
                 disabled={deleting}
-                className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+                intent="primary"
               >
                 {t("deleteButton")}
-              </button>
+              </Button>
             </div>
           </>
         )}

src/app/[locale]/(main)/elo/ManualEloForm.tsx

@@ -8,6 +8,7 @@ import { IoAdd, IoCloseOutline } from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
+import { Button } from "@/components/Button";
 import { RadioGroupField } from "@/components/form/RadioGroupField";
 import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
@@ -176,26 +177,31 @@ export const ManualEloForm = () => {
                         }))}
                         required
                       />
+
                       {gameFields.length > 1 && (
-                        <button
-                          className="hidden h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-700 sm:flex"
+                        <Button
+                          intent="tertiary"
+                          size="compacted"
+                          className="hidden h-8 w-8 sm:flex"
                           type="button"
                           onClick={() => removeGame(i)}
                         >
-                          <IoCloseOutline className="h-6 w-6 text-gray-900 transition-all duration-200 hover:text-primary dark:text-neutral-400 hover:dark:text-white" />
-                        </button>
+                          <IoCloseOutline className="h-6 w-6" />
+                        </Button>
                       )}
                     </div>
                   </div>
 
                   {gameFields.length > 1 && (
-                    <button
-                      className="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-700 sm:hidden"
+                    <Button
+                      intent="tertiary"
+                      size="compacted"
+                      className="flex h-8 w-8 sm:hidden"
                       type="button"
                       onClick={() => removeGame(i)}
                     >
-                      <IoCloseOutline className="h-6 w-6 text-gray-900 transition-all duration-200 hover:text-primary dark:text-neutral-400 hover:dark:text-white" />
-                    </button>
+                      <IoCloseOutline className="h-6 w-6" />
+                    </Button>
                   )}
                 </div>
 
@@ -244,26 +250,26 @@ export const ManualEloForm = () => {
 
         <div className="mt-8 flex justify-end gap-4">
           {!isDefault && (
-            <button
+            <Button
               onClick={() => {
                 form.reset();
               }}
               type="button"
-              className="px-5 py-3 text-center text-sm font-medium text-primary-600 hover:text-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:text-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+              intent="secondary"
             >
               {t("clearButton")}
-            </button>
+            </Button>
           )}
-          <button
+          <Button
             onClick={() => {
               appendGame({});
             }}
             type="button"
-            className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+            intent="primary"
           >
             <IoAdd className="mr-2 inline-block h-5 w-5" />
             {t("addGameButton")}
-          </button>
+          </Button>
         </div>
       </form>
     </FormProvider>

src/app/[locale]/(main)/elo/page.tsx

@@ -10,6 +10,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { Button } from "@/components/Button";
 import { ErrorBox } from "@/components/ErrorBox";
 import { Spinner } from "@/components/Spinner";
 import { TranslatedError } from "@/components/TranslatedError";
@@ -176,7 +177,7 @@ export default function Elo() {
 
   return (
     <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
-      <div className="max-w-xl px-4 py-8 lg:py-16">
+      <div className="max-w-xxl px-4 py-8 lg:py-16">
         <h2
           className="mb-10 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           data-test="header2"
@@ -189,13 +190,14 @@ export default function Elo() {
 
         {hasTournamentId && !isFetching && !error && (
           <div className="mx-auto mb-8 flex justify-center">
-            <button
+            <Button
+              intent="secondary"
               type="button"
               onClick={clearForm}
               className="rounded-lg border border-primary px-3 py-2 text-center text-sm text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
             >
               {t("enterManualResultsButton")}
-            </button>
+            </Button>
           </div>
         )}
 

src/app/[locale]/(main)/tournaments/TournamentTable.tsx

@@ -85,6 +85,7 @@ const TournamentTable = () => {
             classNameOverrides={{
               container: () => "flex flex-1",
             }}
+            size="small"
           />
         </div>
 

src/app/[locale]/(main)/zones/components/ZoneForm.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { Button } from "@/components/Button";
 import { InlineSwitchField } from "@/components/form/InlineSwitchField";
 import { Label } from "@/components/form/Label";
 import { TextField } from "@/components/form/TextField";
@@ -110,20 +111,13 @@ export const ZoneForm = ({
         </div>
 
         <div className="flex justify-end gap-4">
-          <button
-            onClick={onCancel}
-            className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
-          >
+          <Button intent="secondary" onClick={onCancel}>
             {cancelTitle ?? at("cancelButton")}
-          </button>
+          </Button>
 
-          <button
-            disabled={form.formState.isSubmitting}
-            type="submit"
-            className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-          >
+          <Button disabled={form.formState.isSubmitting} type="submit">
             {submitTitle ?? at("saveButton")}
-          </button>
+          </Button>
         </div>
       </form>
     </FormProvider>

src/app/[locale]/(main)/zones/page.tsx

@@ -6,6 +6,7 @@ import { useFormatter, useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
 import { IoAdd } from "react-icons/io5";
 
+import { Button, buttonVariants } from "@/components/Button";
 import InfoMessage, { clearMessage } from "@/components/InfoMessage";
 import { Modal } from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
@@ -116,17 +117,18 @@ const Zones = () => {
                           pathname: "/zones/edit/[id]",
                           params: { id: zone.id },
                         }}
-                        className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
+                        className={buttonVariants({ intent: "secondary" })}
                       >
                         {at("editButton")}
                       </Link>
-                      <button
+
+                      <Button
+                        intent="secondary"
                         type="button"
                         onClick={() => setDeletingZoneId(zone.id)}
-                        className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
                       >
                         {at("deleteButton")}
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
@@ -155,19 +157,15 @@ const Zones = () => {
         <InfoMessage responseMessage={responseMessage} />
 
         <div className="flex items-center justify-between space-x-4 text-sm font-bold">
-          <button
+          <Button
+            intent="secondary"
             type="button"
             onClick={() => setDeletingZoneId(null)}
-            className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
           >
             {at("cancelButton")}
-          </button>
-          <button
-            onClick={() => onDelete()}
-            className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-          >
-            {at("deleteButton")}
-          </button>
+          </Button>
+
+          <Button onClick={() => onDelete()}>{at("deleteButton")}</Button>
         </div>
       </Modal>
     </>