mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-22 04:27:56 +00:00
fix: Improve text readability on light backgrounds
Fixed white/light text on white/light backgrounds across multiple pages by adding text-gray-900 classes to ensure proper contrast and readability. This addresses the issue where text was unreadable until hover/click on delegation, proposal, swap, and other pages. Changes: - DelegationManager: Added dark text to green-50 TabsList - DelegateProfile: Fixed text color in blue-50 and green-50 Alert components - ProposalWizard: Added dark text to green-50 success Alert - Dashboard: Fixed text color in yellow-50 verification warning - TokenSwap: Added dark text to all gray-50 and blue-50 containers (6 instances) - DiscussionThread: Fixed markdown help card with gray-50 background - FundingProposal: Added dark text to yellow-50 milestone warning 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -150,10 +150,10 @@ const TokenSwap = () => {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-gray-900">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm text-gray-600">From</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
<span className="text-sm text-gray-900">From</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
Balance: {isLoadingBalances ? '...' : fromBalance} {fromToken}
|
||||
</span>
|
||||
</div>
|
||||
@@ -182,10 +182,10 @@ const TokenSwap = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-gray-900">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm text-gray-600">To</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
<span className="text-sm text-gray-900">To</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
Balance: {isLoadingBalances ? '...' : toBalance} {toToken}
|
||||
</span>
|
||||
</div>
|
||||
@@ -203,14 +203,14 @@ const TokenSwap = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 rounded-lg p-3">
|
||||
<div className="bg-blue-50 rounded-lg p-3 text-gray-900">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Exchange Rate</span>
|
||||
<span className="font-semibold">1 {fromToken} = {exchangeRate} {toToken}</span>
|
||||
<span className="text-gray-900">Exchange Rate</span>
|
||||
<span className="font-semibold text-gray-900">1 {fromToken} = {exchangeRate} {toToken}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-1">
|
||||
<span>Slippage Tolerance</span>
|
||||
<span className="font-semibold">{slippage}%</span>
|
||||
<span className="text-gray-900">Slippage Tolerance</span>
|
||||
<span className="font-semibold text-gray-900">{slippage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -231,14 +231,14 @@ const TokenSwap = () => {
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{liquidityData.map((pool, idx) => (
|
||||
<div key={idx} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
|
||||
<div key={idx} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg text-gray-900">
|
||||
<div>
|
||||
<div className="font-semibold">{pool.pool}</div>
|
||||
<div className="text-sm text-gray-600">TVL: ${pool.tvl}</div>
|
||||
<div className="font-semibold text-gray-900">{pool.pool}</div>
|
||||
<div className="text-sm text-gray-900">TVL: ${pool.tvl}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-green-600 font-semibold">{pool.apr} APR</div>
|
||||
<div className="text-sm text-gray-600">Vol: ${pool.volume}</div>
|
||||
<div className="text-sm text-gray-900">Vol: ${pool.volume}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -254,12 +254,12 @@ const TokenSwap = () => {
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{txHistory.map((tx, idx) => (
|
||||
<div key={idx} className="p-3 bg-gray-50 rounded-lg">
|
||||
<div key={idx} className="p-3 bg-gray-50 rounded-lg text-gray-900">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold">{tx.amount} {tx.from}</span>
|
||||
<span className="font-semibold text-gray-900">{tx.amount} {tx.from}</span>
|
||||
<ArrowDownUp className="h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<div className="flex justify-between text-sm text-gray-900">
|
||||
<span>Rate: {tx.rate}</span>
|
||||
<span>{tx.time}</span>
|
||||
</div>
|
||||
@@ -306,14 +306,14 @@ const TokenSwap = () => {
|
||||
<DialogTitle>Confirm Swap</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<div className="p-4 bg-gray-50 rounded-lg text-gray-900">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span>You Pay</span>
|
||||
<span className="font-bold">{fromAmount} {fromToken}</span>
|
||||
<span className="text-gray-900">You Pay</span>
|
||||
<span className="font-bold text-gray-900">{fromAmount} {fromToken}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>You Receive</span>
|
||||
<span className="font-bold">{toAmount} {toToken}</span>
|
||||
<span className="text-gray-900">You Receive</span>
|
||||
<span className="font-bold text-gray-900">{toAmount} {toToken}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
|
||||
@@ -50,9 +50,9 @@ const DelegateProfile: React.FC = () => {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<Alert className="border-blue-200 bg-blue-50">
|
||||
<Info className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
<Alert className="border-blue-200 bg-blue-50 text-gray-900">
|
||||
<Info className="w-4 h-4 text-gray-900" />
|
||||
<AlertDescription className="text-gray-900">
|
||||
{t('delegation.delegateRequirements')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
@@ -215,9 +215,9 @@ const DelegateProfile: React.FC = () => {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Alert className="border-green-200 bg-green-50 mb-6">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
<Alert className="border-green-200 bg-green-50 mb-6 text-gray-900">
|
||||
<CheckCircle className="w-4 h-4 text-gray-900" />
|
||||
<AlertDescription className="text-gray-900">
|
||||
{t('delegation.delegateActive')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
@@ -156,7 +156,7 @@ const DelegationManager: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="explore" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3 bg-green-50">
|
||||
<TabsList className="grid w-full grid-cols-3 bg-green-50 text-gray-900">
|
||||
<TabsTrigger value="explore">{t('delegation.explore')}</TabsTrigger>
|
||||
<TabsTrigger value="my-delegations">{t('delegation.myDelegations')}</TabsTrigger>
|
||||
<TabsTrigger value="delegate-profile">{t('delegation.becomeDelegate')}</TabsTrigger>
|
||||
|
||||
@@ -364,9 +364,9 @@ export function DiscussionThread({ proposalId }: { proposalId: string }) {
|
||||
<Button>Post Comment</Button>
|
||||
</div>
|
||||
{showMarkdownHelp && (
|
||||
<Card className="mt-4 p-4 bg-gray-50">
|
||||
<p className="text-sm font-semibold mb-2">Markdown Formatting:</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<Card className="mt-4 p-4 bg-gray-50 text-gray-900">
|
||||
<p className="text-sm font-semibold mb-2 text-gray-900">Markdown Formatting:</p>
|
||||
<ul className="text-sm space-y-1 text-gray-900">
|
||||
<li>**bold** → <strong>bold</strong></li>
|
||||
<li>*italic* → <em>italic</em></li>
|
||||
<li>[link](url) → <a href="#" className="text-blue-600">link</a></li>
|
||||
|
||||
@@ -286,9 +286,9 @@ const ProposalWizard: React.FC<ProposalWizardProps> = ({ onComplete, onCancel })
|
||||
{/* Step 5: Review */}
|
||||
{currentStep === 5 && (
|
||||
<div className="space-y-4">
|
||||
<Alert className="border-green-200 bg-green-50">
|
||||
<Check className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
<Alert className="border-green-200 bg-green-50 text-gray-900">
|
||||
<Check className="w-4 h-4 text-gray-900" />
|
||||
<AlertDescription className="text-gray-900">
|
||||
{t('proposals.wizard.readyToSubmit')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
@@ -276,9 +276,9 @@ export const FundingProposal: React.FC = () => {
|
||||
</Button>
|
||||
|
||||
{totalMilestoneAmount !== totalBudget && totalMilestoneAmount > 0 && (
|
||||
<div className="flex items-center gap-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<div className="flex items-center gap-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-gray-900">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600" />
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-900">
|
||||
Milestone total (${totalMilestoneAmount.toLocaleString()}) doesn't match budget total (${totalBudget.toLocaleString()})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -198,12 +198,12 @@ export default function Dashboard() {
|
||||
</div>
|
||||
|
||||
{!profile?.email_verified && (
|
||||
<div className="border-l-4 border-yellow-500 bg-yellow-50 p-4">
|
||||
<div className="border-l-4 border-yellow-500 bg-yellow-50 p-4 text-gray-900">
|
||||
<div className="flex items-center">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 mr-2" />
|
||||
<div>
|
||||
<h4 className="font-medium">Verify your email</h4>
|
||||
<p className="text-sm">Please verify your email to access all features</p>
|
||||
<h4 className="font-medium text-gray-900">Verify your email</h4>
|
||||
<p className="text-sm text-gray-900">Please verify your email to access all features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user