Skip to content

Commit 41e93e7

Browse files
josegomez-devjosegomez-dev
committed
fix(ui): improve Quest section mobile layout - full width for Nexus Quest Master box
1 parent bbda8b2 commit 41e93e7

File tree

5 files changed

+255
-218
lines changed

5 files changed

+255
-218
lines changed

‎components/demos/DisputeResolutionDemo.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -909,9 +909,9 @@ export const DisputeResolutionDemo = () => {
909909

910910
{/* Role Selection - Only show after escrow is funded */}
911911
{contractId && escrowData?.metadata?.funded && (
912-
<div className='mb-8 p-6 bg-white/5 rounded-lg border border-white/20'>
913-
<h3 className='text-xl font-semibold text-white mb-4'>👤 Select Your Role</h3>
914-
<div className='flex space-x-4'>
912+
<div className='mb-6 sm:mb-8 p-4 sm:p-6 bg-white/5 rounded-lg border border-white/20'>
913+
<h3 className='text-lg sm:text-xl font-semibold text-white mb-3 sm:mb-4'>👤 Select Your Role</h3>
914+
<div className='flex flex-col sm:flex-row gap-3 sm:gap-0 sm:space-x-4'>
915915
{(['client', 'worker', 'arbitrator'] as const).map(role => {
916916
// Check if worker button should be highlighted (user needs to switch to worker for pending milestones)
917917
const hasPendingMilestones = milestones.some(m => m.status === 'pending');
@@ -951,10 +951,10 @@ export const DisputeResolutionDemo = () => {
951951
shouldHighlightWorker || shouldHighlightClient || shouldHighlightArbitrator;
952952

953953
return (
954-
<div key={role} className={isHighlighted ? 'relative' : ''}>
954+
<div key={role} className={`${isHighlighted ? 'relative' : ''} w-full sm:w-auto`}>
955955
<button
956956
onClick={() => setCurrentRole(role)}
957-
className={`px-6 py-3 rounded-lg font-medium transition-all duration-300 ${
957+
className={`w-full sm:w-auto px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 text-sm sm:text-base ${
958958
currentRole === role
959959
? 'bg-warning-500/30 border-2 border-warning-400/50 text-warning-200'
960960
: 'bg-white/5 border border-white/20 text-white/70 hover:bg-white/10 hover:border-white/30'
@@ -975,30 +975,30 @@ export const DisputeResolutionDemo = () => {
975975

976976
{/* Animated notification badge for worker button */}
977977
{shouldHighlightWorker && (
978-
<div className='absolute -top-2 -right-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1 animate-bounce'>
978+
<div className='absolute -top-1.5 sm:-top-2 -right-1.5 sm:-right-2 bg-blue-500 text-white text-[10px] sm:text-xs rounded-full px-1.5 sm:px-2 py-0.5 sm:py-1 animate-bounce whitespace-nowrap'>
979979
Complete tasks!
980980
</div>
981981
)}
982982

983983
{/* Animated notification badge for client button */}
984984
{shouldHighlightClient && (
985-
<div className='absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full px-2 py-1 animate-bounce'>
985+
<div className='absolute -top-1.5 sm:-top-2 -right-1.5 sm:-right-2 bg-green-500 text-white text-[10px] sm:text-xs rounded-full px-1.5 sm:px-2 py-0.5 sm:py-1 animate-bounce whitespace-nowrap'>
986986
Review & Approve!
987987
</div>
988988
)}
989989

990990
{/* Animated notification badge for arbitrator button */}
991991
{shouldHighlightArbitrator && (
992-
<div className='absolute -top-2 -right-2 bg-orange-500 text-white text-xs rounded-full px-2 py-1 animate-bounce'>
992+
<div className='absolute -top-1.5 sm:-top-2 -right-1.5 sm:-right-2 bg-orange-500 text-white text-[10px] sm:text-xs rounded-full px-1.5 sm:px-2 py-0.5 sm:py-1 animate-bounce whitespace-nowrap'>
993993
Resolve Disputes!
994994
</div>
995995
)}
996996
</div>
997997
);
998998
})}
999999
</div>
1000-
<p className='text-sm text-white/60 mt-3'>
1001-
Current role: <span className='text-warning-300 capitalize'>{currentRole}</span>
1000+
<p className='text-xs sm:text-sm text-white/60 mt-2 sm:mt-3'>
1001+
Current role: <span className='text-warning-300 capitalize font-semibold'>{currentRole}</span>
10021002
</p>
10031003
</div>
10041004
)}
@@ -1247,55 +1247,55 @@ export const DisputeResolutionDemo = () => {
12471247

12481248
{/* Milestones Management */}
12491249
{contractId && escrowData?.metadata?.funded && (
1250-
<div className='mb-8'>
1251-
<div className='flex items-center justify-between mb-6'>
1252-
<h3 className='text-xl font-semibold text-white'>📋 Milestones Management</h3>
1250+
<div className='mb-6 sm:mb-8'>
1251+
<div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0 mb-4 sm:mb-6'>
1252+
<h3 className='text-lg sm:text-xl font-semibold text-white'>📋 Milestones Management</h3>
12531253
{/* Single notification for role guidance */}
12541254
{currentRole !== 'worker' && milestones.some(m => m.status === 'pending') && (
1255-
<div className='px-4 py-2 bg-blue-500/10 border border-blue-400/30 rounded-lg'>
1256-
<p className='text-blue-300 text-sm'>
1255+
<div className='px-3 sm:px-4 py-1.5 sm:py-2 bg-blue-500/10 border border-blue-400/30 rounded-lg w-full sm:w-auto'>
1256+
<p className='text-blue-300 text-xs sm:text-sm'>
12571257
👷 Switch to <strong>Worker</strong> role to complete milestones
12581258
</p>
12591259
</div>
12601260
)}
12611261
{/* Notification for arbitrator role when disputes exist */}
12621262
{currentRole !== 'arbitrator' && disputes.some(d => d.status === 'open') && (
1263-
<div className='px-4 py-2 bg-orange-500/10 border border-orange-400/30 rounded-lg'>
1264-
<p className='text-orange-300 text-sm'>
1263+
<div className='px-3 sm:px-4 py-1.5 sm:py-2 bg-orange-500/10 border border-orange-400/30 rounded-lg w-full sm:w-auto'>
1264+
<p className='text-orange-300 text-xs sm:text-sm'>
12651265
⚖️ Switch to <strong>Arbitrator</strong> role to resolve disputes
12661266
</p>
12671267
</div>
12681268
)}
12691269
</div>
12701270

1271-
<div className='space-y-6'>
1271+
<div className='space-y-4 sm:space-y-6'>
12721272
{milestones.map(milestone => (
12731273
<div
12741274
key={milestone.id}
1275-
className='p-6 bg-white/5 rounded-lg border border-white/20'
1275+
className='p-4 sm:p-6 bg-white/5 rounded-lg border border-white/20'
12761276
>
1277-
<div className='flex items-start justify-between mb-4'>
1278-
<div className='flex-1'>
1279-
<h4 className='text-lg font-semibold text-white mb-2'>{milestone.title}</h4>
1280-
<p className='text-white/70 mb-3'>{milestone.description}</p>
1281-
<div className='flex items-center space-x-4 text-sm'>
1282-
<span className='text-warning-300'>
1277+
<div className='flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-4 mb-3 sm:mb-4'>
1278+
<div className='flex-1 w-full sm:w-auto'>
1279+
<h4 className='text-base sm:text-lg font-semibold text-white mb-1.5 sm:mb-2'>{milestone.title}</h4>
1280+
<p className='text-sm sm:text-base text-white/70 mb-2 sm:mb-3'>{milestone.description}</p>
1281+
<div className='flex items-center gap-2 sm:gap-4 text-sm flex-wrap'>
1282+
<span className='text-warning-300 font-semibold'>
12831283
{(parseInt(milestone.amount) / 100000).toFixed(1)} USDC
12841284
</span>
12851285
<span
1286-
className={`px-2 py-1 rounded text-xs ${getMilestoneStatusColor(milestone.status)}`}
1286+
className={`px-2 py-1 rounded text-xs whitespace-nowrap ${getMilestoneStatusColor(milestone.status)}`}
12871287
>
12881288
{milestone.status.charAt(0).toUpperCase() + milestone.status.slice(1)}
12891289
</span>
12901290
</div>
12911291
</div>
1292-
<div className='text-right space-y-2'>
1292+
<div className='w-full sm:w-auto sm:text-right space-y-2'>
12931293
{/* Worker Actions */}
12941294
{currentRole === 'worker' && milestone.status === 'pending' && (
12951295
<button
12961296
onClick={() => handleCompleteMilestone(milestone.id)}
12971297
disabled={milestoneLoadingStates[milestone.id]}
1298-
className='px-4 py-2 bg-warning-500/20 hover:bg-warning-500/30 border border-warning-400/30 rounded-lg text-warning-300 hover:text-warning-200 transition-colors block w-full'
1298+
className='px-3 sm:px-4 py-2 bg-warning-500/20 hover:bg-warning-500/30 border border-warning-400/30 rounded-lg text-warning-300 hover:text-warning-200 transition-colors block w-full text-sm sm:text-base'
12991299
>
13001300
{milestoneLoadingStates[milestone.id]
13011301
? 'Completing...'
@@ -1305,10 +1305,10 @@ export const DisputeResolutionDemo = () => {
13051305

13061306
{/* Client Actions - Demo Focus: Dispute Resolution */}
13071307
{currentRole === 'client' && milestone.status === 'completed' && (
1308-
<div className='space-y-3'>
1308+
<div className='space-y-2 sm:space-y-3'>
13091309
{/* UI Guide for demo */}
1310-
<div className='px-3 py-2 bg-blue-500/10 border border-blue-400/30 rounded-lg'>
1311-
<p className='text-blue-300 text-xs'>
1310+
<div className='px-2 sm:px-3 py-1.5 sm:py-2 bg-blue-500/10 border border-blue-400/30 rounded-lg'>
1311+
<p className='text-blue-300 text-[10px] sm:text-xs'>
13121312
💡 <strong>Demo Focus:</strong> Experience the dispute resolution
13131313
process!
13141314
</p>
@@ -1326,7 +1326,7 @@ export const DisputeResolutionDemo = () => {
13261326
});
13271327
}}
13281328
disabled
1329-
className='px-4 py-2 bg-gray-500/20 border border-gray-400/30 rounded-lg text-gray-400 cursor-not-allowed transition-colors block w-full opacity-60'
1329+
className='px-3 sm:px-4 py-2 bg-gray-500/20 border border-gray-400/30 rounded-lg text-gray-400 cursor-not-allowed transition-colors block w-full opacity-60 text-xs sm:text-base'
13301330
>
13311331
Approve (Disabled for Demo)
13321332
</button>
@@ -1338,7 +1338,7 @@ export const DisputeResolutionDemo = () => {
13381338
milestoneLoadingStates[milestone.id] ||
13391339
!(disputeReasons[milestone.id] || '').trim()
13401340
}
1341-
className='px-4 py-2 bg-red-500/20 hover:bg-red-500/30 border border-red-400/30 rounded-lg text-red-300 hover:text-red-200 transition-colors block w-full'
1341+
className='px-3 sm:px-4 py-2 bg-red-500/20 hover:bg-red-500/30 border border-red-400/30 rounded-lg text-red-300 hover:text-red-200 transition-colors block w-full text-sm sm:text-base'
13421342
>
13431343
{milestoneLoadingStates[milestone.id]
13441344
? 'Starting Dispute...'
@@ -1351,8 +1351,8 @@ export const DisputeResolutionDemo = () => {
13511351

13521352
{/* Dispute Input for Client */}
13531353
{currentRole === 'client' && milestone.status === 'completed' && (
1354-
<div className='mt-4 p-4 bg-red-500/10 border border-red-400/30 rounded-lg'>
1355-
<h5 className='text-sm font-medium text-red-300 mb-2'>Raise Dispute</h5>
1354+
<div className='mt-3 sm:mt-4 p-3 sm:p-4 bg-red-500/10 border border-red-400/30 rounded-lg'>
1355+
<h5 className='text-xs sm:text-sm font-medium text-red-300 mb-2'>Raise Dispute</h5>
13561356
<div className='flex space-x-2'>
13571357
<input
13581358
type='text'
@@ -1364,7 +1364,7 @@ export const DisputeResolutionDemo = () => {
13641364
}))
13651365
}
13661366
placeholder='Enter dispute reason...'
1367-
className='flex-1 px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-red-400/50'
1367+
className='flex-1 px-2 sm:px-3 py-1.5 sm:py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-red-400/50 text-sm'
13681368
/>
13691369
</div>
13701370
</div>

‎components/demos/HelloMilestoneDemo.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1481,21 +1481,21 @@ export const HelloMilestoneDemo = ({
14811481
)}
14821482

14831483
{/* Demo Progress */}
1484-
<div className='mb-8'>
1485-
<div className='flex items-center justify-between mb-4'>
1486-
<h3 className='text-xl font-semibold text-white'>Demo Progress</h3>
1484+
<div className='mb-6 sm:mb-8'>
1485+
<div className='flex items-center justify-between mb-3 sm:mb-4'>
1486+
<h3 className='text-lg sm:text-xl font-semibold text-white'>Demo Progress</h3>
14871487
</div>
14881488

14891489
<div className='space-y-4'>
14901490
{steps.map((step, index) => (
14911491
<div
14921492
key={step.id}
1493-
className={`flex items-center p-4 rounded-lg border-2 transition-all duration-300 ${getStepColor(step.status)}`}
1493+
className={`flex flex-col sm:flex-row items-start sm:items-center p-3 sm:p-4 rounded-lg border-2 transition-all duration-300 gap-3 sm:gap-0 ${getStepColor(step.status)}`}
14941494
>
1495-
<div className='text-2xl mr-4'>{getStepIcon(step.status)}</div>
1496-
<div className='flex-1'>
1497-
<h4 className='font-semibold text-white'>{step.title}</h4>
1498-
<p className='text-sm text-white/70'>{step.description}</p>
1495+
<div className='text-2xl sm:mr-4'>{getStepIcon(step.status)}</div>
1496+
<div className='flex-1 w-full sm:w-auto'>
1497+
<h4 className='font-semibold text-white text-sm sm:text-base'>{step.title}</h4>
1498+
<p className='text-xs sm:text-sm text-white/70'>{step.description}</p>
14991499
{step.details && <p className='text-xs text-white/50 mt-1'>{step.details}</p>}
15001500
</div>
15011501
{step.action && (
@@ -1537,7 +1537,7 @@ export const HelloMilestoneDemo = ({
15371537
<button
15381538
onClick={step.action}
15391539
disabled={step.disabled}
1540-
className={`px-6 py-3 rounded-lg font-medium transition-all duration-300 flex items-center space-x-2 ${
1540+
className={`w-full sm:w-auto px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-medium transition-all duration-300 flex items-center justify-center space-x-2 text-sm sm:text-base ${
15411541
step.disabled
15421542
? 'bg-neutral-500/20 text-neutral-400 cursor-not-allowed opacity-50'
15431543
: step.status === 'current'

0 commit comments

Comments
 (0)