From 3bc0bc2592e417f6b68339c51aa295e3e155a173 Mon Sep 17 00:00:00 2001 From: gratestas Date: Tue, 25 Jul 2023 14:37:45 +0300 Subject: [PATCH 01/12] feat(eventlog): add mobile view for EventLog fix #242 --- src/assets/eyeDisabled.svg | 9 + src/components/others/eventLog/index.jsx | 222 ++++++++++-------- .../others/eventLog/index.module.scss | 30 ++- .../arbitrationDetails/evidence/index.jsx | 1 + .../arbitrationDetails/index.jsx | 2 +- src/components/presentational/tabs/index.jsx | 14 ++ .../presentational/tabs/index.module.scss | 27 +++ 7 files changed, 211 insertions(+), 94 deletions(-) create mode 100644 src/assets/eyeDisabled.svg create mode 100644 src/components/presentational/tabs/index.jsx create mode 100644 src/components/presentational/tabs/index.module.scss diff --git a/src/assets/eyeDisabled.svg b/src/assets/eyeDisabled.svg new file mode 100644 index 00000000..fa1eec45 --- /dev/null +++ b/src/assets/eyeDisabled.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/others/eventLog/index.jsx b/src/components/others/eventLog/index.jsx index d21296a9..5fc9f78e 100644 --- a/src/components/others/eventLog/index.jsx +++ b/src/components/others/eventLog/index.jsx @@ -10,113 +10,69 @@ import AttachmentIcon from "jsx:/src/assets/attachment.svg"; import getTrustScore from "../../../businessLogic/getTrustScore"; import getTimePastSinceLastBountyUpdate from "/src/businessLogic/getTimePastSinceLastBountyUpdate"; +import EyeIcon from "jsx:/src/assets/eye.svg"; +import DisabledEyeIcon from "jsx:/src/assets/eyeDisabled.svg"; +import Tabs from "../../presentational/tabs"; + const EVENTS_TO_IGNGORE = ["Withdrawal"]; const IPFS_GATEWAY_URL = "https://ipfs.kleros.io"; export default function EventLog({ visible, onCancel, events }) { - const ethereumContext = useContext(EthereumContext); - const [evidenceDetails, setEvidenceDetails] = useState({}); - const [expandedRows, setExpandedRows] = useState([]); - - const toggleEvidenceRow = (index) => { - const updatedRows = [...expandedRows]; - if (updatedRows.includes(index)) { - updatedRows.splice(updatedRows.indexOf(index), 1); - } else { - updatedRows.push(index); - } - setExpandedRows(updatedRows); - }; + const [eventsWithEvidenceDetails, setEventsWithEvidenceDetails] = useState([...events]); + const isMobileView = window?.innerWidth <= 600; useEffect(() => { - async function fetchEvidences(ipfsPaths) { - try { - const responses = await Promise.all(ipfsPaths.map((path) => fetch(IPFS_GATEWAY_URL + path))); - const data = await Promise.all(responses.map((response) => response.json())); - const evidences = ipfsPaths.reduce((acc, path, index) => ({ ...acc, [path]: data[index] }), {}); - - setEvidenceDetails(evidences); - } catch (error) { - console.error("Failed to fetch event evidences from IPFS", error); - } - } - console.log({ events }); + const fetchEvidencesAndMerge = async (events) => { + const updatedEvents = await Promise.all( + events.map(async (event) => { + if (event.name === "Evidence") { + try { + const response = await fetch(IPFS_GATEWAY_URL + event.details); + const evidenceData = await response.json(); + return { ...event, details: evidenceData }; + } catch (error) { + console.error("Failed to fetch event evidence from IPFS", error); + return event; + } + } + return event; + }) + ); + setEventsWithEvidenceDetails(updatedEvents); + }; - const ipfsPaths = events.filter((event) => event.name === "Evidence").map((event) => event.details); - if (ipfsPaths.length) fetchEvidences(ipfsPaths); + fetchEvidencesAndMerge(events); }, [events]); - const calculateTrustScore = (article) => { - return getTrustScore( - article, - getTimePastSinceLastBountyUpdate( - article.lastBalanceUpdate, - ethereumContext?.graphMetadata?.block?.number || ethereumContext?.blockNumber - ) - ); - }; + const filteredEvents = eventsWithEvidenceDetails.filter((e) => !EVENTS_TO_IGNGORE.includes(e.name)); return (
Event Log
- - - - - - - - - - - {events - .filter((e) => !EVENTS_TO_IGNGORE.includes(e.name)) - .map((event, i) => { - const isEvidence = event.name === "Evidence"; - const isExpanded = expandedRows.includes(i); - return ( - - - - - - - - {isEvidence && isExpanded && ( - - - - )} - - ); - })} - -
NameDetailsActorTime
{getPrettyNamesForEvents(event.name)} - {isEvidence ? ( -
toggleEvidenceRow(i)}> - {isExpanded ? "Hide Details" : "Show Details"} -
- ) : event.name === "ArticleWithdrawal" ? ( - formatExtraData(event.name, calculateTrustScore(event.article), ethereumContext) - ) : ( - formatExtraData(event.name, event.details, ethereumContext) - )} - 		- - {getLabel(event.from, ethereumContext?.accounts[0])} - - {new Date(event.timestamp * 1000).toUTCString()}
- -
+ {isMobileView ? ( + filteredEvents.map((event) => ) + ) : ( + + + + + + + + + + + {filteredEvents.map((event) => ( + + ))} + +
NameDetailsActorTime
+ )} ); } -function EvidenceDisplay({ evidence }) { +const EvidenceDisplay = ({ evidence }) => { return (
@@ -129,6 +85,89 @@ function EvidenceDisplay({ evidence }) {
{evidence.description}
); +}; + +const EventCard = ({ event }) => { + const [isExpanded, setEpanded] = useState(false); + const { blockNumber, chainId, accounts, graphMetadata, metaEvidenceContents } = useContext(EthereumContext); + const currenBlockNumber = graphMetadata?.block?.number || blockNumber; + + const getContent = () => { + switch (event.name) { + case "Evidence": + return ; + case "ArticleWithdrawal": + return formatExtraData(event.name, calculateTrustScore(event.article, currenBlockNumber), metaEvidenceContents); + default: + return formatExtraData(event.name, event.details, metaEvidenceContents); + } + }; + + return ( +
setEpanded((prevState) => !prevState)}> +
{getPrettyNamesForEvents(event.name)}
+
{new Date(event.timestamp * 1000).toUTCString()}
+ {isExpanded ? : } + {isExpanded && ( + + {getLabel(event.from, accounts[0])} + + ), + }, + { label: "Details", content: getContent() }, + ]} + /> + )} +
+ ); +}; + +const EventTableRow = ({ event }) => { + const [isExpanded, setEpanded] = useState(false); + const { blockNumber, accounts, chainId, graphMetadata, metaEvidenceContents } = useContext(EthereumContext); + const currenBlockNumber = graphMetadata?.block?.number || blockNumber; + + const isEvidence = event.name === "Evidence"; + return ( + <> + + {getPrettyNamesForEvents(event.name)} + + {isEvidence ? ( +
setEpanded((prevState) => !prevState)}> + {isExpanded ? "Hide Details" : "Show Details"} +
+ ) : event.name === "ArticleWithdrawal" ? ( + formatExtraData(event.name, calculateTrustScore(event.article, currenBlockNumber), metaEvidenceContents) + ) : ( + formatExtraData(event.name, event.details, metaEvidenceContents) + )} + + + + {getLabel(event.from, accounts[0])} + + + {new Date(event.timestamp * 1000).toUTCString()} + + {isEvidence && isExpanded && ( + + + + + + )} + + ); +}; + +function calculateTrustScore(article, latestBlockNumber) { + return getTrustScore(article, getTimePastSinceLastBountyUpdate(article.lastBalanceUpdate, latestBlockNumber)); } function getPrettyNamesForEvents(sourceCodeName) { @@ -148,8 +187,7 @@ function getPrettyNamesForEvents(sourceCodeName) { } } -function formatExtraData(eventNameAsInSourceCode, extraData, ethereumContext) { - const { metaEvidenceContents } = ethereumContext; +function formatExtraData(eventNameAsInSourceCode, extraData, metaEvidenceContents) { switch (eventNameAsInSourceCode) { case "NewArticle": return `Curation Pool 0: ${metaEvidenceContents[extraData]?.category}`; diff --git a/src/components/others/eventLog/index.module.scss b/src/components/others/eventLog/index.module.scss index 82cc2910..6c52f366 100644 --- a/src/components/others/eventLog/index.module.scss +++ b/src/components/others/eventLog/index.module.scss @@ -1,14 +1,42 @@ @use "src/stylesheets/variables/typo"; @use "src/stylesheets/variables/spacings"; +@use "src/stylesheets/variables/breakpoints"; .eventLog { - max-width: 80vw; + max-width: 95%; + + @media (min-width: breakpoints.$small) { + max-width: 80vw; + } .title { font-size: typo.$xl; margin-top: spacings.$s-7; } + .eventCard { + margin: spacings.$s-7 auto; + padding: spacings.$s-7 spacings.$s-4 spacings.$s-5; + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid hsl(var(--smooth-coffee-500)); + border-radius: 0.5rem; + + .cardTitle { + font-size: typo.$m; + margin-bottom: spacings.$s-3; + } + + .date { + margin-bottom: spacings.$s-7; + } + + a { + text-decoration: underline; + } + } + table { width: 100%; border-collapse: collapse; diff --git a/src/components/others/route_article/arbitrationDetails/evidence/index.jsx b/src/components/others/route_article/arbitrationDetails/evidence/index.jsx index ef9c3e76..abdd4018 100644 --- a/src/components/others/route_article/arbitrationDetails/evidence/index.jsx +++ b/src/components/others/route_article/arbitrationDetails/evidence/index.jsx @@ -16,6 +16,7 @@ export default function EvidencePeriod({ evidenceEvents, setEvidenceModalOpen }) useEffect(() => { const fetchData = async () => { + console.log({ evidenceEvents }); if (!evidenceEvents > 0) return; const data = await Promise.all( evidenceEvents.map(async (evidence) => { diff --git a/src/components/others/route_article/arbitrationDetails/index.jsx b/src/components/others/route_article/arbitrationDetails/index.jsx index 298760a4..73aea6ef 100644 --- a/src/components/others/route_article/arbitrationDetails/index.jsx +++ b/src/components/others/route_article/arbitrationDetails/index.jsx @@ -145,7 +145,7 @@ export default function ArbitrationDetails({ article }) { isHiddenVotes={currentDispute?.court.hiddenVotes} setEvidenceModalOpen={setEvidenceModalOpen} question={ethereumContext?.metaEvidenceContents[article?.category]?.question} - voteOptions={ethereumContext.metaEvidenceContents[article.category].rulingOptions.titles} + voteOptions={ethereumContext.metaEvidenceContents[article.category]?.rulingOptions.titles} />, , + {items?.map((item, i) => ( + + {item.content} + + ))} + + ); +} diff --git a/src/components/presentational/tabs/index.module.scss b/src/components/presentational/tabs/index.module.scss new file mode 100644 index 00000000..3d316afb --- /dev/null +++ b/src/components/presentational/tabs/index.module.scss @@ -0,0 +1,27 @@ +@use "src/stylesheets/variables/typo"; +@use "src/stylesheets/variables/spacings"; + +.tabs { + width: 100%; + + :global(div.ant-tabs-nav-wrap) { + width: 100%; + margin-top: spacings.$s-3; + display: flex; + justify-content: center; + border-top: 1px solid black; + } + + :global(.ant-tabs-content.ant-tabs-content-top) { + text-align: center; + } + + :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { + color: hsl(var(--dark-orchestra-600)); + font-weight: medium; + } + + :global(.ant-tabs-ink-bar) { + background: hsl(var(--dark-orchestra-600)); + } +} From d797fdca15012859618c77847131c9578be97ebf Mon Sep 17 00:00:00 2001 From: gratestas Date: Tue, 25 Jul 2023 16:21:06 +0300 Subject: [PATCH 02/12] fix(eventlog): autoclose expanded item with inactive key" --- src/components/others/eventLog/index.jsx | 161 ++++++++++-------- .../others/eventLog/index.module.scss | 9 + 2 files changed, 95 insertions(+), 75 deletions(-) diff --git a/src/components/others/eventLog/index.jsx b/src/components/others/eventLog/index.jsx index 5fc9f78e..2eb090b8 100644 --- a/src/components/others/eventLog/index.jsx +++ b/src/components/others/eventLog/index.jsx @@ -49,25 +49,7 @@ export default function EventLog({ visible, onCancel, events }) { return (
Event Log
- {isMobileView ? ( - filteredEvents.map((event) => ) - ) : ( - - - - - - - - - - - {filteredEvents.map((event) => ( - - ))} - -
NameDetailsActorTime
- )} + {isMobileView ? : } ); } @@ -87,82 +69,111 @@ const EvidenceDisplay = ({ evidence }) => { ); }; -const EventCard = ({ event }) => { - const [isExpanded, setEpanded] = useState(false); +const EventList = ({ events }) => { + const [activeKey, setActiveKey] = useState(); const { blockNumber, chainId, accounts, graphMetadata, metaEvidenceContents } = useContext(EthereumContext); - const currenBlockNumber = graphMetadata?.block?.number || blockNumber; + const currentBlockNumber = graphMetadata?.block?.number || blockNumber; - const getContent = () => { + const getContent = (event) => { switch (event.name) { case "Evidence": return ; case "ArticleWithdrawal": - return formatExtraData(event.name, calculateTrustScore(event.article, currenBlockNumber), metaEvidenceContents); + return formatExtraData( + event.name, + calculateTrustScore(event.article, currentBlockNumber), + metaEvidenceContents + ); default: return formatExtraData(event.name, event.details, metaEvidenceContents); } }; return ( -
setEpanded((prevState) => !prevState)}> -
{getPrettyNamesForEvents(event.name)}
-
{new Date(event.timestamp * 1000).toUTCString()}
- {isExpanded ? : } - {isExpanded && ( - - {getLabel(event.from, accounts[0])} - - ), - }, - { label: "Details", content: getContent() }, - ]} - /> - )} -
+ <> + {events?.map((event, index) => ( +
setActiveKey(index)}> +
{getPrettyNamesForEvents(event.name)}
+
{new Date(event.timestamp * 1000).toUTCString()}
+ {activeKey === index ? : } + {activeKey === index && ( + + {getLabel(event.from, accounts[0])} + + ), + }, + { label: "Details", content: getContent(event) }, + ]} + /> + )} +
+ ))} + ); }; -const EventTableRow = ({ event }) => { - const [isExpanded, setEpanded] = useState(false); +const EventTable = ({ events }) => { + const [activeKey, setActiveKey] = useState(); const { blockNumber, accounts, chainId, graphMetadata, metaEvidenceContents } = useContext(EthereumContext); - const currenBlockNumber = graphMetadata?.block?.number || blockNumber; + const currentBlockNumber = graphMetadata?.block?.number || blockNumber; - const isEvidence = event.name === "Evidence"; return ( - <> - - {getPrettyNamesForEvents(event.name)} - - {isEvidence ? ( -
setEpanded((prevState) => !prevState)}> - {isExpanded ? "Hide Details" : "Show Details"} -
- ) : event.name === "ArticleWithdrawal" ? ( - formatExtraData(event.name, calculateTrustScore(event.article, currenBlockNumber), metaEvidenceContents) - ) : ( - formatExtraData(event.name, event.details, metaEvidenceContents) - )} - - - - {getLabel(event.from, accounts[0])} - - - {new Date(event.timestamp * 1000).toUTCString()} - - {isEvidence && isExpanded && ( + + - + + + + - )} - + + + {events?.map((event, index) => { + const isEvidence_ = event.name === "Evidence"; + const isExpanded_ = activeKey === index; + return ( + <> + + + + + + + {isEvidence_ && isExpanded_ && ( + + + + )} + + ); + })} + +
- - NameDetailsActorTime
{getPrettyNamesForEvents(event.name)} + {isEvidence_ ? ( +
setActiveKey(index)}> + {isExpanded_ ? "Hide Details" : "Show Details"} +
+ ) : event.name === "ArticleWithdrawal" ? ( + formatExtraData( + event.name, + calculateTrustScore(event.article, currentBlockNumber), + metaEvidenceContents + ) + ) : ( + formatExtraData(event.name, event.details, metaEvidenceContents) + )} + 		+ + {getLabel(event.from, accounts[0])} + + {new Date(event.timestamp * 1000).toUTCString()}
+ +
); }; diff --git a/src/components/others/eventLog/index.module.scss b/src/components/others/eventLog/index.module.scss index 6c52f366..c76d9762 100644 --- a/src/components/others/eventLog/index.module.scss +++ b/src/components/others/eventLog/index.module.scss @@ -135,11 +135,20 @@ padding-bottom: spacings.$s-3; display: flex; justify-content: space-between; + text-align: left; + + ::first-letter { + text-transform: capitalize; + } } .description { font-size: typo.$xs; padding-top: spacings.$s-3; + text-align: left; + ::first-letter { + text-transform: capitalize; + } } .header, From 6790a47855e3d40aa1383c6274c478d86a423bfd Mon Sep 17 00:00:00 2001 From: gratestas Date: Tue, 25 Jul 2023 18:05:09 +0300 Subject: [PATCH 03/12] fix(enventlog): hide details if the clicked item is the currently active item --- src/components/others/eventLog/index.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/others/eventLog/index.jsx b/src/components/others/eventLog/index.jsx index 2eb090b8..50cfa3ff 100644 --- a/src/components/others/eventLog/index.jsx +++ b/src/components/others/eventLog/index.jsx @@ -92,7 +92,11 @@ const EventList = ({ events }) => { return ( <> {events?.map((event, index) => ( -
setActiveKey(index)}> +
setActiveKey((prevState) => (prevState === index ? undefined : index))} + >
{getPrettyNamesForEvents(event.name)}
{new Date(event.timestamp * 1000).toUTCString()}
{activeKey === index ? : } @@ -142,7 +146,10 @@ const EventTable = ({ events }) => { {getPrettyNamesForEvents(event.name)} {isEvidence_ ? ( -
setActiveKey(index)}> +
setActiveKey((prevState) => (prevState === index ? undefined : index))} + > {isExpanded_ ? "Hide Details" : "Show Details"}
) : event.name === "ArticleWithdrawal" ? ( From 3654efa3b68dbaeb1d03de238a34cca54a1fa6dd Mon Sep 17 00:00:00 2001 From: gratestas Date: Tue, 1 Aug 2023 13:44:54 +0300 Subject: [PATCH 04/12] fix(eventlog): use design icons --- src/assets/close.svg | 1 + src/assets/open.svg | 1 + src/components/others/eventLog/index.jsx | 6 +++--- src/components/others/eventLog/index.module.scss | 5 +++++ src/components/presentational/tabs/index.module.scss | 2 +- 5 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 src/assets/close.svg create mode 100644 src/assets/open.svg diff --git a/src/assets/close.svg b/src/assets/close.svg new file mode 100644 index 00000000..3cc44130 --- /dev/null +++ b/src/assets/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/open.svg b/src/assets/open.svg new file mode 100644 index 00000000..8db45c70 --- /dev/null +++ b/src/assets/open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/others/eventLog/index.jsx b/src/components/others/eventLog/index.jsx index 50cfa3ff..8cda2bf4 100644 --- a/src/components/others/eventLog/index.jsx +++ b/src/components/others/eventLog/index.jsx @@ -10,8 +10,8 @@ import AttachmentIcon from "jsx:/src/assets/attachment.svg"; import getTrustScore from "../../../businessLogic/getTrustScore"; import getTimePastSinceLastBountyUpdate from "/src/businessLogic/getTimePastSinceLastBountyUpdate"; -import EyeIcon from "jsx:/src/assets/eye.svg"; -import DisabledEyeIcon from "jsx:/src/assets/eyeDisabled.svg"; +import OpenEyeIcon from "jsx:/src/assets/open.svg"; +import CloseEyeIcon from "jsx:/src/assets/close.svg"; import Tabs from "../../presentational/tabs"; const EVENTS_TO_IGNGORE = ["Withdrawal"]; @@ -99,7 +99,7 @@ const EventList = ({ events }) => { >
{getPrettyNamesForEvents(event.name)}
{new Date(event.timestamp * 1000).toUTCString()}
- {activeKey === index ? : } +
{activeKey === index ? : }
{activeKey === index && ( Date: Tue, 1 Aug 2023 13:50:26 +0300 Subject: [PATCH 05/12] fix(eventlog): switch icons in ternary expression --- src/components/others/eventLog/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/others/eventLog/index.jsx b/src/components/others/eventLog/index.jsx index 8cda2bf4..34e3b5c0 100644 --- a/src/components/others/eventLog/index.jsx +++ b/src/components/others/eventLog/index.jsx @@ -99,7 +99,7 @@ const EventList = ({ events }) => { >
{getPrettyNamesForEvents(event.name)}
{new Date(event.timestamp * 1000).toUTCString()}
-
{activeKey === index ? : }
+
{activeKey === index ? : }
{activeKey === index && ( Date: Tue, 1 Aug 2023 14:44:22 +0300 Subject: [PATCH 06/12] style(arbitration-details): apply styling for mobile view fix #244 --- .../arbitrationDetails/index.module.scss | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/others/route_article/arbitrationDetails/index.module.scss b/src/components/others/route_article/arbitrationDetails/index.module.scss index fb92e206..1a28917b 100644 --- a/src/components/others/route_article/arbitrationDetails/index.module.scss +++ b/src/components/others/route_article/arbitrationDetails/index.module.scss @@ -14,35 +14,41 @@ } .detailsContainer { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - padding: spacings.$s-3 0; - margin-bottom: spacings.$s-12; + display: grid; + grid-template-columns: 1fr; + grid-gap: spacings.$s-3; + margin: spacings.$s-8 0; color: hsl(var(--english-breakfast-600)); a { text-decoration: underline; } - > span { + span { + display: flex; + justify-content: space-between; b { margin-right: spacings.$s-2; color: hsl(var(--dark-orchestra-600)); } } - @media (max-width: breakpoints.$small) { - flex-flow: column wrap; - margin-top: spacings.$s-6; - padding-top: spacings.$s-4; - padding-bottom: spacings.$s-3; + @media (min-width: breakpoints.$small) and (max-width: breakpoints.$large) { + grid-template-columns: repeat(2, 1fr); + grid-gap: spacings.$s-3; + + span:nth-child(even) { + justify-content: end; + } + span:nth-child(odd) { + justify-content: start; + } + } + + @media (min-width: breakpoints.$large) { + grid-template-columns: repeat(4, 1fr); span { - display: flex; - justify-content: space-between; - b { - margin-bottom: spacings.$s-2; - } + justify-content: start; } } } From 12487f272a609c4cb26d1a22e16912d15e7833fd Mon Sep 17 00:00:00 2001 From: gratestas Date: Tue, 1 Aug 2023 15:10:44 +0300 Subject: [PATCH 07/12] style(arbitration-details): set justify-content to default value on mobile view --- .../others/route_article/arbitrationDetails/index.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/others/route_article/arbitrationDetails/index.module.scss b/src/components/others/route_article/arbitrationDetails/index.module.scss index 1a28917b..7975ebcd 100644 --- a/src/components/others/route_article/arbitrationDetails/index.module.scss +++ b/src/components/others/route_article/arbitrationDetails/index.module.scss @@ -26,7 +26,6 @@ span { display: flex; - justify-content: space-between; b { margin-right: spacings.$s-2; color: hsl(var(--dark-orchestra-600)); From bc1993749c1f52062ca704bc7fd44b4a6e250e91 Mon Sep 17 00:00:00 2001 From: gratestas Date: Sun, 6 Aug 2023 22:09:37 +0300 Subject: [PATCH 08/12] refactor(progress-bar): add adaptive styling --- .../presentational/progressBar/index.jsx | 12 ++- .../progressBar/index.module.scss | 95 ++++++++++++------- 2 files changed, 71 insertions(+), 36 deletions(-) diff --git a/src/components/presentational/progressBar/index.jsx b/src/components/presentational/progressBar/index.jsx index cb9b9b22..83dca63c 100644 --- a/src/components/presentational/progressBar/index.jsx +++ b/src/components/presentational/progressBar/index.jsx @@ -1,6 +1,16 @@ import { Progress } from "antd"; import * as styles from "./index.module.scss"; +import { getBreakpointValue } from "../../../utils/breakpoints"; +import { useMediaQuery } from "../../../hooks/useMediaQuery"; + export default function ProgressBar(props) { - return ; + const breakpoint = getBreakpointValue("large"); + const isCircular = useMediaQuery(`(max-width: ${breakpoint}px)`); + + const type = isCircular ? "circle" : "line"; + const strokeLinecap = isCircular ? "square" : "round"; + const typeStyles = isCircular ? styles.progressBarCircular : styles.progressBar; + + return ; } diff --git a/src/components/presentational/progressBar/index.module.scss b/src/components/presentational/progressBar/index.module.scss index 10256d72..b5b317e6 100644 --- a/src/components/presentational/progressBar/index.module.scss +++ b/src/components/presentational/progressBar/index.module.scss @@ -3,43 +3,68 @@ $brownDarken40: hsl(var(--english-breakfast-800), 0.6); $brownDarken20: hsl(var(--english-breakfast-700), 0.6); -$green: hsl(180, 46%, 15%); -$pink: hsl(313, 74%, 35%); +$blue: hsl(180, 100%, 38%); +$blueDarken: hsl(180, 45%, 15%); +$pink: hsl(314, 65%, 82%); +$pinkDarken: hsl(313, 74%, 35%); .progressBar { - //TODO: Doesn't work. Remove styles from arbitrationDetails when this fixed. - :global { - .ant-progress { - .ant-progress-text { - font-size: typo.$xl; - width: 98%; - text-align: right; - margin-top: spacings.$s-2; - margin-bottom: spacings.$s-2; - } - .ant-progress-outer { - padding-right: 0; - .ant-progress-inner { - border: 1px solid $brownDarken20; - border-radius: 4px; - height: spacings.$s-4; - - .ant-progress-bg { - background: hsl(313, 74%, 35%); - border: 1px solid hsl(314, 65%, 82%); - } - .ant-progress-success-bg { - background: hsl(180, 46%, 15%); - border: 1px solid hsl(180, 100%, 38%); - } - - .ant-progress-bg, - .ant-progress-success-bg { - border-radius: inherit; - height: inherit !important; - } - } - } + width: 100%; + + :global(.ant-progress-outer) { + width: 100%; + padding-right: 0; + } + + :global(.ant-progress-inner) { + border: 1px solid $brownDarken20; + height: spacings.$s-4; + border-radius: 4px; + + > * { + height: inherit !important; + border-radius: inherit; } } + + :global(.ant-progress-bg) { + background: $pinkDarken; + border: 1px solid $pink; + } + + :global(.ant-progress-success-bg) { + background: $blueDarken; + border: 1px solid $blue; + } + + :global(.ant-progress-text) { + font-size: typo.$xl; + width: 98%; + text-align: right; + margin-top: spacings.$s-2; + margin-bottom: spacings.$s-2; + } +} + +.progressBarCircular { + div > svg > circle { + stroke-width: spacings.$s-1; + + &:nth-child(1) { + r: 40; + stroke-width: 2px; + stroke: hsl(var(--english-breakfast-500)) !important; + } + &:nth-child(2) { + stroke: $blueDarken !important; + } + &:nth-child(3) { + stroke: $pinkDarken !important; + } + } + + :global(.ant-progress-inner) { + width: 8rem !important; + height: 8rem !important; + } } From da58ef68a998adf110b4519787d95d45fadb4f8b Mon Sep 17 00:00:00 2001 From: gratestas Date: Sun, 6 Aug 2023 22:51:55 +0300 Subject: [PATCH 09/12] feat(utils): add helper function to access global css breakpoint values --- src/stylesheets/variables/_breakpoints.scss | 5 +++++ src/utils/breakpoints.js | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/utils/breakpoints.js diff --git a/src/stylesheets/variables/_breakpoints.scss b/src/stylesheets/variables/_breakpoints.scss index bd7ef5f1..0119bc1a 100644 --- a/src/stylesheets/variables/_breakpoints.scss +++ b/src/stylesheets/variables/_breakpoints.scss @@ -1,2 +1,7 @@ $small: 600px; $large: 1200px; + +:root { + --small: #{$small}; + --large: #{$large}; +} diff --git a/src/utils/breakpoints.js b/src/utils/breakpoints.js new file mode 100644 index 00000000..4a988b32 --- /dev/null +++ b/src/utils/breakpoints.js @@ -0,0 +1,8 @@ +export function getBreakpointValue(breakpointName) { + const breakpoints = { + small: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--small"), 10), + large: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--large"), 10), + }; + + return breakpoints[breakpointName] || null; +} From 3952b166e236ec9e6962f154030770a9dda26818 Mon Sep 17 00:00:00 2001 From: gratestas Date: Sun, 6 Aug 2023 22:53:55 +0300 Subject: [PATCH 10/12] feat(hooks): add useMediaQuery hook --- src/hooks/useMediaQuery.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/hooks/useMediaQuery.js diff --git a/src/hooks/useMediaQuery.js b/src/hooks/useMediaQuery.js new file mode 100644 index 00000000..3ce085d2 --- /dev/null +++ b/src/hooks/useMediaQuery.js @@ -0,0 +1,18 @@ +// utils/useMediaQuery.js +import { useState, useEffect } from "react"; + +export function useMediaQuery(query) { + const mediaQuery = window.matchMedia(query); + const [matches, setMatches] = useState(mediaQuery.matches); + + useEffect(() => { + const handleResize = (event) => { + setMatches(event.matches); + }; + + mediaQuery.addEventListener("change", handleResize); + return () => mediaQuery.removeEventListener("change", handleResize); + }, [mediaQuery]); + + return matches; +} From 2fb7d4b6ff7c8ef89881889999377972a21801ba Mon Sep 17 00:00:00 2001 From: gratestas Date: Sun, 6 Aug 2023 22:57:23 +0300 Subject: [PATCH 11/12] refactor(appeal-period): add responsive styling --- .../appeal/croudfundingCard/index.jsx | 26 +++--- .../appeal/croudfundingCard/index.module.scss | 75 ++++++++++++++-- .../arbitrationDetails/appeal/index.jsx | 4 +- .../appeal/index.module.scss | 90 +++++++------------ 4 files changed, 118 insertions(+), 77 deletions(-) diff --git a/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.jsx b/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.jsx index 85bac4d3..27449ce1 100644 --- a/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.jsx +++ b/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.jsx @@ -17,24 +17,28 @@ export default function CrowdfundingCard({ const timeLeft = useCountdown(parseInt(appealDeadline)); return (
-
- {title} - -
+ + {title} + + - -
{`Appeal ends in: ${formatTime(timeLeft)}`}
+
+ +
+
+ Appeal ends in: {formatTime(timeLeft)} +
); } diff --git a/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.module.scss b/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.module.scss index bb1fd2db..35350f05 100644 --- a/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.module.scss +++ b/src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.module.scss @@ -1,22 +1,85 @@ @use "src/stylesheets/variables/spacings"; @use "src/stylesheets/variables/typo"; +@use "src/stylesheets/variables/breakpoints"; .crowdfundingCard { + display: grid; + justify-items: center; + align-items: center; + gap: spacings.$s-3; flex-grow: 1; - display: flex; - flex-direction: column; padding: spacings.$s-4; margin-bottom: spacings.$s-5; border: 1px solid hsl(var(--english-breakfast-900)); border-radius: 4px; - .topRow { + grid-template-areas: + "radio" + "indicator" + "ethValue" + "appealDeadline"; + + @media (min-width: breakpoints.$large) { + gap: spacings.$s-3; + justify-items: flex-start; + grid-template-areas: + "radio . ethValue" + "indicator indicator indicator" + "appealDeadline appealDeadline ."; + } + + .radioButton { + grid-area: radio; + + :global(.ant-radio-inner) { + border-color: hsl(var(--english-breakfast-800)); + background-color: transparent; + + &::after { + background-color: hsl(var(--english-breakfast-800)); + } + } + span { + font-weight: bold; + font-size: typo.$s; + } + } + + .ethValue { + grid-area: ethValue; + font-size: typo.$xl; + color: hsl(var(--english-breakfast-600)); + @media (min-width: breakpoints.$large) { + justify-self: end; + } + } + + .indicator { + grid-area: indicator; + margin-top: spacings.$s-3; + @media (min-width: breakpoints.$large) { + width: 100%; + margin-top: 0; + } + } + + .appealDeadline { + grid-area: appealDeadline; display: flex; - justify-content: space-between; + flex-direction: column; align-items: center; + flex-wrap: wrap; + font-size: typo.$s; + span { + font-weight: bold; + color: hsl(var(--english-breakfast-600)); + } - .ethValue { - font-size: typo.$xl; + @media (min-width: breakpoints.$large) { + flex-direction: row; + span { + margin-left: spacings.$s-2; + } } } } diff --git a/src/components/others/route_article/arbitrationDetails/appeal/index.jsx b/src/components/others/route_article/arbitrationDetails/appeal/index.jsx index a59857d1..f28bbe46 100644 --- a/src/components/others/route_article/arbitrationDetails/appeal/index.jsx +++ b/src/components/others/route_article/arbitrationDetails/appeal/index.jsx @@ -96,7 +96,7 @@ export default function AppealPeriod({ currentRound, setEvidenceModalOpen }) {
Your contribution
-
+
diff --git a/src/components/others/route_article/arbitrationDetails/appeal/index.module.scss b/src/components/others/route_article/arbitrationDetails/appeal/index.module.scss index 0b7d2ddb..e67c0041 100644 --- a/src/components/others/route_article/arbitrationDetails/appeal/index.module.scss +++ b/src/components/others/route_article/arbitrationDetails/appeal/index.module.scss @@ -1,5 +1,6 @@ @use "src/stylesheets/variables/spacings"; @use "src/stylesheets/variables/typo"; +@use "src/stylesheets/variables/breakpoints"; .appealPeriod { display: flex; @@ -7,11 +8,16 @@ align-items: center; .crowdFundingPanel { + display: flex; + flex-direction: column; width: 100%; - padding: spacings.$s-4 spacings.$s-7; margin-bottom: spacings.$s-18; - border: 1px solid hsl(var(--english-breakfast-800)); - border-radius: 4px; + + @media (min-width: breakpoints.$small) { + padding: spacings.$s-4 spacings.$s-7; + border: 1px solid hsl(var(--english-breakfast-800)); + border-radius: 4px; + } .title { margin-bottom: spacings.$s-4; @@ -20,29 +26,49 @@ .appealOptions { display: flex; - flex-wrap: wrap; justify-content: space-between; gap: spacings.$s-4; + flex: 1 0 0; } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; - align-items: center; + align-items: baseline; .label { display: flex; align-items: center; gap: spacings.$s-1; - margin-bottom: spacings.$s-2; + margin-bottom: spacings.$s-4; font-size: typo.$xs; + + @media (min-width: breakpoints.$large) { + margin-bottom: spacings.$s-2; + align-self: end; + } .colorBox { width: spacings.$s-3; height: spacings.$s-3; background-color: hsl(313, 74%, 35%); } } + + .fundInput { + width: 100%; + display: flex; + justify-content: space-between; + + @media (min-width: breakpoints.$large) { + width: max-content; + gap: spacings.$s-2; + } + + input { + margin-top: 0; + } + } } } @@ -63,58 +89,6 @@ color: hsl(var(--red-reign-600)); } } - - .crowdFundingPanel :global { - .ant-progress { - .ant-progress-text { - font-size: typo.$xl; - width: 98%; - text-align: right; - margin-top: spacings.$s-2; - margin-bottom: spacings.$s-2; - } - .ant-progress-outer { - padding-right: 0; - .ant-progress-inner { - border: 1px solid hsl(var(--english-breakfast-800)); - border-radius: 4px; - height: spacings.$s-4; - - .ant-progress-bg { - background: hsl(180, 46%, 15%); - border: 1px solid hsl(180, 100%, 38%); - } - .ant-progress-success-bg { - background: hsl(313, 74%, 35%); - border: 1px solid hsl(314, 65%, 82%); - } - - .ant-progress-bg, - .ant-progress-success-bg { - border-radius: inherit; - height: inherit !important; - } - } - } - } - - .ant-radio-group { - width: 100%; - span { - font-size: typo.$s; - font-weight: bold; - } - - .ant-radio-inner { - border-color: hsl(var(--english-breakfast-800)); - background-color: transparent; - } - .ant-radio-inner:after, - .ant-radio-checked:after { - background-color: hsl(var(--english-breakfast-800)); - } - } - } } .appealFundingModal { From 9d55b346ed3174ec1a95aad70e43c4fcc8c287a4 Mon Sep 17 00:00:00 2001 From: gratestas Date: Sun, 6 Aug 2023 23:05:13 +0300 Subject: [PATCH 12/12] style(progress-bar): change innermost bg to transparent --- src/components/presentational/progressBar/index.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/presentational/progressBar/index.module.scss b/src/components/presentational/progressBar/index.module.scss index b5b317e6..cbca6d5f 100644 --- a/src/components/presentational/progressBar/index.module.scss +++ b/src/components/presentational/progressBar/index.module.scss @@ -17,6 +17,7 @@ $pinkDarken: hsl(313, 74%, 35%); } :global(.ant-progress-inner) { + background: transparent; border: 1px solid $brownDarken20; height: spacings.$s-4; border-radius: 4px;