Skip to content

refactor(web): close-x-button-instead-of-back-button-on-popups #7

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

Merged
merged 6 commits into from
Apr 2, 2024
Merged

refactor(web): close-x-button-instead-of-back-button-on-popups #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fddaa01
refactor(web): close-x-button-instead-of-back-button-on-popups
kemuru Mar 15, 2024
3e762f8
feat(web): improve mobile responsiveness evidence field, change name …
kemuru Mar 26, 2024
f4ea0b3
feat(web): add formatted timestamps
kemuru Mar 26, 2024
00c5eaf
feat(web): organize imports, tsconfig, fix crash arbitrationcost unde…
kemuru Mar 27, 2024
07736e2
fix(web): decimals token submission and shown, images resizing
kemuru Apr 1, 2024
29c4cbf
feat(web): add skeletons to images, improve entry detailed view
kemuru Apr 2, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useRef } from 'react'
import styled from 'styled-components'
import 'overlayscrollbars/styles/overlayscrollbars.css'
import 'react-loading-skeleton/dist/skeleton.css'
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
import { OverlayScrollContext } from 'context/OverlayScrollContext'
import Home from 'pages/Home'
Expand Down
4 changes: 4 additions & 0 deletions src/assets/svgs/icons/close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/favicon.ico
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
content="dispute resolution, decentralized arbitration, Kleros, blockchain court"
/>
<link rel="shortcut icon" type="image/svg+xml" href="./favicon.ico" />
<title>Perma Curate</title>
<title>Kleros Scout</title>
</head>
<body>
<div id="app"></div>
Expand Down
101 changes: 50 additions & 51 deletions src/pages/Home/DetailsModal/ConfirmationBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, { useState } from 'react'
import styled, { css } from 'styled-components'
import { ModalOverlay } from '.'
import { landscapeStyle } from 'styles/landscapeStyle'
import { responsiveSize } from 'styles/responsiveSize'
import { performEvidenceBasedRequest } from 'utils/performEvidenceBasedRequest'
import { DepositParams } from 'utils/fetchRegistryDeposits'
import {
StyledReturnButton,
SubmitButton,
} from '../SubmitEntries/AddEntryModal'
import { landscapeStyle } from '~src/styles/landscapeStyle'
import { responsiveSize } from '~src/styles/responsiveSize'
import { SubmitButton } from '../SubmitEntries/AddEntryModal'
import { StyledCloseButton, ClosedButtonContainer } from 'pages/Home'
import { ModalOverlay } from './index'

const Container = styled.div`
position: fixed;
Expand All @@ -31,12 +29,19 @@ const Container = styled.div`

const InnerContainer = styled.div`
display: flex;
position: relative;
flex-direction: column;
padding: ${responsiveSize(16, 24)};
gap: 16px;
`

const ConfirmationTitle = styled.h3``
const ConfirmationTitle = styled.h3`
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 0;
gap: 24px;
`

const TextArea = styled.textarea`
width: 93%;
Expand All @@ -63,12 +68,6 @@ const TextArea = styled.textarea`
)}
`

const ButtonGroup = styled.div`
display: flex;
justify-content: space-between;
gap: 16px;
`

interface IConfirmationBox {
evidenceConfirmationType: string
isConfirmationOpen: boolean
Expand All @@ -92,20 +91,25 @@ const ConfirmationBox: React.FC<IConfirmationBox> = ({
<Container>
<InnerContainer>
<ConfirmationTitle>
{(() => {
switch (evidenceConfirmationType) {
case 'Evidence':
return 'Enter the evidence message you want to submit'
case 'RegistrationRequested':
return 'Provide a reason for challenging this entry'
case 'Registered':
return 'Provide a reason for removing this entry'
case 'ClearingRequested':
return 'Provide a reason for challenging this removal request'
default:
return 'Default message'
}
})()}
<div>
{(() => {
switch (evidenceConfirmationType) {
case 'Evidence':
return 'Enter the evidence message you want to submit'
case 'RegistrationRequested':
return 'Provide a reason for challenging this entry'
case 'Registered':
return 'Provide a reason for removing this entry'
case 'ClearingRequested':
return 'Provide a reason for challenging this removal request'
default:
return 'Default message'
}
})()}
</div>
<ClosedButtonContainer onClick={() => setIsConfirmationOpen(false)}>
<StyledCloseButton />
</ClosedButtonContainer>
</ConfirmationTitle>
<label>Message title</label>
<TextArea
Expand All @@ -119,30 +123,25 @@ const ConfirmationBox: React.FC<IConfirmationBox> = ({
value={evidenceText}
onChange={(e) => setEvidenceText(e.target.value)}
></TextArea>
<ButtonGroup>
<StyledReturnButton onClick={() => setIsConfirmationOpen(false)}>
Return
</StyledReturnButton>
<SubmitButton
onClick={async () => {
let result = false // a flag to check if the function execution was successful
result = await performEvidenceBasedRequest(
detailsData,
deposits as DepositParams,
arbitrationCostData as bigint,
evidenceTitle,
evidenceText,
evidenceConfirmationType
)
<SubmitButton
onClick={async () => {
let result = false // a flag to check if the function execution was successful
result = await performEvidenceBasedRequest(
detailsData,
deposits as DepositParams,
arbitrationCostData as bigint,
evidenceTitle,
evidenceText,
evidenceConfirmationType
)

if (result) {
setIsConfirmationOpen(false)
}
}}
>
Confirm
</SubmitButton>
</ButtonGroup>
if (result) {
setIsConfirmationOpen(false)
}
}}
>
Confirm
</SubmitButton>
</InnerContainer>
</Container>
</>
Expand Down
Loading