Skip to content

Commit 0fbe8a4

Browse files
sujatagunalesujatagunale
committed
refactor: converter styles
1 parent 37ca69c commit 0fbe8a4

2 files changed

Lines changed: 77 additions & 75 deletions

File tree

‎app/globals.css‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -286,10 +286,6 @@
286286
@apply pr-5 text-end;
287287
}
288288

289-
.converter-title {
290-
@apply text-2xl font-semibold;
291-
}
292-
293289
.coin-details-grid {
294290
@apply rounded-lg grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-5;
295291
}
@@ -413,56 +409,68 @@
413409
}
414410

415411
/* Converter Component Utilities */
416-
.converter-container {
417-
@apply space-y-2 bg-dark-500 px-5 py-7 rounded-lg;
418-
}
412+
#converter {
413+
@apply w-full space-y-5;
419414

420-
.converter-input-wrapper {
421-
@apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pr-4;
422-
}
415+
h4 {
416+
@apply text-2xl font-semibold;
417+
}
423418

424-
.converter-input {
425-
@apply flex-1 !text-lg border-none font-medium !bg-dark-400 focus-visible:ring-0 shadow-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
426-
}
419+
.panel {
420+
@apply space-y-2 bg-dark-500 px-5 py-7 rounded-lg;
421+
}
427422

428-
.converter-coin-info {
429-
@apply flex items-center gap-1;
430-
}
423+
.input-wrapper {
424+
@apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pr-4;
431425

432-
.converter-coin-symbol {
433-
@apply font-semibold text-base text-purple-100;
434-
}
426+
.input {
427+
@apply flex-1 text-lg! border-none font-medium bg-dark-400! focus-visible:ring-0 shadow-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
428+
}
435429

436-
.converter-divider-wrapper {
437-
@apply relative flex justify-center items-center my-4;
438-
}
430+
.coin-info {
431+
@apply flex items-center gap-1;
439432

440-
.converter-divider-line {
441-
@apply h-[1px] z-10 w-full bg-dark-400 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
442-
}
433+
p {
434+
@apply font-semibold text-base text-purple-100;
435+
}
436+
}
437+
}
443438

444-
.converter-icon {
445-
@apply size-8 z-20 bg-dark-400 rounded-full p-2 text-green-500;
446-
}
439+
.divider {
440+
@apply relative flex justify-center items-center my-4;
447441

448-
.converter-output-wrapper {
449-
@apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pl-4;
450-
}
442+
.line {
443+
@apply h-px z-10 w-full bg-dark-400 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
444+
}
451445

452-
.converter-select-trigger {
453-
@apply w-fit border-none cursor-pointer !h-12 !bg-dark-400 hover:!bg-dark-400 focus-visible:!ring-0;
454-
}
446+
.icon {
447+
@apply size-8 z-20 bg-dark-400 rounded-full p-2 text-green-500;
448+
}
449+
}
455450

456-
.converter-select-content {
457-
@apply bg-dark-400 max-h-[500px];
458-
}
451+
.output-wrapper {
452+
@apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pl-4;
459453

460-
.converter-select-item {
461-
@apply cursor-pointer hover:!bg-dark-500;
462-
}
454+
p {
455+
@apply text-base font-medium;
456+
}
457+
458+
.select-trigger {
459+
@apply w-fit border-none cursor-pointer h-12! bg-dark-400! hover:bg-dark-400! focus-visible:ring-0!;
460+
461+
.select-value {
462+
@apply font-semibold text-xs text-purple-100;
463+
}
464+
}
465+
466+
.select-content[data-converter] {
467+
@apply bg-dark-400 max-h-[500px];
463468

464-
.converter-currency {
465-
@apply font-semibold text-sm text-purple-100;
469+
.select-item {
470+
@apply cursor-pointer hover:bg-dark-500!;
471+
}
472+
}
473+
}
466474
}
467475

468476
/* CoinHeader Component Utilities */

‎components/coin-details/Converter.tsx‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16,61 +16,55 @@ export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
1616
const [currency, setCurrency] = useState('usd');
1717
const [amount, setAmount] = useState('10');
1818

19-
// Calculate converted price
2019
const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0);
2120

2221
return (
23-
<div className='w-full space-y-5'>
24-
<h4 className='converter-title'>{symbol.toUpperCase()} Converter</h4>
25-
<div className='converter-container'>
26-
<div className='converter-input-wrapper'>
22+
<div id='converter'>
23+
<h4>{symbol.toUpperCase()} Converter</h4>
24+
25+
<div className='panel'>
26+
<div className='input-wrapper'>
2727
<Input
2828
type='number'
2929
placeholder='Amount'
3030
value={amount}
3131
onChange={(e) => setAmount(e.target.value)}
32-
className='converter-input'
32+
className='input'
3333
/>
34-
<div className='converter-coin-info'>
34+
<div className='coin-info'>
3535
<Image src={icon} alt={symbol} width={20} height={20} />
36-
<p className='converter-coin-symbol'>{symbol.toUpperCase()}</p>
36+
<p>{symbol.toUpperCase()}</p>
3737
</div>
3838
</div>
3939

40-
<div>
41-
<div className='converter-divider-wrapper'>
42-
<div className='converter-divider-line' />
43-
<Image
44-
src='/assets/converter.svg'
45-
alt='converter'
46-
width={32}
47-
height={32}
48-
className='converter-icon'
49-
/>
50-
</div>
40+
<div className='divider'>
41+
<div className='line' />
42+
43+
<Image
44+
src='/assets/converter.svg'
45+
alt='converter'
46+
width={32}
47+
height={32}
48+
className='icon'
49+
/>
5150
</div>
5251

53-
<div className='converter-output-wrapper'>
54-
<p className='text-base font-medium'>
55-
{formatPrice(convertedPrice, 2, currency, false)}
56-
</p>
52+
<div className='output-wrapper'>
53+
<p>{formatPrice(convertedPrice, 2, currency, false)}</p>
54+
5755
<Select value={currency} onValueChange={setCurrency}>
58-
<SelectTrigger
59-
className='converter-select-trigger'
60-
value={currency}
61-
>
62-
<SelectValue placeholder='Select' className='flex gap-2'>
63-
<span className='converter-currency'>
64-
{currency.toUpperCase()}
65-
</span>
56+
<SelectTrigger className='select-trigger' value={currency}>
57+
<SelectValue placeholder='Select' className='select-value'>
58+
{currency.toUpperCase()}
6659
</SelectValue>
6760
</SelectTrigger>
68-
<SelectContent className='converter-select-content'>
61+
62+
<SelectContent className='select-content' data-converter>
6963
{Object.keys(priceList).map((currencyCode) => (
7064
<SelectItem
7165
key={currencyCode}
7266
value={currencyCode}
73-
className='converter-select-item'
67+
className='select-item'
7468
>
7569
{currencyCode.toUpperCase()}
7670
</SelectItem>

0 commit comments

Comments
 (0)