Add shadcn input and update button

templates/hydrogen-theme/app/components/cart/CartDiscounts.tsx

@@ -5,6 +5,7 @@ import {cx} from 'class-variance-authority';
 
 import {IconRemove} from '../icons/IconRemove';
 import {Button} from '../ui/Button';
+import {Input} from '../ui/Input';
 
 /**
  * Temporary discount UI
@@ -46,7 +47,7 @@ export function CartDiscounts({
       <UpdateDiscountForm discountCodes={codes}>
         <div className={cx('flex', 'items-center justify-between gap-4')}>
           {/* Todo => add theme content string */}
-          <input name="discountCode" placeholder="Discount code" type="text" />
+          <Input name="discountCode" placeholder="Discount code" type="text" />
           <Button variant="outline">
             {/* Todo => add theme content string */}
             Apply Discount

templates/hydrogen-theme/app/components/collection/SortFilter.tsx

@@ -30,6 +30,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/DropdownMenu';
+import {Input} from '../ui/Input';
 
 export type AppliedFilter = {
   filter: ProductFilter;
@@ -269,8 +270,7 @@ function PriceRangeFilter({max, min}: {max?: number; min?: number}) {
     <div className="flex flex-col">
       <label className="mb-4">
         <span>from</span>
-        <input
-          className="text-black"
+        <Input
           name="minPrice"
           onChange={onChangeMin}
           placeholder={'$'}
@@ -280,8 +280,7 @@ function PriceRangeFilter({max, min}: {max?: number; min?: number}) {
       </label>
       <label>
         <span>to</span>
-        <input
-          className="text-black"
+        <Input
           name="maxPrice"
           onChange={onChangeMax}
           placeholder={'$'}

templates/hydrogen-theme/app/components/product/VariantSelector.tsx

@@ -11,6 +11,8 @@ import {useMemo} from 'react';
 
 import {useSelectedVariant} from '~/hooks/useSelectedVariant';
 
+import {Button} from '../ui/Button';
+
 export type VariantOptionValue = {
   isActive: boolean;
   isAvailable: boolean;
@@ -90,20 +92,17 @@ export function VariantSelector(props: {
       <div>{option.name}</div>
       <div className="mt-1 flex gap-3">
         {option.values?.map(({isActive, isAvailable, search, value}) => (
-          <Link
-            className={cx([
-              'rounded-full border-[1px] border-[rgb(var(--textColor))] px-3 py-1',
-              isActive && 'inverted-color-scheme',
-              !isAvailable && 'opacity-50',
-            ])}
+          <Button
+            asChild
+            className={cx(!isAvailable && 'opacity-50')}
             key={option.name + value}
-            prefetch="intent"
-            preventScrollReset
-            replace
-            to={search}
+            size="sm"
+            variant={isActive ? 'secondary' : 'secondaryOutline'}
           >
-            {value}
-          </Link>
+            <Link prefetch="intent" preventScrollReset replace to={search}>
+              {value}
+            </Link>
+          </Button>
         ))}
       </div>
     </div>

templates/hydrogen-theme/app/components/sections/CollectionProductGridSection.tsx

@@ -60,6 +60,7 @@ export function CollectionProductGridSection(
             searchParams,
           });
 
+          // Todo => add enableFiltering and enableSorting settings
           return (
             <div className="container">
               <SortFilter

templates/hydrogen-theme/app/components/ui/Button.tsx

@@ -23,15 +23,19 @@ const buttonVariants = cva(
       },
       variant: {
         default:
-          'bg-color-scheme-primary-button-bg text-color-scheme-primary-button-label ring-color-scheme-primary-button-bg hover:bg-color-scheme-primary-button-bg/90',
-        destructive: 'bg-red-800 text-white hover:bg-red-800/90',
+          'border border-color-scheme-primary-button-bg bg-color-scheme-primary-button-bg text-color-scheme-primary-button-label ring-color-scheme-primary-button-bg hover:bg-color-scheme-primary-button-bg/90 hover:border-color-scheme-primary-button-bg/90',
+        destructive:
+          'border border-red-800 bg-red-800 text-white hover:bg-red-800/90',
         ghost:
           'hover:bg-color-scheme-primary-button-bg hover:text-color-scheme-primary-button-label',
         link: 'text-color-scheme-primary-button-bg underline-offset-4 hover:underline',
         outline:
           'border border-color-scheme-outline-button ring-color-scheme-outline-button bg-color-scheme-bg text-color-scheme-outline-button hover:bg-color-scheme-outline-button hover:text-color-scheme-bg',
         primitive: '',
-        secondary: 'inverted-color-scheme hover:bg-color-scheme-text/90',
+        secondary:
+          'border border-color-scheme-text inverted-color-scheme ring-color-scheme-text hover:bg-color-scheme-text/90 hover:border-color-scheme-text/90',
+        secondaryOutline:
+          'border border-color-scheme-text ring-color-scheme-text bg-color-scheme-bg text-color-scheme-text hover:bg-color-scheme-text hover:text-color-scheme-bg',
       },
     },
   },

templates/hydrogen-theme/app/components/ui/Input.tsx

@@ -0,0 +1,26 @@
+import {forwardRef} from 'react';
+
+import {cn} from '~/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({className, type, ...props}, ref) => {
+    return (
+      <input
+        className={cn(
+          'flex h-10 w-full rounded-md border border-color-scheme-text bg-color-scheme-bg px-3 py-2 text-sm ring-offset-color-scheme-text file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        type={type}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';
+
+export {Input};