Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(all): clean up text, css and flow #30

Merged
merged 1 commit into from
Apr 19, 2019
Merged

refactor(all): clean up text, css and flow #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions src/components/agreement_fully/agreement-fully.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,7 @@
.AgreementFully-modal-buttons {
width: 100%; }
.AgreementFully-modal-buttons-raise-dispute {
display: block;
margin: 2em 0 0 0; }
.AgreementFully-modal-buttons-raise-dispute form {
width: 100%; }
.AgreementFully-modal-buttons-raise-dispute-button {
width: 100%; }
margin: auto; }
.AgreementFully-modal-buttons-pay-reimburse {
display: block;
margin: 2em 0 0 0;
Expand All @@ -74,3 +69,7 @@
padding: 0 0 1em 2em; }
.AgreementFully-message {
padding: 2em 1em 1em 1em; } }

.divider {
border-top: 1px solid #ededed;
margin: 20px 20px 0px 20px; }
20 changes: 9 additions & 11 deletions src/components/agreement_fully/agreement-fully.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@
}
&-description {
text-align: center;
color: #4a4a4a;
color: #4a4a4a;
font-size: 14px;
padding-bottom: 2em;
}
&-offer {
font-style: italic;
color: #4a4a4a;
color: #4a4a4a;
font-size: 12px;
padding: 3em 0 1em 2em;
}
Expand Down Expand Up @@ -77,14 +77,7 @@
&-buttons {
width: 100%;
&-raise-dispute {
display: block;
margin: 2em 0 0 0;
form {
width: 100%;
}
&-button {
width: 100%;
}
margin: auto
}
&-pay-reimburse {
display: block;
Expand All @@ -101,4 +94,9 @@
padding: 2em 1em 1em 1em;
}
}
}
}

