Update controls styling

Author: Rikthepixel

src/components/controls/Button.tsx

@@ -4,10 +4,10 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-export const style = cva("flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-md", {
+export const style = cva("flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-full", {
   variants: {
     color: {
-      secondary: "bg-secondary hover:bg-secondary-dark text-secondary-contrast"
+      secondary: "bg-secondary hover:bg-secondary-light text-secondary-contrast"
     }
   }
 });

src/components/controls/Input.tsx

@@ -0,0 +1,57 @@
+import { ForwardedRef, forwardRef, InputHTMLAttributes, useMemo } from "react";
+import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+import { RequiredKeys } from "@/types/utility";
+
+export const style = cva("rounded-full py-2 px-3", {
+  variants: {
+    variant: {
+      outlined: "border-2"
+    },
+    color: {
+      primary: ""
+    },
+  },
+  compoundVariants: [
+    {
+      className: "border-primary bg-white",
+      color: "primary",
+      variant: "outlined"
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "outlined"
+  }
+});
+
+export type TagProps = Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
+export type VariantProps = GetVariantProps<typeof style>;
+export type InputProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+
+const Input = forwardRef((
+  {
+    className,
+    color,
+    variant,
+    ...props
+  }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+
+  const computedClassName = useMemo(
+    () => twMerge(style({ color, variant }), className),
+    [className, color, variant]
+  );
+
+  return (
+    <input
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+export default Input;

src/components/controls/TextArea.tsx

@@ -0,0 +1,36 @@
+import { DetailedHTMLProps, ForwardedRef, forwardRef, TextareaHTMLAttributes, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { RequiredKeys } from "@/types/utility";
+
+import { style, VariantProps as InputVariantProps } from "./Input";
+
+export type TagProps = DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+export type VariantProps = InputVariantProps;
+export type TextAreaProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+
+const TextArea = forwardRef((
+  {
+    className,
+    color,
+    variant,
+    ...props
+  }: TextAreaProps,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) => {
+
+  const computedClassName = useMemo(
+    () => twMerge(style({ color, variant }), className),
+    [className, color, variant]
+  );
+
+  return (
+    <textarea
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+export default TextArea;

src/components/navigation/NavLink.tsx

@@ -11,7 +11,7 @@ const NavLink = ({ href, currentHref, children }: NavLinkProps) => {
   const active = currentHref === href;
   return (
     <Link
-      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-light aria-[current='page']:text-primary-dark aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
+      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-dark aria-[current='page']:text-primary-light aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
       aria-current={active ? "page" : undefined}
       color="primary"
       href={href}

src/components/pages/front/FeedbackSection.tsx

@@ -12,6 +12,7 @@ import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
+import TextArea from "@/components/controls/TextArea";
 
 const feedbackSchema = z.object({
   text: z.string()
@@ -80,11 +81,12 @@ const FeedbackSection = () => {
       <form aria-label="feedback-inbox" className="flex flex-col items-center gap-4" onSubmit={submit}>
         <AnimatePresence mode="wait">
           {(!response || response.success === false) && <motion.div className="flex flex-col items-center w-full gap-4">
-            <textarea
-              className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary h-fit"
+            <TextArea
+            
+              className="w-full p-4 text-lg rounded-lg md:text-xl h-fit"
               placeholder="I would like this feature!"
-              {...register("text")}
               rows={5}
+              {...register("text")}
             />
             <Error className="w-full px-2 text-start" state={formState} name="text" />
             <Button type="submit" color="secondary" className="px-5 py-3 text-lg md:text-xl w-fit">

src/components/pages/front/SignupSection.tsx

@@ -13,6 +13,7 @@ import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
+import Input from "@/components/controls/Input";
 
 
 const signupSchema = z.object({
@@ -105,8 +106,8 @@ const SignupSection = () => {
             exit="exit"
           >
             <div className="w-full">
-              <input
-                className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary"
+              <Input
+                className="w-full p-4 text-lg md:text-xl"
                 placeholder="your@email.com"
                 {...register("email")}
               />