diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index 3ee34e54a..8d459b9dc 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -1,3 +1,8 @@ .root { @apply flex flex-row h-screen py-12; } + +.button { + @apply py-5 uppercase text-center; + min-width: 300px; +} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index e5ed41262..b29a2c4d6 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -17,10 +17,14 @@ const ProductView: FunctionComponent = ({ productData, className }) => { const rootClassName = cn(s.root, className); return (
-
-

T-Shirt

+
+

+ T-Shirt +

+
+ $50 +
-
T-Shirt
@@ -57,7 +61,7 @@ const ProductView: FunctionComponent = ({ productData, className }) => {

{productData.description}

- +
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 2244ccb5c..c067e78e8 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,5 +1,5 @@ .root { - @apply cursor-pointer inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium; + @apply cursor-pointer inline-flex px-8 py-2 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium text-center justify-center; } .root:hover { @@ -13,3 +13,7 @@ .root:active { @apply bg-gray-700; } + +s.filled { + @apply text-white bg-black; +}