From 3f0f5a1851ef7def70160df111dbfd7904da32fa Mon Sep 17 00:00:00 2001
From: Vivek Jain <vkj.vivekkumarjain@gmail.com>
Date: Mon, 25 Nov 2024 18:56:53 +0530
Subject: [PATCH 1/2] Fix styles

---
 docs/site/src/components/CTF/ctf-verifier.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/site/src/components/CTF/ctf-verifier.tsx b/docs/site/src/components/CTF/ctf-verifier.tsx
index 530ddf2d44f..203ca3ef99b 100644
--- a/docs/site/src/components/CTF/ctf-verifier.tsx
+++ b/docs/site/src/components/CTF/ctf-verifier.tsx
@@ -5,6 +5,7 @@ import {
 } from '@iota/dapp-kit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getFullnodeUrl, IotaClient } from '@iota/iota-sdk/client';
+import clsx from 'clsx';
 
 // Define props interface
 interface ChallengeVerifierProps {
@@ -45,14 +46,15 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
   };
 
   return (
-    <div>
+    <div className='flex'>
       <input
         type="text"
         value={inputText}
         onChange={(e) => setInputText(e.target.value)}
         placeholder="Enter Flag Object Id"
+        className="input-field mr-2"
       />
-      <button onClick={handleSubmit} disabled={loading}>
+      <button onClick={handleSubmit} className={clsx("button", { "button-disabled": loading })}>
         {loading ? 'Loading...' : 'Submit'}
       </button>
 

From 3b6f6c70cb67bc7a0e18eb2d2ad2c93962641792 Mon Sep 17 00:00:00 2001
From: Vivek Jain <vkj.vivekkumarjain@gmail.com>
Date: Tue, 3 Dec 2024 19:23:11 +0530
Subject: [PATCH 2/2] Fix styles

---
 docs/site/src/components/CTF/ctf-verifier.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/site/src/components/CTF/ctf-verifier.tsx b/docs/site/src/components/CTF/ctf-verifier.tsx
index 203ca3ef99b..d6ee34965ca 100644
--- a/docs/site/src/components/CTF/ctf-verifier.tsx
+++ b/docs/site/src/components/CTF/ctf-verifier.tsx
@@ -46,7 +46,7 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
   };
 
   return (
-    <div className='flex'>
+    <div className='flex items-center'>
       <input
         type="text"
         value={inputText}
@@ -58,7 +58,7 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
         {loading ? 'Loading...' : 'Submit'}
       </button>
 
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {error && <p className='text-red-500 text-center mb-0 ml-2'>{error}</p>}
 
       {coins && (
         <div>
@@ -92,4 +92,4 @@ const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
 };
 
 // Export the component wrapped in providers
-export default withProviders(ChallengeVerifier);
+export default withProviders(ChallengeVerifier);
\ No newline at end of file