Use textarea from shadcn

frontend/@/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-xl border border-input bg-transparent px-3 py-2 text-sm shadow-sm 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}
+      />
+    )
+  },
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

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

@@ -7,6 +7,7 @@ import { useMutation } from "@tanstack/react-query"
 import { toast } from "react-toastify"
 import { AxiosError } from "axios"
 import { createTokensVendingappAppIdTokensPost } from "src/codegen"
+import { Textarea } from "@/components/ui/textarea"
 
 interface Props {
   app: Pick<Appstream, "id">
@@ -65,11 +66,7 @@ const TokenCreateDialog: FunctionComponent<Props> = ({
       >
         <div className="space-y-3">
           <div>{t("token-creation-placeholder")}</div>
-          <textarea
-            value={text}
-            onChange={textUpdate}
-            className="h-40 rounded-xl p-3 w-full"
-          />
+          <Textarea value={text} onChange={textUpdate} className="h-40" />
         </div>
       </Modal>
     </>

frontend/src/components/application/DangerZoneControls.tsx

@@ -15,6 +15,7 @@ import {
 import { getUploadTokensUploadTokensAppIdGet } from "src/codegen"
 import { Input } from "@/components/ui/input"
 import { Appstream } from "src/types/Appstream"
+import { Textarea } from "@/components/ui/textarea"
 
 const SwitchToDirectUpload = ({ app }: { app: Pick<Appstream, "id"> }) => {
   const { t } = useTranslation()
@@ -97,10 +98,10 @@ const ArchiveApp = ({ app }: { app: { id: string } }) => {
         <div className="space-y-3">
           <div>
             {t("enter-end-of-life-message")}
-            <textarea
+            <Textarea
               value={endoflife}
               onChange={(e) => setEndoflife(e.target.value)}
-              className="h-20 rounded-xl p-3 w-full"
+              className="h-20"
             />
           </div>
           <div>

frontend/src/components/moderation/ReviewCard.tsx

@@ -16,6 +16,7 @@ import {
   ModerationRequestResponse,
   Permission,
 } from "src/codegen"
+import { Textarea } from "@/components/ui/textarea"
 
 interface Props {
   title: string
@@ -169,8 +170,8 @@ const ReviewCard: FunctionComponent<Props> = ({ title, request, children }) => {
           disabled: modalState === "reject" && !comment,
         }}
       >
-        <textarea
-          className="h-40 w-full rounded-xl border border-flathub-sonic-silver p-3 dark:border-flathub-spanish-gray"
+        <Textarea
+          className="h-40"
           value={comment}
           placeholder={
             modalState === "reject" ? "Comment" : "Comment (optional)"