Skip to content

Commit fea238c

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Redesign form layouts for efficient space usage - horizontal field layouts, compact styling
Co-authored-by: 0xrinegade <[email protected]>
1 parent e1a8204 commit fea238c

File tree

6 files changed

+1119
-298
lines changed

6 files changed

+1119
-298
lines changed

‎src/components/DisputeResolution.js‎

Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -167,30 +167,36 @@ const DisputeResolution = ({ disputeId }) => {
167167
/>
168168
)}
169169

170-
<div className="dispute-details">
171-
<div className="detail-row">
172-
<span className="label">Dispute ID:</span>
173-
<span className="value">{dispute.id}</span>
174-
</div>
175-
176-
<div className="detail-row">
177-
<span className="label">Offer ID:</span>
178-
<span className="value">{dispute.offerId}</span>
179-
</div>
170+
<div className="ascii-form">
171+
<div className="ascii-form-header">DISPUTE DETAILS</div>
180172

181-
<div className="detail-row">
182-
<span className="label">Status:</span>
183-
<span className="value status-badge">{dispute.status}</span>
173+
<div className="ascii-form-row-2">
174+
<div className="ascii-field-inline">
175+
<label>DISPUTE ID:</label>
176+
<span className="ascii-code">{dispute.id}</span>
177+
</div>
178+
179+
<div className="ascii-field-inline">
180+
<label>OFFER ID:</label>
181+
<span className="ascii-code">{dispute.offerId}</span>
182+
</div>
184183
</div>
185184

186-
<div className="detail-row">
187-
<span className="label">Reason:</span>
188-
<span className="value">{dispute.reason}</span>
185+
<div className="ascii-form-row-2">
186+
<div className="ascii-field-inline">
187+
<label>STATUS:</label>
188+
<span className="ascii-status ascii-status-active">{dispute.status}</span>
189+
</div>
190+
191+
<div className="ascii-field-inline">
192+
<label>CREATED:</label>
193+
<span>{new Date(dispute.createdAt).toLocaleString()}</span>
194+
</div>
189195
</div>
190196

191-
<div className="detail-row">
192-
<span className="label">Created:</span>
193-
<span className="value">{new Date(dispute.createdAt).toLocaleString()}</span>
197+
<div className="ascii-field-inline">
198+
<label>REASON:</label>
199+
<span>{dispute.reason}</span>
194200
</div>
195201
</div>
196202

@@ -226,23 +232,32 @@ const DisputeResolution = ({ disputeId }) => {
226232
</div>
227233

228234
{dispute.status === 'EvidenceSubmission' && (
229-
<form onSubmit={handleSubmitEvidence} className="evidence-form">
230-
<h4>Submit Evidence</h4>
231-
<textarea
232-
value={evidence}
233-
onChange={(e) => setEvidence(e.target.value)}
234-
placeholder="Describe your evidence here..."
235-
disabled={submittingEvidence}
236-
required
237-
/>
238-
<button
239-
type="submit"
240-
className="submit-evidence-button"
241-
disabled={submittingEvidence}
242-
>
243-
{submittingEvidence ? 'Submitting...' : 'Submit Evidence'}
244-
</button>
245-
</form>
235+
<div className="ascii-form">
236+
<div className="ascii-form-header">SUBMIT EVIDENCE</div>
237+
<form onSubmit={handleSubmitEvidence}>
238+
<div className="ascii-field">
239+
<label htmlFor="evidence">EVIDENCE DESCRIPTION</label>
240+
<textarea
241+
id="evidence"
242+
value={evidence}
243+
onChange={(e) => setEvidence(e.target.value)}
244+
placeholder="Describe your evidence here..."
245+
disabled={submittingEvidence}
246+
required
247+
rows={4}
248+
/>
249+
</div>
250+
<div className="ascii-form-actions">
251+
<button
252+
type="submit"
253+
className="ascii-button-primary"
254+
disabled={submittingEvidence}
255+
>
256+
{submittingEvidence ? 'SUBMITTING...' : 'SUBMIT EVIDENCE'}
257+
</button>
258+
</div>
259+
</form>
260+
</div>
246261
)}
247262
</div>
248263

‎src/components/OfferCreation.js‎

Lines changed: 117 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -265,112 +265,124 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
265265
/>
266266
)}
267267

