Small fixes (saleor#914)

Author: timuric

src/app/cart/CheckoutButton.tsx

@@ -13,7 +13,7 @@ export const CheckoutLink = ({ disabled, checkoutId }: Props) => {
 			aria-disabled={disabled}
 			onClick={(e) => disabled && e.preventDefault()}
 			href={`/checkout?checkout=${checkoutId}`}
-			className="w-full rounded border border-transparent bg-pink-600 px-6 py-3 text-center font-medium text-gray-50 hover:bg-pink-500 aria-disabled:cursor-not-allowed aria-disabled:bg-pink-500 sm:col-start-2"
+			className="w-full rounded border border-transparent bg-gray-900 px-6 py-3 text-center font-medium text-gray-50 hover:bg-gray-800 aria-disabled:cursor-not-allowed aria-disabled:bg-gray-500 sm:col-start-2"
 		>
 			Checkout
 		</Link>

src/app/cart/CheckoutLink.tsx

@@ -11,7 +11,7 @@ export function AddButton({ disabled }: { disabled?: boolean }) {
 			type="submit"
 			aria-disabled={isButtonDisabled}
 			onClick={(e) => isButtonDisabled && e.preventDefault()}
-			className="h-12 w-full max-w-md items-center rounded-md bg-slate-700 px-6 py-3 text-base font-medium leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-slate-600 disabled:cursor-not-allowed disabled:opacity-70 hover:disabled:bg-slate-700 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 hover:aria-disabled:bg-slate-700"
+			className="h-12 items-center rounded-md bg-gray-900 px-6 py-3 text-base font-medium leading-6 text-white shadow hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-70 hover:disabled:bg-gray-700 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 hover:aria-disabled:bg-gray-700"
 		>
 			{pending ? (
 				<div className="inline-flex items-center">

src/app/products/[slug]/AddButton.tsx

@@ -118,10 +118,10 @@ export default async function Page(props: { params: { slug: string }; searchPara
 				{firstImage && (
 					<ProductImageWrapper alt={firstImage.alt ?? ""} width={1024} height={1024} src={firstImage.url} />
 				)}
-				<div className="flex flex-col justify-between pt-6 sm:px-6 sm:pt-0">
+				<div className="flex flex-col pt-6 sm:px-6 sm:pt-0">
 					<div>
-						<h1 className="flex-auto text-3xl font-bold tracking-tight text-slate-900">{product?.name}</h1>
-						<p className="text-sm font-medium text-gray-900">
+						<h1 className="flex-auto text-3xl font-bold tracking-tight text-slate-900 mb-4">{product?.name}</h1>
+						<p className="text-sm font-medium text-gray-900 mb-8">
 							{selectedVariant?.pricing?.price?.gross
 								? formatMoney(
 										selectedVariant.pricing.price.gross.amount,
@@ -131,7 +131,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
 						</p>
 
 						{variants && <VariantSelector variants={variants} />}
-						<div className="mt-4 space-y-6">
+						<div className="mt-4 space-y-6 mt-8">
 							<div dangerouslySetInnerHTML={{ __html: description }}></div>
 						</div>
 						<div className="mt-6 flex items-center">

src/app/products/[slug]/page.tsx

@@ -2,10 +2,10 @@ import NextImage, { type ImageProps } from "next/image";
 
 export const ProductImageWrapper = (props: ImageProps) => {
 	return (
-		<div className="overflow-hidden rounded-md border bg-slate-50 hover:border-slate-500">
+		<div className="overflow-hidden rounded-md border bg-slate-50">
 			<NextImage
 				{...props}
-				className="h-full w-full object-cover object-center p-4 transition-transform hover:scale-110"
+				className="h-full w-full object-cover object-center p-4"
 			/>
 		</div>
 	);

src/ui/atoms/ProductImageWrapper.tsx

@@ -40,16 +40,6 @@ export function Footer() {
 							))}
 						</ul>
 					</div>
-					<div className="mt-16 md:mt-16 xl:mt-0">
-						<h3 className="text-sm font-medium text-gray-900">Check it out</h3>
-						<ul className="mt-4 space-y-4">
-							<li className="text-sm">
-								<a href="https://discord.gg/H52JTZAtSH" className="text-gray-500 hover:text-gray-600">
-									Discord
-								</a>
-							</li>
-						</ul>
-					</div>
 				</div>
 
 				<div className="flex flex-col justify-between border-t border-gray-200 py-10 sm:flex-row">

src/ui/components/Footer.tsx

@@ -42,7 +42,7 @@ export function VariantSelector(props: { variants: { id: string; name: string }[
 	return (
 		<fieldset className="my-4" role="radiogroup">
 			<legend className="sr-only">Variants</legend>
-			<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+			<div className="grid grid-cols-2 gap-3 sm:grid-cols-7">
 				{variants.length > 1 &&
 					variants.map((variant) => {
 						return (
@@ -54,8 +54,8 @@ export function VariantSelector(props: { variants: { id: string; name: string }[
 								}}
 								className={clsx(
 									searchParams.get("variant") === variant.id
-										? "border-transparent bg-slate-600 text-white hover:bg-slate-500"
-										: "border-slate-200 bg-white text-slate-900 hover:bg-slate-100",
+										? "border-transparent bg-gray-900 text-white hover:bg-gray-800"
+										: "border-gray-200 bg-white text-gray-900 hover:bg-gray-100",
 									"flex items-center justify-center overflow-hidden text-ellipsis rounded border p-3 text-center text-sm font-semibold focus-within:outline focus-within:outline-2",
 								)}
 								role="radio"