Skip to content

Commit ff90583

Browse files
DengreSarthakDengreSarthak
authored
Merge pull request #8 from StabilityNexus/InitialFrontend
Styling changes and minor UI
2 parents 118cc67 + cd7fa33 commit ff90583

6 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎app/[oracleId]/InteractionClient.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export default function OracleInteractionPage() {
200200
</Link>
201201

202202
<div className="flex items-center gap-4">
203-
<h1 className="text-4xl sm:text-5xl font-bold tracking-wide bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent" style={{ fontStyle: 'oblique 15deg' }}>
203+
<h1 className="text-4xl sm:text-5xl font-medium tracking-wide bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent" style={{ fontStyle: 'oblique 15deg' }}>
204204
{oracle.name ?? "Oracle Dashboard"}
205205
</h1>
206206
{oracle.status === "active" && (
@@ -234,7 +234,7 @@ export default function OracleInteractionPage() {
234234
<div className="max-w-7xl mx-auto space-y-12">
235235

236236
{/* Price Chart Section */}
237-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
237+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
238238
<CardHeader className="border-b border-border/30">
239239
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
240240
<TrendingUp className="h-5 w-5 text-primary" />
@@ -248,7 +248,7 @@ export default function OracleInteractionPage() {
248248

249249
{/* Submit Value Section */}
250250
<div className="grid md:grid-cols-2 gap-6">
251-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
251+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
252252
<CardHeader className="border-b border-border/30">
253253
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
254254
<Send className="h-5 w-5 text-primary" />
@@ -258,9 +258,9 @@ export default function OracleInteractionPage() {
258258
Submit a new price value to the oracle. You must have deposited tokens to participate.
259259
</CardDescription>
260260
</CardHeader>
261-
<CardContent className="p-6 space-y-4">
262-
<div className="space-y-2">
263-
<Label htmlFor="submitValue" className="text-foreground font-medium">Price Value</Label>
261+
<CardContent>
262+
<div className="mb-4">
263+
<Label htmlFor="submitValue" className="text-foreground font-medium mb-2">Price Value</Label>
264264
<Input
265265
id="submitValue"
266266
type="number"
@@ -281,7 +281,7 @@ export default function OracleInteractionPage() {
281281
</CardContent>
282282
</Card>
283283

284-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
284+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
285285
<CardHeader className="border-b border-border/30">
286286
<div className="flex items-center justify-between">
287287
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
@@ -297,9 +297,9 @@ export default function OracleInteractionPage() {
297297
Latest submitted and aggregated oracle values.
298298
</CardDescription>
299299
</CardHeader>
300-
<CardContent className="p-6 space-y-4">
301-
<div className="space-y-3">
302-
<div className="flex items-center justify-between p-3 bg-card/50 border border-primary/30 rounded-xl transition-all duration-300">
300+
<CardContent>
301+
<div>
302+
<div className="flex items-center mb-4 justify-between p-3 bg-card/50 border border-primary/30 rounded-xl transition-all duration-300">
303303
<div className="flex items-center gap-3">
304304
<div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
305305
<span className="text-muted-foreground font-medium text-sm">Latest Value</span>
@@ -335,7 +335,7 @@ export default function OracleInteractionPage() {
335335

336336
{/* Token Management Section */}
337337
<div className="grid md:grid-cols-2 gap-6">
338-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
338+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
339339
<CardHeader className="border-b border-border/30">
340340
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
341341
<Wallet className="h-5 w-5 text-primary" />
@@ -345,7 +345,7 @@ export default function OracleInteractionPage() {
345345
Deposit weight tokens to participate in oracle governance and earn rewards.
346346
</CardDescription>
347347
</CardHeader>
348-
<CardContent className="p-6 space-y-4">
348+
<CardContent>
349349
<div className="space-y-2">
350350
<Label htmlFor="depositAmount" className="text-foreground font-medium">Amount</Label>
351351
<Input
@@ -354,7 +354,7 @@ export default function OracleInteractionPage() {
354354
placeholder="Enter amount to deposit"
355355
value={depositAmount}
356356
onChange={(e) => setDepositAmount(e.target.value)}
357-
className="h-12 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
357+
className="h-12 mb-4 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
358358
/>
359359
</div>
360360
<Button
@@ -368,7 +368,7 @@ export default function OracleInteractionPage() {
368368
</CardContent>
369369
</Card>
370370

371-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
371+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
372372
<CardHeader className="border-b border-border/30">
373373
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
374374
<Wallet className="h-5 w-5 text-destructive" />
@@ -378,7 +378,7 @@ export default function OracleInteractionPage() {
378378
Withdraw your deposited tokens. Note the withdrawal locking period.
379379
</CardDescription>
380380
</CardHeader>
381-
<CardContent className="p-6 space-y-4">
381+
<CardContent>
382382
<div className="space-y-2">
383383
<Label htmlFor="withdrawAmount" className="text-foreground font-medium">Amount</Label>
384384
<Input
@@ -387,7 +387,7 @@ export default function OracleInteractionPage() {
387387
placeholder="Enter amount to withdraw"
388388
value={withdrawAmount}
389389
onChange={(e) => setWithdrawAmount(e.target.value)}
390-
className="h-12 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
390+
className="h-12 mb-4 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
391391
/>
392392
</div>
393393
<Button
@@ -403,7 +403,7 @@ export default function OracleInteractionPage() {
403403
</div>
404404

405405
{/* Governance Section */}
406-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
406+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
407407
<CardHeader className="border-b border-border/30">
408408
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
409409
<Vote className="h-5 w-5 text-primary" />
@@ -413,15 +413,15 @@ export default function OracleInteractionPage() {
413413
Vote to blacklist or whitelist addresses. Your voting power is based on your deposited tokens.
414414
</CardDescription>
415415
</CardHeader>
416-
<CardContent className="p-6 space-y-4">
416+
<CardContent>
417417
<div className="space-y-2">
418418
<Label htmlFor="voteTarget" className="text-foreground font-medium">Target Address</Label>
419419
<Input
420420
id="voteTarget"
421421
placeholder="0x..."
422422
value={voteTarget}
423423
onChange={(e) => setVoteTarget(e.target.value)}
424-
className="h-12 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
424+
className="h-12 mb-4 bg-card/50 border border-primary/30 rounded-xl font-light transition-all duration-300 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-card/70"
425425
/>
426426
</div>
427427
<div className="grid grid-cols-2 gap-4">
@@ -446,7 +446,7 @@ export default function OracleInteractionPage() {
446446
</Card>
447447

448448
{/* Oracle Configuration */}
449-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
449+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
450450
<CardHeader className="border-b border-border/30">
451451
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
452452
<Settings className="h-5 w-5 text-primary" />
@@ -491,7 +491,7 @@ export default function OracleInteractionPage() {
491491
</Card>
492492

493493
{/* Price History */}
494-
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 hover:border-primary/20 transition-all duration-300 rounded-2xl">
494+
<Card className="border-border/50 bg-card/30 backdrop-blur-sm hover:bg-card/60 border-primary/20 hover:border-white transition-all duration-300 rounded-2xl">
495495
<CardHeader className="border-b border-border/30">
496496
<CardTitle className="text-foreground flex items-center gap-2 font-medium">
497497
<History className="h-5 w-5 text-primary" />

‎app/create/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export default function CreatePage() {
55
return (
66
<div className="min-h-screen bg-background font-[oblique] tracking-wide" style={{ fontStyle: 'oblique 12deg' }}>
77
<Navigation />
8-
<div className="container mx-auto px-4 py-8 mt-12">
8+
<div className="container mx-auto px-4 py-8 mt-18">
99
<div className="mb-8 text-center">
10-
<h1 className="text-4xl text-slate-200 mb-2 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Create Oracle</h1>
11-
<p className="text-slate-200 text-xl max-w-3xl mx-auto">
10+
<h1 className="text-4xl bg-gradient-to-r from-white to-primary bg-clip-text text-transparent mb-2 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Create Oracle</h1>
11+
<p className="text-slate-400 text-xl max-w-3xl mx-auto">
1212
Deploy the on‑chain Oracle contract by providing the exact constructor parameters.
1313
</p>
1414
</div>

‎app/explorer/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function ExplorerPage() {
3535
<div className="container mx-auto px-6 pt-24 pb-12">
3636
{/* Header */}
3737
<div className="mb-12 text-center">
38-
<h1 className="text-5xl font-bold tracking-wide mb-6 bg-gradient-to-r from-white to-primary bg-clip-text text-transparent" style={{ fontStyle: 'oblique 15deg' }}>
38+
<h1 className="text-5xl font-medium tracking-wide mb-6 bg-gradient-to-r from-white to-primary bg-clip-text text-transparent" style={{ fontStyle: 'oblique 15deg' }}>
3939
Orb Oracle Explorer
4040
</h1>
4141
</div>

‎app/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function HomePage() {
6363
<section className="h-screen flex items-center justify-center">
6464
<div className="container mx-auto px-4">
6565
<div className="text-center mb-16">
66-
<h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Why choose OracleNet?</h2>
66+
<h2 className="text-3xl md:text-4xl font-medium mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Why choose OracleNet?</h2>
6767
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
6868
Enterprise-grade infrastructure for the next generation of decentralized applications
6969
</p>
@@ -114,19 +114,19 @@ export default function HomePage() {
114114
<div className="container mx-auto px-4">
115115
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
116116
<div>
117-
<div className="text-4xl font-bold text-primary mb-2">1,247</div>
117+
<div className="text-4xl font-medium text-primary mb-2">1,247</div>
118118
<div className="text-muted-foreground">Active Oracles</div>
119119
</div>
120120
<div>
121-
<div className="text-4xl font-bold text-primary mb-2">$2.4B</div>
121+
<div className="text-4xl font-medium text-primary mb-2">$2.4B</div>
122122
<div className="text-muted-foreground">Total Value Secured</div>
123123
</div>
124124
<div>
125-
<div className="text-4xl font-bold text-primary mb-2">99.9%</div>
125+
<div className="text-4xl font-medium text-primary mb-2">99.9%</div>
126126
<div className="text-muted-foreground">Uptime</div>
127127
</div>
128128
<div>
129-
<div className="text-4xl font-bold text-primary mb-2">50+</div>
129+
<div className="text-4xl font-medium text-primary mb-2">50+</div>
130130
<div className="text-muted-foreground">Supported Chains</div>
131131
</div>
132132
</div>
@@ -137,7 +137,7 @@ export default function HomePage() {
137137
<section className="h-screen flex items-center justify-center">
138138
<div className="container mx-auto px-4 text-center">
139139
<div className="max-w-2xl mx-auto">
140-
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Ready to build the future?</h2>
140+
<h2 className="text-3xl md:text-4xl font-medium mb-6 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Ready to build the future?</h2>
141141
<p className="text-xl text-muted-foreground mb-8">
142142
Join thousands of developers building the next generation of decentralized applications
143143
</p>

‎components/createOracle.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export default function CreateOracleIntegrated() {
228228
<Card className="bg-background/95 backdrop-blur-sm border-primary/30 shadow-xl max-w-2xl mx-auto">
229229
<CardContent className="text-center space-y-6 py-8">
230230
<div className="space-y-3">
231-
<h2 className="text-3xl font-bold text-slate-100" style={{ fontStyle: 'oblique 15deg' }}>
231+
<h2 className="text-3xl font-medium text-slate-100" style={{ fontStyle: 'oblique 15deg' }}>
232232
Oracle Created Successfully!
233233
</h2>
234234
<p className="text-base text-slate-200">
@@ -237,7 +237,7 @@ export default function CreateOracleIntegrated() {
237237
{oracleAddress && (
238238
<div className="bg-slate-800/50 border border-blue-100 rounded-lg p-3 font-mono text-sm">
239239
<div className="flex items-center justify-between">
240-
<span className="text-blue-300 font-bold">{formatAddress(oracleAddress)}</span>
240+
<span className="text-blue-300 font-medium">{formatAddress(oracleAddress)}</span>
241241
<button
242242
onClick={() => onCopy(oracleAddress)}
243243
className="text-xs bg-blue-600/20 hover:bg-blue-600/30 px-2 py-1 rounded transition-colors"
@@ -280,7 +280,7 @@ export default function CreateOracleIntegrated() {
280280
return (
281281
<div className="font-[oblique] tracking-wide text-slate-100" style={{ fontStyle: "oblique 15deg" }}>
282282
<form onSubmit={(e) => { e.preventDefault(); createOracle(); }} className="space-y-8">
283-
<Card className="border-2 border-blue-200 bg-card shadow-sm">
283+
<Card className="border-2 border-blue-200 bg-card shadow-sm max-w-4xl mx-auto">
284284
<CardHeader className="border-b border-blue-100">
285285
<CardTitle className="text-slate-100 text-xl">
286286
Oracle Metadata
@@ -348,7 +348,7 @@ export default function CreateOracleIntegrated() {
348348
</CardContent>
349349
</Card>
350350

351-
<Card className="border-2 border-blue-200 bg-card shadow-sm">
351+
<Card className="border-2 border-blue-200 bg-card shadow-sm max-w-4xl mx-auto">
352352
<CardHeader className="border-b border-blue-100">
353353
<CardTitle className="text-xl text-slate-100">
354354
Oracle Parameters
@@ -610,11 +610,11 @@ export default function CreateOracleIntegrated() {
610610
</CardContent>
611611
</Card>
612612

613-
<div className="flex justify-end border border-blue-100 p-4 rounded-md bg-slate-800/30">
613+
<div className="justify-center flex mx-auto">
614614
<Button
615615
type="submit"
616616
size="lg"
617-
className="bg-blue-600 hover:bg-blue-700 border-blue-700 text-white"
617+
className="bg-black border border-white hover:bg-primary max-w-4xl mx-auto border-slate-400 text-white"
618618
disabled={loadingCreation || !account.address}
619619
>
620620
{loadingCreation ? (

‎components/ui/card.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
77
<div
88
data-slot="card"
99
className={cn(
10-
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
10+
'bg-card text-card-foreground flex flex-col gap-3 rounded-xl border py-4 shadow-sm',
1111
className,
1212
)}
1313
{...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
2020
<div
2121
data-slot="card-header"
2222
className={cn(
23-
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
23+
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3',
2424
className,
2525
)}
2626
{...props}
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
6565
return (
6666
<div
6767
data-slot="card-content"
68-
className={cn('px-6', className)}
68+
className={cn('px-6 -mt-1', className)}
6969
{...props}
7070
/>
7171
)
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
7575
return (
7676
<div
7777
data-slot="card-footer"
78-
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
78+
className={cn('flex items-center px-6 [.border-t]:pt-3', className)}
7979
{...props}
8080
/>
8181
)

0 commit comments

Comments
 (0)