Skip to content

Commit acda7bc

Browse files
jaybuidljaybuidl
authored
Merge pull request #7 from kleros/refactor(web)/close-x-button-instead-of-back-button-on-popups
refactor(web): close-x-button-instead-of-back-button-on-popups
2 parents f13393c + 29c4cbf commit acda7bc

File tree

21 files changed

+298
-285
lines changed

21 files changed

+298
-285
lines changed

‎src/app.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useRef } from 'react'
22
import styled from 'styled-components'
33
import 'overlayscrollbars/styles/overlayscrollbars.css'
4+
import 'react-loading-skeleton/dist/skeleton.css'
45
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
56
import { OverlayScrollContext } from 'context/OverlayScrollContext'
67
import Home from 'pages/Home'

‎src/assets/svgs/icons/close.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/favicon.ico‎

7.38 KB
Binary file not shown.

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
content="dispute resolution, decentralized arbitration, Kleros, blockchain court"
2121
/>
2222
<link rel="shortcut icon" type="image/svg+xml" href="./favicon.ico" />
23-
<title>Perma Curate</title>
23+
<title>Kleros Scout</title>
2424
</head>
2525
<body>
2626
<div id="app"></div>

‎src/pages/Home/DetailsModal/ConfirmationBox.tsx‎

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React, { useState } from 'react'
22
import styled, { css } from 'styled-components'
3-
import { ModalOverlay } from '.'
3+
import { landscapeStyle } from 'styles/landscapeStyle'
4+
import { responsiveSize } from 'styles/responsiveSize'
45
import { performEvidenceBasedRequest } from 'utils/performEvidenceBasedRequest'
56
import { DepositParams } from 'utils/fetchRegistryDeposits'
6-
import {
7-
StyledReturnButton,
8-
SubmitButton,
9-
} from '../SubmitEntries/AddEntryModal'
10-
import { landscapeStyle } from '~src/styles/landscapeStyle'
11-
import { responsiveSize } from '~src/styles/responsiveSize'
7+
import { SubmitButton } from '../SubmitEntries/AddEntryModal'
8+
import { StyledCloseButton, ClosedButtonContainer } from 'pages/Home'
9+
import { ModalOverlay } from './index'
1210

1311
const Container = styled.div`
1412
position: fixed;
@@ -31,12 +29,19 @@ const Container = styled.div`
3129

3230
const InnerContainer = styled.div`
3331
display: flex;
32+
position: relative;
3433
flex-direction: column;
3534
padding: ${responsiveSize(16, 24)};
3635
gap: 16px;
3736
`
3837

39-
const ConfirmationTitle = styled.h3``
38+
const ConfirmationTitle = styled.h3`
39+
display: flex;
40+
flex-direction: row;
41+
justify-content: space-between;
42+
margin-top: 0;
43+
gap: 24px;
44+
`
4045

4146
const TextArea = styled.textarea`
4247
width: 93%;
@@ -63,12 +68,6 @@ const TextArea = styled.textarea`
6368
)}
6469
`
6570

66-
const ButtonGroup = styled.div`
67-
display: flex;
68-
justify-content: space-between;
69-
gap: 16px;
70-
`
71-
7271
interface IConfirmationBox {
7372
evidenceConfirmationType: string
7473
isConfirmationOpen: boolean
@@ -92,20 +91,25 @@ const ConfirmationBox: React.FC<IConfirmationBox> = ({
9291
<Container>
9392
<InnerContainer>
9493
<ConfirmationTitle>
95-
{(() => {
96-
switch (evidenceConfirmationType) {
97-
case 'Evidence':
98-
return 'Enter the evidence message you want to submit'
99-
case 'RegistrationRequested':
100-
return 'Provide a reason for challenging this entry'
101-
case 'Registered':
102-
return 'Provide a reason for removing this entry'
103-
case 'ClearingRequested':
104-
return 'Provide a reason for challenging this removal request'
105-
default:
106-
return 'Default message'
107-
}
108-
})()}
94+
<div>
95+
{(() => {
96+
switch (evidenceConfirmationType) {
97+
case 'Evidence':
98+
return 'Enter the evidence message you want to submit'
99+
case 'RegistrationRequested':
100+
return 'Provide a reason for challenging this entry'
101+
case 'Registered':
102+
return 'Provide a reason for removing this entry'
103+
case 'ClearingRequested':
104+
return 'Provide a reason for challenging this removal request'
105+
default:
106+
return 'Default message'
107+
}
108+
})()}
109+
</div>
110+
<ClosedButtonContainer onClick={() => setIsConfirmationOpen(false)}>
111+
<StyledCloseButton />
112+
</ClosedButtonContainer>
109113
</ConfirmationTitle>
110114
<label>Message title</label>
111115
<TextArea
@@ -119,30 +123,25 @@ const ConfirmationBox: React.FC<IConfirmationBox> = ({
119123
value={evidenceText}
120124
onChange={(e) => setEvidenceText(e.target.value)}
121125
></TextArea>
122-
<ButtonGroup>
123-
<StyledReturnButton onClick={() => setIsConfirmationOpen(false)}>
124-
Return
125-
</StyledReturnButton>
126-
<SubmitButton
127-
onClick={async () => {
128-
let result = false // a flag to check if the function execution was successful
129-
result = await performEvidenceBasedRequest(
130-
detailsData,
131-
deposits as DepositParams,
132-
arbitrationCostData as bigint,
133-
evidenceTitle,
134-
evidenceText,
135-
evidenceConfirmationType
136-
)
126+
<SubmitButton
127+
onClick={async () => {
128+
let result = false // a flag to check if the function execution was successful
129+
result = await performEvidenceBasedRequest(
130+
detailsData,
131+
deposits as DepositParams,
132+
arbitrationCostData as bigint,
133+
evidenceTitle,
134+
evidenceText,
135+
evidenceConfirmationType
136+
)
137137

138-
if (result) {
139-
setIsConfirmationOpen(false)
140-
}
141-
}}
142-
>
143-
Confirm
144-
</SubmitButton>
145-
</ButtonGroup>
138+
if (result) {
139+
setIsConfirmationOpen(false)
140+
}
141+
}}
142+
>
143+
Confirm
144+
</SubmitButton>
146145
</InnerContainer>
147146
</Container>
148147
</>

0 commit comments

Comments
 (0)