[#91] styling the auction page

client-mu-plugins/goodbids/blocks/auction-metrics-general/render.php

@@ -21,30 +21,51 @@
 	return;
 endif;
 ?>
-<section <?php block_attr( $block ); ?>>
+<section <?php block_attr( $block, 'flex gap-5 my-4' ); ?>>
 	<?php
 	// Goal.
 	if ( $goal ) :
-		printf(
-			'<p style="text-align: center;">%s</p>',
-			esc_html__( wc_price( $goal ), 'goodbids' )
-		);
-	endif;
+		?>
+		<div class="flex flex-col text-center">
+			<p class="m-0 uppercase font-thin has-x-small-font-size"><?php esc_html_e( 'Auction Goal' ); ?></p>
+			<?php
+				printf(
+					'<p class="m-1 font-extrabold">%s</p>',
+					wp_kses_post( wc_price( $goal ), 'goodbids' )
+				);
+			?>
+		</div>
+	<?php endif; ?>
 
+	<?php
 	// Estimated Value.
 	if ( $estimated_value ) :
-		printf(
-			'<p style="text-align: center;">%s</p>',
-			esc_html__( wc_price( $estimated_value ), 'goodbids' )
-		);
-	endif;
+		?>
+		<div class="flex flex-col text-center">
+			<p class="m-0 uppercase font-thin has-x-small-font-size"><?php esc_html_e( 'Auction Goal' ); ?></p>
+			<?php
+				printf(
+					'<p class="m-1 font-extrabold">%s</p>',
+					wp_kses_post( wc_price( $estimated_value ), 'goodbids' )
+				);
+			?>
+		</div>
+	<?php endif; ?>
 
+	<?php
 	// Expected High Bid.
 	if ( $expected_high_bid ) :
-		printf(
-			'<p style="text-align: center;">%s</p>',
-			esc_html__( wc_price( $expected_high_bid ), 'goodbids' )
-		);
-	endif;
-	?>
+		?>
+		<div class="flex flex-col text-center">
+			<p class="m-0 uppercase font-thin has-x-small-font-size"><?php esc_html_e( 'Auction Goal' ); ?></p>
+			<?php
+				printf(
+					'<p class="m-1 font-extrabold">%s</p>',
+					wp_kses_post( wc_price( $expected_high_bid ), 'goodbids' )
+				);
+			?>
+		</div>
+
+
+	<?php endif; ?>
 </section>

client-mu-plugins/goodbids/blocks/reward-product-gallery/block.css

@@ -1,20 +1,20 @@
-.woocommerce div.product div.images {
-	width: 100% !important;
-}
+@layer components {
+	.woocommerce div.product div.images {
+		@apply w-full;
+	}
 
-.woocommerce .flex-viewport {
-	margin-bottom: 1rem;
-}
+	.woocommerce .flex-viewport {
+		@apply mb-2;
+	}
 
-.woocommerce div.product div.images .flex-control-thumbs {
-	display: flex;
-    gap: 1rem
-}
+	.woocommerce div.product div.images .flex-control-thumbs {
+		@apply flex gap-2;
+	}
 
-.woocommerce .woocommerce-product-gallery__image.flex-active-slide,
-.woocommerce .flex-viewport,
-.woocommerce div.product div.images img,
-.woocommerce div.product div.images .flex-control-thumbs li img {
-	border-radius: 30px;
+	.woocommerce .woocommerce-product-gallery__image.flex-active-slide,
+	.woocommerce .flex-viewport,
+	.woocommerce div.product div.images img,
+	.woocommerce div.product div.images .flex-control-thumbs li img {
+		@apply rounded;
+	}
 }
-

client-mu-plugins/goodbids/src/assets/css/main.css

@@ -1,7 +1,5 @@
+@import '../../../blocks/reward-product-gallery/block.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-body {
-	@apply bg-emerald-500;
-}

client-mu-plugins/goodbids/tailwind.config.js

@@ -5,11 +5,13 @@ export default {
 	},
 	content: [
 		"./assets/**/*.{css,js,jsx,tsx}",
-		"./block/**/*.{php,css,js}",
+		"./blocks/**/*.{php,css,js}",
 		"./views/**/**/*.{php,html}",
 	],
 	theme: {
-		extend: {},
+		borderRadius: {
+			DEFAULT: '30px',
+		}
 	},
 	plugins: [],
 }

client-mu-plugins/goodbids/views/patterns/template-auction.php

@@ -28,7 +28,7 @@
 
 			<!-- wp:post-excerpt /-->
 
-			<!-- wp:acf/reward-product {"name":"acf/reward-product","mode":"preview"} /-->
+			<!-- wp:acf/auction-metrics-general {"name":"acf/auction-metrics-general","mode":"preview"} /-->
 
 			<!-- wp:acf/bid-now {"name":"acf/bid-now","mode":"preview"} /-->
 		</div>