268-
<form onSubmit={handleCreateOffer}>
269-
<div className="form-group">
270-
<label htmlFor="solAmount">
271-
<Tooltip content="Enter the amount of SOL you want to sell">
272-
<span>SOL Amount</span>
273-
</Tooltip>
274-
</label>
275-
<input
276-
id="solAmount"
277-
type="number"
278-
value={solAmount}
279-
onChange={handleSolAmountChange}
280-
placeholder="Enter SOL amount"
281-
min={VALIDATION_CONSTRAINTS.SOL_AMOUNT.min}
282-
max={VALIDATION_CONSTRAINTS.SOL_AMOUNT.max}
283-
step={VALIDATION_CONSTRAINTS.SOL_AMOUNT.step}
284-
required
285-
className={!solValidation.isValid ? 'input-error' : ''}
286-
/>
287-
{!solValidation.isValid && (
288-
<div className="validation-error">{solValidation.error}</div>
289-
)}
290-
</div>
268+
<div className="ascii-form">
269+
<div className="ascii-form-header">CREATE SELL OFFER</div>
291270

292-
<div className="form-group">
293-
<label htmlFor="fiatCurrency">
294-
<Tooltip content="Select the currency you want to receive">
295-
<span>Fiat Currency</span>
296-
</Tooltip>
297-
</label>
298-
<select
299-
id="fiatCurrency"
300-
value={fiatCurrency}
301-
onChange={handleCurrencyChange}
302-
required
303-
>
304-
{SUPPORTED_CURRENCIES.map(currency => (
305-
<option key={currency} value={currency}>{currency}</option>
306-
))}
307-
</select>
308-
</div>
309-
310-
<div className="form-group">
311-
<label htmlFor="fiatAmount">
312-
<Tooltip content="The amount in fiat currency you will receive">
313-
<span>Fiat Amount</span>
314-
</Tooltip>
315-
</label>
316-
<input
317-
id="fiatAmount"
318-
type="number"
319-
value={fiatAmount}
320-
onChange={(e) => setFiatAmount(e.target.value)}
321-
placeholder="Enter fiat amount"
322-
min={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.min}
323-
max={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.max}
324-
step={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.step}
325-
required
326-
className={!fiatValidation.isValid ? 'input-error' : ''}
327-
/>
328-
{!fiatValidation.isValid && (
329-
<div className="validation-error">{fiatValidation.error}</div>
330-
)}
331-
{rateValidation.error && (
332-
<div className="validation-warning">{rateValidation.error}</div>
333-
)}
334-
</div>
335-
336-
<div className="form-group">
337-
<label htmlFor="paymentMethod">
338-
<Tooltip content="Select how you want to receive payment">
339-
<span>Payment Method</span>
340-
</Tooltip>
341-
</label>
342-
<select
343-
id="paymentMethod"
344-
value={paymentMethod}
345-
onChange={(e) => setPaymentMethod(e.target.value)}
346-
required
347-
>
348-
{SUPPORTED_PAYMENT_METHODS.map(method => (
349-
<option key={method} value={method}>{method}</option>
350-
))}
351-
</select>
352-
</div>
353-
354-
{/* Submit button or connect wallet prompt */}
355-
{!wallet.connected ? (
356-
<ConnectWalletPrompt
357-
action="create sell offers"
358-
className="create-offer-button connect-wallet-button"
359-
/>
360-
) : (
361-
<ButtonLoader
362-
type="submit"
363-
isLoading={isCreating}
364-
disabled={!wallet.connected || !wallet.publicKey || isActionDisabled || !solValidation.isValid || !fiatValidation.isValid}
365-
loadingText="Creating Offer..."
366-
variant="primary"
367-
size="medium"
368-
className="create-offer-button"
369-
>
370-
Create Offer
371-
</ButtonLoader>
372-
)}
373-
</form>
271+
<form onSubmit={handleCreateOffer}>
272+
{/* Primary amount fields in one row */}
273+
<div className="ascii-form-row-2">
274+
<div className="ascii-field">
275+
<label htmlFor="solAmount">
276+
<Tooltip content="Enter the amount of SOL you want to sell">
277+
<span>SOL AMOUNT</span>
278+
</Tooltip>
279+
</label>
280+
<input
281+
id="solAmount"
282+
type="number"
283+
value={solAmount}
284+
onChange={handleSolAmountChange}
285+
placeholder="0.00 SOL"
286+
min={VALIDATION_CONSTRAINTS.SOL_AMOUNT.min}
287+
max={VALIDATION_CONSTRAINTS.SOL_AMOUNT.max}
288+
step={VALIDATION_CONSTRAINTS.SOL_AMOUNT.step}
289+
required
290+
className={!solValidation.isValid ? 'input-error' : ''}
291+
/>
292+
{!solValidation.isValid && (
293+
<div className="ascii-field-error-message">{solValidation.error}</div>
294+
)}
295+
</div>
296+
297+
<div className="ascii-field">
298+
<label htmlFor="fiatAmount">
299+
<Tooltip content="The amount in fiat currency you will receive">
300+
<span>FIAT AMOUNT</span>
301+
</Tooltip>
302+
</label>
303+
<input
304+
id="fiatAmount"
305+
type="number"
306+
value={fiatAmount}
307+
onChange={(e) => setFiatAmount(e.target.value)}
308+
placeholder="0.00"
309+
min={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.min}
310+
max={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.max}
311+
step={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.step}
312+
required
313+
className={!fiatValidation.isValid ? 'input-error' : ''}
314+
/>
315+
{!fiatValidation.isValid && (
316+
<div className="ascii-field-error-message">{fiatValidation.error}</div>
317+
)}
318+
{rateValidation.error && (
319+
<div className="ascii-field-help">{rateValidation.error}</div>
320+
)}
321+
</div>
322+
</div>
323+
324+
{/* Currency and payment method in one row */}
325+
<div className="ascii-form-row-2">
326+
<div className="ascii-field">
327+
<label htmlFor="fiatCurrency">
328+
<Tooltip content="Select the currency you want to receive">
329+
<span>CURRENCY</span>
330+
</Tooltip>
331+
</label>
332+
<select
333+
id="fiatCurrency"
334+
value={fiatCurrency}
335+
onChange={handleCurrencyChange}
336+
required
337+
>
338+
{SUPPORTED_CURRENCIES.map(currency => (
339+
<option key={currency} value={currency}>{currency}</option>
340+
))}
341+
</select>
342+
</div>
343+
344+
<div className="ascii-field">
345+
<label htmlFor="paymentMethod">
346+
<Tooltip content="Select how you want to receive payment">
347+
<span>PAYMENT METHOD</span>
348+
</Tooltip>
349+
</label>
350+
<select
351+
id="paymentMethod"
352+
value={paymentMethod}
353+
onChange={(e) => setPaymentMethod(e.target.value)}
354+
required
355+
>
356+
{SUPPORTED_PAYMENT_METHODS.map(method => (
357+
<option key={method} value={method}>{method}</option>
358+
))}
359+
</select>
360+
</div>
361+
</div>
362+
363+
{/* Submit button */}
364+
<div className="ascii-form-actions">
365+
{!wallet.connected ? (
366+
<ConnectWalletPrompt
367+
action="create sell offers"
368+
className="create-offer-button connect-wallet-button"
369+
/>
370+
) : (
371+
<ButtonLoader
372+
type="submit"
373+
isLoading={isCreating}
374+
disabled={!wallet.connected || !wallet.publicKey || isActionDisabled || !solValidation.isValid || !fiatValidation.isValid}
375+
loadingText="Creating Offer..."
376+
variant="primary"
377+
size="medium"
378+
className="create-offer-button"
379+
>
380+
Create Offer
381+
</ButtonLoader>
382+
)}
383+
</div>
384+
</form>
385+
</div>
374386

375387
<div className="network-info">
376388
<p>Network: {network.name}</p>

0 commit comments

Comments
 (0)