Skip to content

Commit

Permalink
restyle validator boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
lucas-tortora authored and Dr-Electron committed Oct 13, 2023
1 parent e72ba3e commit aed4be8
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 101 deletions.
179 changes: 89 additions & 90 deletions src/components/ManaCalculator/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,50 +39,52 @@ function ValidatorCard({
id: number;
}) {
return (
<div className='mana_card card col col--3'>
<div className='row'>
<div className='card__title col'>Validator {id + 1}</div>
<button
className='button button--danger col--12'
onClick={() => handleDelete(id)}
>
X
</button>
</div>
<div className='row'>
<label className='col col--8'>Stake:</label>
<input
className='col col--4 rounded_inputs'
type='number'
value={validator.lockedStake}
onChange={(e) => handleStakeChange(Number(e.target.value), id)}
></input>
</div>
<div className='row'>
<label className='col col--8'>Delegated:</label>
<input
className='col col--4 rounded_inputs'
value={validator.delegatedStake}
onChange={(e) =>
handleDelegatedStakeChange(Number(e.target.value), id)
}
></input>
</div>
<div className='row'>
<label className='col col--8'>PF:</label>
<input
className='col col--4 rounded_inputs'
value={validator.performanceFactor}
onChange={(e) => handlePFChange(Number(e.target.value), id)}
></input>
</div>
<div className='row'>
<label className='col col--8'>FC:</label>
<input
className='col col--4 rounded_inputs'
value={validator.fixedCost}
onChange={(e) => handleFCChange(Number(e.target.value), id)}
></input>
<div className='col col--4'>
<div className='table'>
<div className='row'>
<div className='col col--9'>Validator {id + 1}</div>

<button
className=' col col--3 button button--danger align-right'
onClick={() => handleDelete(id)}
>
X
</button>
</div>
<div className='row'>
<div className='col col--8'>Stake:</div>
<input
className='col col--4 align-right'
value={validator.lockedStake}
onChange={(e) => handleStakeChange(Number(e.target.value), id)}
></input>
</div>
<div className='row'>
<div className='col col--8'>Delegated:</div>
<input
className='col col--4 align-right'
value={validator.delegatedStake}
onChange={(e) =>
handleDelegatedStakeChange(Number(e.target.value), id)
}
></input>
</div>
<div className='row'>
<div className='col col--8'>PF:</div>
<input
className='col col--4 align-right'
value={validator.performanceFactor}
onChange={(e) => handlePFChange(Number(e.target.value), id)}
></input>
</div>
<div className='row'>
<div className='col col--8'>FC:</div>
<input
className='col col--4 align-right'
value={validator.fixedCost}
onChange={(e) => handleFCChange(Number(e.target.value), id)}
></input>
</div>
</div>
</div>
);
Expand Down Expand Up @@ -393,27 +395,24 @@ export default function ManaCalculator() {
onChange={(e) => handleEpochChange(Number(e.target.value))}
></input>
</div>
</div>
<div className='row'>
<Details summary='Advanced Settings - Validators'>
<div className='row'>
{state.validators.map((validator, i) => (
<div className='col col--4' key={i}>
<ValidatorCard
validator={validator}
handleDelete={handleDelete}
handleStakeChange={handleStakeChange}
handleDelegatedStakeChange={handleDelegatedStakeChange}
handleFCChange={handleFCChange}
handlePFChange={handlePFChange}
id={i}
/>
</div>
<ValidatorCard
validator={validator}
handleDelete={handleDelete}
handleStakeChange={handleStakeChange}
handleDelegatedStakeChange={handleDelegatedStakeChange}
handleFCChange={handleFCChange}
handlePFChange={handlePFChange}
id={i}
key={i}
/>
))}
</div>
<div className='row'>
<button
className='button button--danger col--4'
className='button button--danger col--4 add-button'
onClick={() => {
state.validators.push({
lockedStake: 100,
Expand Down Expand Up @@ -497,40 +496,40 @@ export default function ManaCalculator() {
onChange={(e) => handleFinalEpochChange(Number(e.target.value))}
></input>
</div>
<Details summary='Advanced Settings - Validators'>
<div className='row'>
{state.validators.map((validator, i) => (
<ValidatorCard
validator={validator}
handleDelete={handleDelete}
handleStakeChange={handleStakeChange}
handleDelegatedStakeChange={handleDelegatedStakeChange}
handleFCChange={handleFCChange}
handlePFChange={handlePFChange}
id={i}
key={i}
/>
))}
</div>
<div className='row'>
<button
className='button button--danger col--4 add-button'
onClick={() => {
state.validators.push({
lockedStake: 100,
delegatedStake: 0,
performanceFactor: 1.0,
fixedCost: 0.0,
});
setState({ ...state });
}}
>
+
</button>
</div>
</Details>
</div>
<Details summary='Advanced Settings - Validators'>
<div className='row'>
{state.validators.map((validator, i) => (
<ValidatorCard
validator={validator}
handleDelete={handleDelete}
handleStakeChange={handleStakeChange}
handleDelegatedStakeChange={handleDelegatedStakeChange}
handleFCChange={handleFCChange}
handlePFChange={handlePFChange}
id={i}
key={i}
/>
))}
</div>

<div className='row'>
<button
className='button button--danger col--4'
onClick={() => {
state.validators.push({
lockedStake: 100,
delegatedStake: 0,
performanceFactor: 1.0,
fixedCost: 0.0,
});
setState({ ...state });
}}
>
+
</button>
</div>
</Details>
<div className='row'>
<div className='col col--2'>You are a:</div>
</div>
Expand Down
20 changes: 9 additions & 11 deletions src/components/ManaCalculator/styles.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
.mana_card {
padding: 1em;
margin: 0 0.3em 0.3em 0;
text-align: left;
align-items: stretch;
.mana--card {
box-sizing: border-box;
}
.mana_card > .row {
padding: 0.3em;
}

.row > .button {
margin: 0 var(--ifm-spacing-horizontal);
margin: 0;
}

.table .row {
Expand All @@ -18,10 +11,15 @@
}

.table .row .col {
padding: 6px;
box-sizing: border-box;
}

.table .row .add-button {
margin: 0 calc(50% - var(--ifm-navbar-padding-horizontal));
}

.table .row .col--4:nth-child(1),
.table .row .col--8:nth-child(1),
.table .row .col--4:nth-child(2),
.table .row .col--6:nth-child(1) {
border-right: var(--ifm-table-border-width) solid
Expand Down

0 comments on commit aed4be8

Please sign in to comment.