More design updates

components/product/ProductView/ProductView.tsx

@@ -117,7 +117,9 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           <section>
             {product.options?.map((opt) => (
               <div className="pb-4" key={opt.displayName}>
-                <h2 className="uppercase font-medium">{opt.displayName}</h2>
+                <h2 className="uppercase font-medium text-sm tracking-wide">
+                  {opt.displayName}
+                </h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v, i: number) => {
                     const active = (choices as any)[

components/product/Swatch/Swatch.module.css

@@ -1,11 +1,13 @@
 .swatch {
   box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
   margin-right: calc(0.75rem - 1px);
   overflow: hidden;
+  width: 48px;
+  height: 48px;
 }
 
 .swatch::before,