Use common input component

frontend/@/components/ui/input.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-12 w-full rounded-xl border border-input px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "text-base",
+          "bg-flathub-gainsborow dark:bg-stone-900",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = "Input"
+
+export { Input }

frontend/pages/apps/new/register/index.tsx

@@ -1,3 +1,4 @@
+import { Input } from "@/components/ui/input"
 import { GetStaticProps } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
@@ -42,10 +43,9 @@ export default function AppRegistrationPage() {
 
         <Notice>{t("app-id-instructions")}</Notice>
 
-        <input
+        <Input
           type="text"
           placeholder={t("app-id")}
-          className="my-5 w-full rounded-xl border border-flathub-sonic-silver p-3 dark:border-flathub-spanish-gray"
           onChange={(e) => {
             setAppId(e.target.value)
             setStep("start")

frontend/pages/setup/index.tsx

@@ -8,6 +8,7 @@ import clsx from "clsx"
 import { DistroSetup, fetchSetupInstructions } from "src/distro-setup"
 import { useState } from "react"
 import { HiMagnifyingGlass } from "react-icons/hi2"
+import { Input } from "@/components/ui/input"
 
 export default function Setup({
   instructions,
@@ -63,12 +64,8 @@ export default function Setup({
           <div className="absolute inset-y-0 start-0 flex items-center ps-2">
             <HiMagnifyingGlass className="size-5 text-flathub-spanish-gray" />
           </div>
-          <input
+          <Input
             type="text"
-            className={clsx(
-              "w-full rounded-full bg-flathub-white p-4 ps-9 shadow-md duration-500 dark:bg-flathub-arsenic/70",
-              "placeholder-flathub-dark-gunmetal/50 focus:placeholder-flathub-dark-gunmetal/75 focus:outline-none dark:placeholder-flathub-granite-gray dark:focus:placeholder-flathub-sonic-silver dark:focus:outline-none",
-            )}
             placeholder={t("find-your-distribution")}
             onChange={(e) => setDistroFilter(e.target.value)}
           />

frontend/src/components/application/AppDevelopersControls.tsx

@@ -19,6 +19,7 @@ import {
   revokeInviteInvitesAppIdRevokePost,
 } from "src/codegen"
 import { Developer } from "src/codegen/model"
+import { Input } from "@/components/ui/input"
 
 interface Props {
   app: Appstream
@@ -340,8 +341,7 @@ const InviteDialog: FunctionComponent<InviteDialogProps> = ({
       })}
     >
       <InlineError error={t(error)} shown={!!error} />
-      <input
-        className="w-full rounded-xl border border-flathub-sonic-silver p-3 dark:border-flathub-spanish-gray"
+      <Input
         value={inviteCode}
         onInput={(e) => setInviteCode((e.target as HTMLInputElement).value)}
       />

frontend/src/components/application/AppUploadControls/NewTokenDialog.tsx

@@ -7,6 +7,7 @@ import { Repo } from "src/types/UploadTokens"
 import { useMutation } from "@tanstack/react-query"
 import { createUploadTokenUploadTokensAppIdPost } from "src/codegen"
 import { NewTokenResponse } from "src/codegen/model"
+import { Input } from "@/components/ui/input"
 
 interface Props {
   app_id: string
@@ -78,8 +79,7 @@ const NewTokenDialog: FunctionComponent<Props> = ({
     case "new":
       content = (
         <>
-          <input
-            className="w-full rounded-xl border border-flathub-sonic-silver p-3 dark:border-flathub-spanish-gray"
+          <Input
             placeholder={t("token-name")}
             value={comment}
             onInput={(e) => setComment((e.target as HTMLInputElement).value)}

frontend/src/components/application/AppVendingControls/OwnershipTokens/TokenRedeemDialog.tsx

@@ -1,20 +1,17 @@
 import { useTranslation } from "next-i18next"
-import { FunctionComponent, useCallback, useState } from "react"
+import { useCallback, useState } from "react"
 import { toast } from "react-toastify"
 import { Appstream } from "../../../../types/Appstream"
 import Button from "../../../Button"
 import Spinner from "../../../Spinner"
 import { useMutation } from "@tanstack/react-query"
 import { redeemTokenVendingappAppIdTokensRedeemTokenPost } from "src/codegen"
-
-interface Props {
-  app: Appstream
-}
+import { Input } from "@/components/ui/input"
 
 /**
  * A set of controls for redemption of application ownership tokens.
  */
-const TokenRedeemDialog: FunctionComponent<Props> = ({ app }) => {
+const TokenRedeemDialog = ({ app }: { app: Pick<Appstream, "id"> }) => {
   const { t } = useTranslation()
 
   const [text, setText] = useState("")
@@ -51,16 +48,17 @@ const TokenRedeemDialog: FunctionComponent<Props> = ({ app }) => {
 
   return (
     <div className="inline-flex gap-2 rounded-xl bg-flathub-white p-4 dark:bg-flathub-arsenic">
-      <input
+      <Input
         type="text"
         placeholder={t("token-redeem-placeholder")}
         value={text}
         onChange={textUpdate}
-        className="w-80 rounded-xl bg-flathub-gainsborow p-2 dark:bg-flathub-dark-gunmetal"
+        className="w-80"
       />
       <Button
         disabled={text.trim().length === 0}
         onClick={() => redeemVendingToken.mutate()}
+        className="h-12"
       >
         {t("redeem-token")}
       </Button>

frontend/src/components/application/DangerZoneControls.tsx

@@ -13,8 +13,10 @@ import {
   switchToDirectUploadVerificationAppIdSwitchToDirectUploadPost,
 } from "src/codegen"
 import { getUploadTokensUploadTokensAppIdGet } from "src/codegen"
+import { Input } from "@/components/ui/input"
+import { Appstream } from "src/types/Appstream"
 
-const SwitchToDirectUpload = ({ app }: { app: { id: string } }) => {
+const SwitchToDirectUpload = ({ app }: { app: Pick<Appstream, "id"> }) => {
   const { t } = useTranslation()
   const [modalVisible, setModalVisible] = useState(false)
 
@@ -103,12 +105,11 @@ const ArchiveApp = ({ app }: { app: { id: string } }) => {
           </div>
           <div>
             {t("rebase-onto-other-app")}
-            <input
+            <Input
               type="text"
               placeholder={t("app-id")}
               value={endoflifeRebase}
               onChange={(e) => setEndoflifeRebase(e.target.value)}
-              className="rounded-xl p-3 w-full"
             />
           </div>
         </div>

frontend/src/components/currency/CurrencyInput.tsx

@@ -9,6 +9,7 @@ import {
   useState,
 } from "react"
 import { NumericInputValue } from "../../types/Input"
+import { Input } from "@/components/ui/input"
 
 type Props = {
   inputValue: NumericInputValue
@@ -71,7 +72,7 @@ const CurrencyInput: FunctionComponent<Props> = forwardRef<
   return (
     <div>
       <label className="absolute ms-2 mt-2 text-xl">$</label>
-      <input
+      <Input
         type="text"
         inputMode="numeric"
         pattern="\d*(\.\d{0,2})?"
@@ -80,9 +81,7 @@ const CurrencyInput: FunctionComponent<Props> = forwardRef<
         onChange={handleChange}
         onBlur={handleBlur}
         ref={ref}
-        className={
-          "rounded-xl border-none bg-flathub-gainsborow p-2 ps-7 text-flathub-dark-gunmetal outline-none  dark:bg-flathub-dark-gunmetal dark:text-flathub-gainsborow"
-        }
+        className={"ps-7"}
         {...inputProps}
       />
     </div>

frontend/src/components/user/DeleteButton.tsx

@@ -11,6 +11,7 @@ import {
   doDeleteuserAuthDeleteuserPost,
   getDeleteuserAuthDeleteuserGet,
 } from "src/codegen"
+import { Input } from "@/components/ui/input"
 
 const DeleteButton: FunctionComponent = () => {
   const { t } = useTranslation()
@@ -91,8 +92,7 @@ const DeleteButton: FunctionComponent = () => {
         submitDisabled={entry && text !== entry}
       >
         <div>
-          <input
-            className="w-full rounded-xl border border-flathub-sonic-silver p-3 dark:border-flathub-spanish-gray"
+          <Input
             value={text}
             onInput={(e) => setText((e.target as HTMLInputElement).value)}
           />

frontend/styles/main.scss

@@ -137,7 +137,7 @@
   --destructive-foreground: var(--flathub-lotion);
 
   --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
+  --input: var(--flathub-sonic-silver);
   --ring: var(--flathub-dark-gunmetal);
 
   --radius: 0.5rem;
@@ -170,7 +170,7 @@
   --destructive-foreground: var(--flathub-lotion);
 
   --border: var(--flathub-arsenic);
-  --input: var(--flathub-arsenic);
+  --input: var(--flathub-spanish-gray);
   --ring: 0 0% 83.1%;
 
   // Override react-tostify variable here for easy theme adherence