chore: improve evidence cards

Proof-Of-Humanity · Oct 13, 2020 · 0308c80 · 0308c80
1 parent b07a529
commit 0308c80
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@
 - chore: fix ci again ([2854a26](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/2854a26))
 - chore: fix ci and add security policy ([07dcc94](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/07dcc94))
 - chore: fix icon colors ([cefcc45](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/cefcc45))
+- chore: fix paddings ([b07a529](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/b07a529))
 - chore: fix routing bugs and finish registration form ([d789c7b](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/d789c7b))
 - chore: fix subgraph ([68606c9](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/68606c9))
 - chore: fix subgraph memory access ([ba9cc9e](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/ba9cc9e))

diff --git a/_pages/profile/[id]/submission-details-accordion.js b/_pages/profile/[id]/submission-details-accordion.js
@@ -48,11 +48,11 @@ const submissionDetailsAccordionFragments = {
     }
   `,
 };
-function SubmissionDetailsAccordionItem({ heading, panel }) {
+function SubmissionDetailsAccordionItem({ heading, panelSx, panel }) {
   return (
     <AccordionItem>
       <AccordionItemHeading>{heading}</AccordionItemHeading>
-      <AccordionItemPanel>{panel}</AccordionItemPanel>
+      <AccordionItemPanel sx={panelSx}>{panel}</AccordionItemPanel>
     </AccordionItem>
   );
 }
@@ -86,6 +86,7 @@ export default function SubmissionDetailsAccordion({ submission, contract }) {
     <Accordion>
       <SubmissionDetailsAccordionItem
         heading="Evidence"
+        panelSx={{ paddingX: 0 }}
         panel={
           <Evidence
             contract="proofOfHumanity"

diff --git a/components/evidence.js b/components/evidence.js
@@ -34,7 +34,10 @@ function EvidenceItem({
             <Identicon address={sender} />
             <Box sx={{ marginLeft: 1 }}>
               <Text>
-                #{index} submitted by{" "}
+                <Text as="span" sx={{ fontWeight: "bold" }}>
+                  #{index}
+                </Text>{" "}
+                submitted by{" "}
                 <NextETHLink address={sender}>{sender}</NextETHLink>
               </Text>
               <Text>
@@ -74,7 +77,7 @@ export default function Evidence({
   return (
     <ScrollTo>
       {({ scroll }) => (
-        <>
+        <Box sx={{ paddingX: 4 }}>
           <Flex
             sx={{
               alignItems: "center",
@@ -94,8 +97,12 @@ export default function Evidence({
           <ScrollArea
             sx={{
               marginBottom: 2,
+              marginTop: -3,
+              marginX: -4,
               maxHeight: 618,
               overflowY: "scroll",
+              paddingTop: 3,
+              paddingX: 4,
             }}
           >
             {evidence.map((_evidence, index) => (
@@ -120,7 +127,7 @@ export default function Evidence({
               Scroll to Last Evidence <UpArrow />
             </Text>
           </Flex>
-        </>
+        </Box>
       )}
     </ScrollTo>
   );