From de8a72e6232895c4b4b59fd2c2442a86fe18a23a Mon Sep 17 00:00:00 2001
From: jaspercroome <128058464+jaspercroome@users.noreply.github.com>
Date: Sun, 7 Apr 2024 04:13:58 -0700
Subject: [PATCH] fix: remove clsx implementation from first-time dialog (#879)

* remove clsx implementation

* fix: add onFocus
---
 .../src/blocks/bidding/components/bid-button/index.tsx |  1 +
 .../bidding/components/first-time-dialog/index.tsx     | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client-mu-plugins/goodbids/src/blocks/bidding/components/bid-button/index.tsx b/client-mu-plugins/goodbids/src/blocks/bidding/components/bid-button/index.tsx
index 9ca7c44e..94f43332 100644
--- a/client-mu-plugins/goodbids/src/blocks/bidding/components/bid-button/index.tsx
+++ b/client-mu-plugins/goodbids/src/blocks/bidding/components/bid-button/index.tsx
@@ -74,6 +74,7 @@ function LiveAndClosing() {
 				className={classes}
 				href={isLastBidder ? '#' : bidUrl}
 				aria-live="polite"
+				onFocus={() => setShowDialog(true)}
 				onMouseOver={() => setShowDialog(true)}
 			>
 				{__('GOODBID', 'goodbids')}{' '}
diff --git a/client-mu-plugins/goodbids/src/blocks/bidding/components/first-time-dialog/index.tsx b/client-mu-plugins/goodbids/src/blocks/bidding/components/first-time-dialog/index.tsx
index 1f2fe813..bc2a618a 100644
--- a/client-mu-plugins/goodbids/src/blocks/bidding/components/first-time-dialog/index.tsx
+++ b/client-mu-plugins/goodbids/src/blocks/bidding/components/first-time-dialog/index.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import { FormEvent, useEffect, useState } from 'react';
 import { WarningIconFilled } from '../icons/warning-icon-filled';
 
@@ -24,15 +23,14 @@ export const FirstTimeDialog = (props: { showDialog: boolean }) => {
 		localStorage.setItem(cookieString, 'true');
 	};
 
-	const dialogClasses = clsx(
-		'opacity-1 absolute overflow-hidden rounded-xl border-red-50 p-12 text-left shadow-xl sm:my-8 sm:w-[384px] sm:max-w-lg',
-	);
-
 	return (
 		showDialog &&
 		!hasSeenDialog && (
 			<div className="fixed inset-0 left-0 top-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden outline-none focus:outline-none">
-				<dialog className={dialogClasses} open={!hasSeenDialog}>
+				<dialog
+					className="opacity-1 absolute overflow-hidden rounded-xl border-red-50 p-12 text-left shadow-xl sm:my-8 sm:w-[384px] sm:max-w-lg"
+					open={!hasSeenDialog}
+				>
 					<div className="flex-col sm:flex sm:items-start">
 						<WarningIconFilled />
 						<div className="mt-3 text-center sm:mt-0 sm:text-left">