.divider {
border-top: 1px solid #ededed;
margin: 20px 20px 0px 20px;
}
193 changes: 101 additions & 92 deletions src/components/agreement_fully/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ const AgreementFully = ({
accounts
}) => {
const [open, setModal] = useState(false)
const [percent, setPercent] = useState(50) // set Percent
const [amount, setAmount] = useState(0.5 * arbitrabletx.data.amount) // set Percent
const [percent, setPercent] = useState(0) // set Percent
const [amount, setAmount] = useState(0) // set Percent
const setPercentByAmount = amount => {
if (amount <= arbitrabletx.data.amount) {
setAmount(amount)
Expand Down Expand Up @@ -53,13 +53,13 @@ const AgreementFully = ({
}}
>
<h2 className="AgreementFully-modal-title">
Waive Part of the Payment or Raise a Dispute
Waive Part of the Payment
</h2>
<p className="AgreementFully-modal-description">
Propose a settlement by waiving a percentage of the payment to the
Propose a settlement by giving a percentage of the payment to the
other party.
<br />
If this is declined, the counter party can raise a dispute.
A dispute can still be raised over the remaining balance.
</p>
<Slider
min={0}
Expand All @@ -73,6 +73,28 @@ const AgreementFully = ({
<span style={{ color: '#009aff' }}>{percent.toFixed()}%</span>.
</p>
<div className="AgreementFully-modal-buttons">
<div className="AgreementFully-modal-buttons-pay-reimburse">
<PayOrReimburseArbitrableTx
arbitrable={arbitrabletx.data.arbitrableAddress}
payOrReimburse={payOrReimburse}
payOrReimburseFn={payOrReimburseFn}
amount={amount}
amountMax={arbitrabletx.data.amount}
id={arbitrabletx.data.id}
onChangeAmount={setPercentByAmount}
/>
</div>
</div>
<div className="divider" />
<div style={{textAlign: "center"}}>
<h2 className="AgreementFully-modal-title">
Raise a Dispute
</h2>
<p className="AgreementFully-modal-description">
By raising a dispute you are petitioning for the full remaining balance.
<br />
The dispute will be evaluated by the Kleros jurors.
</p>
<div className="AgreementFully-modal-buttons-raise-dispute">
<Formik
onSubmit={() =>
Expand Down Expand Up @@ -106,95 +128,87 @@ const AgreementFully = ({
</Form>
)}
</Formik>
</div>
<div className="AgreementFully-modal-buttons-pay-reimburse">
<PayOrReimburseArbitrableTx
arbitrable={arbitrabletx.data.arbitrableAddress}
payOrReimburse={payOrReimburse}
payOrReimburseFn={payOrReimburseFn}
amount={amount}
amountMax={arbitrabletx.data.amount}
id={arbitrabletx.data.id}
onChangeAmount={setPercentByAmount}
/>
<p className="AgreementFully-modal-dispute-description">
You will need to pay the arbitration fee of{' '}
{arbitrabletx.data.arbitrationCost}ETH. This fee is refunded if you win the dispute.
</p>
</div>
</div>
<p className="AgreementFully-modal-dispute-description">
Raise dispute: you will need to pay the arbitration fee of{' '}
{arbitrabletx.data.arbitrationCost}ETH.
</p>
</Modal>
<div className="AgreementFully-message">
<p>
{arbitrabletx.data.sender === accounts[0] ? (
<>
Did the other party{' '}
<b>
fully comply with the{' '}
{arbitrabletx.data.amount === arbitrabletx.data.originalAmount
? 'agreement'
: 'settlement'}
</b>
?
</>
) : (
<>
Do you want to <b>fully reimburse</b> the sender?
</>
)}
</p>
{ arbitrabletx.data.party !== 'none' ? (
<div className="AgreementFully-message">
<p>
{arbitrabletx.data.sender === accounts[0] ? (
<>
Did the other party{' '}
<b>
fully comply with the{' '}
{arbitrabletx.data.amount === arbitrabletx.data.originalAmount
? 'agreement'
: 'settlement'}
</b>
?
</>
) : (
<>
Do you want to <b>fully reimburse</b> the sender?
</>
)}
</p>

<Formik
onSubmit={() =>
payOrReimburseFn(
arbitrabletx.data.arbitrableAddress,
arbitrabletx.data.id,
arbitrabletx.data.amount
)
}
>
{({ isSubmitting }) => (
<Form className="PayOrReimburseArbitrableTx">
<Button
className="PayOrReimburseArbitrableTx-yes"
type="submit"
disabled={isSubmitting || arbitrabletx.data.party === 'none'}
>
{isSubmitting && (
<span
style={{
position: 'relative',
top: '4px',
lineHeight: '40px',
paddingRight: '4px'
}}
>
<ClipLoader size={20} color={'#fff'} />
</span>
)}{' '}
Yes
</Button>
</Form>
)}
</Formik>
<Button
className="PayOrReimburseArbitrableTx-no"
onClick={() => setModal(!open)}
disabled={arbitrabletx.data.party === 'none'}
>
No
</Button>
</div>
) : ''}

<Formik
onSubmit={() =>
payOrReimburseFn(
arbitrabletx.data.arbitrableAddress,
arbitrabletx.data.id,
arbitrabletx.data.amount
)
}
>
{({ isSubmitting }) => (
<Form className="PayOrReimburseArbitrableTx">
<Button
className="PayOrReimburseArbitrableTx-yes"
type="submit"
disabled={isSubmitting || arbitrabletx.data.party === 'none'}
>
{isSubmitting && (
<span
style={{
position: 'relative',
top: '4px',
lineHeight: '40px',
paddingRight: '4px'
}}
>
<ClipLoader size={20} color={'#fff'} />
</span>
)}{' '}
Yes
</Button>
</Form>
)}
</Formik>
<Button
className="PayOrReimburseArbitrableTx-no"
onClick={() => setModal(!open)}
disabled={arbitrabletx.data.party === 'none'}
>
No
</Button>
</div>
<div className="AgreementFully-footer">
{arbitrabletx.data.sender === accounts[0] && (
<>
1. If you say yes, you'll pay the final amount in full.
1. If you select Yes, you'll pay the remaining amount in full.
<br />
2. If you say no, you will be directed to a settlement screen where
you can waive part of the payment to the other party.
2. If you select No, you will be directed to a settlement screen where
you can waive part of the payment to the other party or raise a dispute.
<br />
<br />
Timeout to execute the arbitrable payment transaction{' '}
Timeout to release of the funds{' '}
<Countdown
date={
arbitrabletx.data.lastInteraction * 1000 +
Expand All @@ -206,10 +220,10 @@ const AgreementFully = ({
)}
{arbitrabletx.data.receiver === accounts[0] && (
<>
1. If you say yes, you'll reimburse the final amount in full.
1. If you select Yes, you'll reimburse the remaining amount in full.
<br />
2. If you say no, you will be directed to a settlement screen where
you can waive part of the payment to the other party.
2. If you select No, you will be directed to a settlement screen where
you can waive part of the payment to the other party or raise a dispute.
<br />
<br />
Timeout to execute the arbitrable payment{' '}
Expand All @@ -222,11 +236,6 @@ const AgreementFully = ({
.
</>
)}
{arbitrabletx.data.party === 'none' && (
<span style={{ color: 'red' }}>
You Ethereum address does not match with this transaction.
</span>
)}
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/attachment/attachment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@
padding: 24px 0 1em 0;
}
}
}
}
2 changes: 1 addition & 1 deletion src/components/email-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const EmailForm = ({ updateEmail, msg, settingsAcc }) => (
fontSize: '0.9em'
}}
>
Settings notifications saved.
Notification settings saved.
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/evidence-arbitrable-tx-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons'

/**
* Evidence Display List Component
* @param evidenceArbitrabletxs - list of arbitrable transaction evidences
* @param evidenceArbitrabletxs - list of arbitrable transaction evidence
* @returns {*}
*/
const EvidenceArbitrableTxList = ({ evidenceArbitrabletxs }) => (
Expand Down
Loading