Skip to content

Commit

Permalink
style: Add small styling changes to make theme change feel complete (#95
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@Juan-LukeKlopper
Juan-LukeKlopper authored May 24, 2024
1 parent 993435a commit d5d4da4
Show file tree
Hide file tree
Showing 12 changed files with 204 additions and 136 deletions.
32 changes: 31 additions & 1 deletion src/components/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,29 @@ a {
color: #ffea6e;
}

.important-link:hover{
color: #ffea6e !important;
opacity: 50%;
}

.btn-close:focus {
outline: 0;
box-shadow: 0 0 10px 3px #FFEA6E !important;
opacity: 1;
}

.disabled {
opacity: 50%;
}

.dark-validator {
color: #FFF;
}

.light-validator {
color: #000;
}

.select-wrapper {
border: 1px solid #000000;
border-color: #000000 !important;
Expand All @@ -52,7 +75,14 @@ a {
}


.markdown-container a {
color: #FFEA6E;
}

.markdown-container a:hover {
color: #FFEA6E !important;
opacity: 50%;
}


.bttn {
Expand Down Expand Up @@ -142,7 +172,7 @@ code p{
}

.nav-pillls .nav-link.active {
background-color: #FFEA6E;
background-color: #FFEA6E !important;
color: #000 !important;
}

Expand Down
1 change: 1 addition & 0 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -804,6 +804,7 @@ class App extends React.Component {
}
{this.props.active === 'voting' && (
<Voting
theme={this.props.theme}
network={this.props.network}
address={this.state.address}
wallet={this.state.wallet}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NetworkSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ function NetworkSelect(props) {
{!loading
? !error && <Button type="submit" className="bttn bttn-primary">Change network</Button>
: (
<Button className="bttn-primary btn-lg mr-5" disabled>
<Button className="bttn bttn-primary mr-5" disabled>
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;
Updating...
</Button>
Expand Down
34 changes: 18 additions & 16 deletions src/components/ProposalDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import AlertMessage from './AlertMessage';
import Vote from '../utils/Vote.mjs';

function ProposalDetails(props) {
const { proposal, tally, vote, network } = props
const { proposal, tally, vote, network, theme } = props
const [granter, setGranter] = useState()
const [granterVote, setGranterVote] = useState()
const [error, setError] = useState()
Expand Down Expand Up @@ -173,21 +173,23 @@ function ProposalDetails(props) {
<div className="row mt-3">
<div className="col">
<h5 className="mb-3">{title}</h5>
<ReactMarkdown
children={fixDescription}
remarkPlugins={[remarkGfm]}
disallowedElements={proposal.isSpam ? ['a'] : []}
unwrapDisallowed={true}
components={{
h1: 'h5',
h2: 'h6',
h3: 'h6',
h4: 'h6',
h5: 'h6',
h6: 'h6',
table: ({node, ...props}) => <table className="table" {...props} />
}}
/>
<div className='markdown-container'>
<ReactMarkdown
children={fixDescription}
remarkPlugins={[remarkGfm]}
disallowedElements={proposal.isSpam ? ['a'] : []}
unwrapDisallowed={true}
components={{
h1: 'h5',
h2: 'h6',
h3: 'h6',
h4: 'h6',
h5: 'h6',
h6: 'h6',
table: ({node, ...props}) => <table className="table" {...props} />
}}
/>
</div>
</div>
</div>
</Tab.Pane>
Expand Down
24 changes: 12 additions & 12 deletions src/components/Proposals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { PROPOSAL_STATUSES } from '../utils/Proposal.mjs';
import TooltipIcon from './TooltipIcon';

function Proposals(props) {
const { proposals, tallies, votes } = props
const { proposals, tallies, votes, theme } = props

const [filter, setFilter] = useState({keywords: '', status: '', group: 'voting'})
const [results, setResults] = useState([])
Expand Down Expand Up @@ -79,7 +79,7 @@ function Proposals(props) {
const vote = votes[proposalId]
return (
<tr key={proposalId} className={proposal.isSpam ? 'opacity-50' : ''}>
<td className="d-none d-md-table-cell">{proposalId}</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-md-table-cell`}>{proposalId}</td>
<td>
<div className="d-flex align-items-center">
<span role="button" onClick={() => props.showProposal(proposal)}>
Expand All @@ -92,20 +92,20 @@ function Proposals(props) {
)}
</div>
</td>
<td className="d-none d-sm-table-cell text-center text-nowrap">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-sm-table-cell text-center text-nowrap`}>
{proposal.statusHuman}
</td>
<td className="d-none d-sm-table-cell text-center text-nowrap">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-sm-table-cell text-center text-nowrap`}>
<Moment fromNow>
{proposal.isDeposit ? proposal.deposit_end_time : proposal.voting_end_time}
</Moment>
</td>
<td className="text-center">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} text-center`}>
{proposal.isVoting && (
vote ? vote.optionHuman : <XCircle className="opacity-50" />
)}
</td>
<td className="d-none d-md-table-cell text-center">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-md-table-cell text-center`}>
<ProposalProgress
proposal={proposal}
tally={tallies[proposalId]} />
Expand Down Expand Up @@ -174,12 +174,12 @@ function Proposals(props) {
<Table className="align-middle table-striped">
<thead>
<tr>
<th className="d-none d-md-table-cell">#</th>
<th>Proposal</th>
<th className="d-none d-sm-table-cell text-center">Status</th>
<th className="d-none d-sm-table-cell text-center">End Time</th>
<th className="text-center">Vote</th>
<th className="d-none d-md-table-cell text-center">Progress</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-md-table-cell`}>#</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>Proposal</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-sm-table-cell text-center`}>Status</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-sm-table-cell text-center`}>End Time</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} text-center`}>Vote</th>
<th className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} d-none d-md-table-cell text-center`}>Progress</th>
<th></th>
</tr>
</thead>
Expand Down
1 change: 1 addition & 0 deletions src/components/ValidatorModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ function ValidatorModal(props) {
</Tab.Pane>
<Tab.Pane eventKey="stake">
<ValidatorStake
theme={props.theme}
network={network}
validator={validator}
operator={operator}
Expand Down
82 changes: 41 additions & 41 deletions src/components/ValidatorProfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,39 +51,39 @@ function ValidatorProfile(props) {
<Table>
<tbody>
<tr>
<td scope="row">Validator Address</td>
<td className="text-break"><Address address={validator.operator_address} /></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Validator Address</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} text-break`}><Address address={validator.operator_address} /></td>
</tr>
{!validator.active && (
<tr>
<td scope="row">Status</td>
<td><ValidatorStatus validator={validator} /></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Status</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}><ValidatorStatus validator={validator} /></td>
</tr>
)}
{uptime() && (
<tr>
<td scope="row">Uptime</td>
<td>{uptime()}</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Uptime</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>{uptime()}</td>
</tr>
)}
<tr>
<td scope="row">REStake</td>
<td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">REStake</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>
{!!operator ? (
<Table className="m-0 table-sm">
<tbody className="small">
<tr>
<td>Frequency</td>
<td>{operator.runTimesString()}</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>Frequency</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>{operator.runTimesString()}</td>
</tr>
<tr>
<td className={network.authzSupport ? '' : 'border-bottom-0'}>Minimum rewards</td>
<td className={network.authzSupport ? '' : 'border-bottom-0'}><Coins coins={minimumReward()} asset={network.baseAsset} fullPrecision={true} hideValue={true} /></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} ${network.authzSupport ? '' : 'border-bottom-0'}`}>Minimum rewards</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} ${network.authzSupport ? '' : 'border-bottom-0'}`}><Coins coins={minimumReward()} asset={network.baseAsset} fullPrecision={true} hideValue={true} /></td>
</tr>
{network.authzSupport && (
<tr>
<td className="border-bottom-0">Last REStake</td>
<td className={'border-bottom-0'}>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} border-bottom-0`}>Last REStake</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} border-bottom-0`}>
<OperatorLastRestake operator={operator} lastExec={lastExec} />
</td>
</tr>
Expand All @@ -97,18 +97,18 @@ function ValidatorProfile(props) {
</tr>
{network.apyEnabled && (
<tr>
<td scope="row">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">
<TooltipIcon
icon={<span className="text-decoration-underline">APY</span>}
identifier="delegations-apy"
>
<div className="mt-2 text-center">
<div className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} mt-2 text-center`}>
<p>Based on commission, compounding frequency and estimated block times.</p>
<p>This is an estimate and best case scenario.</p>
</div>
</TooltipIcon>
</td>
<td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>
{props.validatorApy[validator.operator_address]
? <span>{round(props.validatorApy[validator.operator_address] * 100, 2).toLocaleString()}%</span>
: "-"
Expand All @@ -117,16 +117,16 @@ function ValidatorProfile(props) {
</tr>
)}
<tr>
<td scope="row">Commission</td>
<td><span>{validator.commission.commission_rates.rate * 100}%</span></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Commission</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}><span>{validator.commission.commission_rates.rate * 100}%</span></td>
</tr>
<tr>
<td scope="row">Rank</td>
<td><span>#{validator.rank}</span></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Rank</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}><span>#{validator.rank}</span></td>
</tr>
<tr>
<td scope="row">Voting power</td>
<td><span><Coins coins={{ amount: validator.tokens, denom: network.denom }} asset={network.baseAsset} /></span></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Voting power</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}><span><Coins coins={{ amount: validator.tokens, denom: network.denom }} asset={network.baseAsset} /></span></td>
</tr>
</tbody>
</Table>
Expand All @@ -136,45 +136,45 @@ function ValidatorProfile(props) {
<tbody>
{!!validator.description?.security_contact && (
<tr>
<td scope="row">Contact</td>
<td><a class='important-link' href={`mailto:${validator.description.security_contact}`}>{validator.description.security_contact}</a></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Contact</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}><a class='important-link' href={`mailto:${validator.description.security_contact}`}>{validator.description.security_contact}</a></td>
</tr>
)}
{!!validator.description?.website && (
<tr>
<td scope="row">Website</td>
<td className="text-break"><ValidatorLink className="text-decoration-underline" validator={validator}>{validator.description.website}</ValidatorLink></td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`} scope="row">Website</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} text-break`}><ValidatorLink className="text-decoration-underline" validator={validator}>{validator.description.website}</ValidatorLink></td>
</tr>
)}
<tr>
<td className="align-middle" scope="row">Profiles</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} align-middle`} scope="row">Profiles</td>
<td>
<ValidatorServices validator={validator} network={network} theme={props.theme} exclude={['nodes', 'skip']} />
</td>
</tr>
{validator?.path && (
<tr>
<td className="align-middle" scope="row">Networks</td>
<td className="w-75">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} align-middle`} scope="row">Networks</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} w-75`}>
<ValidatorNetworks validator={validator} registryData={registryData} network={network} networks={networks} />
</td>
</tr>
)}
</tbody>
</Table>
<p className="mb-4">
<p className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} mb-4`}>
{validator.description?.details}
</p>
{!!network.chain.services?.skip && !!validator.services?.skip && (
<>
<p className="mb-2 d-flex align-items-center gap-1">
<p className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} mb-2 d-flex align-items-center gap-1`}>
<a href="https://skip.money" target="_blank"><img src={props.theme === 'dark' ? SkipWhiteIcon : SkipIcon} height={14} className="d-block" /></a><strong>Skip MEV</strong>
</p>
<Table className="table-sm">
<tbody>
<tr>
<td>Status</td>
<td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>Status</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>
{validator.services.skip.active ? (
<>
<span className="text-success">Active</span>
Expand All @@ -184,15 +184,15 @@ function ValidatorProfile(props) {
</td>
</tr>
<tr>
<td>Network profit</td>
<td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>Network profit</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>
{100 - validator.services.skip.val_payment_percentage}%<br />
<Coins coins={{ amount: validator.services.skip.network_profit, denom: network.denom }} asset={network.baseAsset} hideValue={true} />
</td>
</tr>
<tr>
<td className="border-bottom-0">Validator profit</td>
<td className={'border-bottom-0'}>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} border-bottom-0`}>Validator profit</td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} border-bottom-0`}>
{validator.services.skip.val_payment_percentage}%<br />
<Coins coins={{ amount: validator.services.skip.val_profit, denom: network.denom }} asset={network.baseAsset} hideValue={true} />
</td>
Expand All @@ -203,16 +203,16 @@ function ValidatorProfile(props) {
)}
{Object.entries(validator.public_nodes || {}).length > 0 && (
<>
<p className="mb-2 d-flex align-items-center gap-1"><HeartPulse /><strong>Public Nodes</strong></p>
<p className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} mb-2 d-flex align-items-center gap-1`}><HeartPulse /><strong>Public Nodes</strong></p>
<Table className="table-sm">
<tbody>
{Object.entries(validator.public_nodes).map(([type, nodes]) => {
return (
<tr key={type}>
<td>
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'}`}>
{type.toUpperCase()}
</td>
<td className="list-group list-group-flush flex-fill">
<td className={`${props.theme === 'dark' ? 'text-white' : 'text-black'} list-group list-group-flush flex-fill`}>
{nodes.map(api => {
return <a href={api.address} target="_blank" className="text-reset text-decoration-underline">{api.address}</a>
}).reduce((prev, curr) => [prev, <br />, curr])}
Expand Down
Loading

1 comment on commit d5d4da4

@vercel
Copy link

@vercel vercel bot commented on d5d4da4 May 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

whisperstake-ui – ./

whisperstake-ui-git-master-whispernode.vercel.app
whisperstake-ui.vercel.app
whisperstake-ui-whispernode.vercel.app
stake.whispernode.com
restake.whispernode.com

Please sign in to comment.