feat(web): Scout version 1.2.0

[ShubhamParkhi]

No description provided.

[netlify]

👷 Deploy request for kleros-scout-app pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	2f21f28

[kemuru]

HOMEPAGE FEEDBACK:

1. the Stats Box is not aligned with the upper component, it has to be aligned on both lower & higher resolutions (desktop)

2. the "Monthly Reward Pool" stat is duplicated, talk with Akhil to determine what we should put there.

3. I just noticed the Footer is not aligned again, lets try to fix this too before release of the new version:

4. the SVGs on the "For Users" contribute section are not changed for the new ones:

5. maybe here on mobile, we can reduce the size of the DIV container so it doesn't occupy that much space (picture 1), same for the button sometimes below the Stats Box (picture 2):

APP FEEDBACK

1. some parts of this text fonts are 0xanium in the Figma, are I think the descriptions in the figma have 24px font-size

2. the "Earn Rewards by Submitting" at the top right is not being highlighted (text-decoration: underline) while "Tags" is being highlighted, lets make ONLY the "Earn Rewards by Submitting" highlighted and nothing else highlighted

3. this

   margin-bottom is too high, lets make it a bit less so the title can be more close to its subtitle

4. the images in CDN are really big (and some are getting a bit outside its box), I think in the Figma they are this big too, but I don't think they should because you can't even see the details, they occupy a lot of real estate from the screen, and you have to click on it in order to see the details correctly anyways (the contract address, the domain name...). So probably talk this with Akhil, in V2 we developed an in-page Attachment viewer, that we can consider using in this page too (picture 2)

5. maybe remove this margin-bottom so the line appears more symmetrical:

6. i think make this font-size a bit smaller so it does not overflow into a new line (im in Macbook), I know this is the font size of the Figma but yeah, either that or making the Overall container a bit bigger, or maybe a mix of both:

7. the submission guidelines button is missing, this one should link to the policy of the current registry, you can take this information from the current entry you are in, and from its policyURI field:

8. i think make these fonts a bit less font-weight

[kemuru]

I think the Rewards Section should be its own Page, with its own folder, so instead of being inside the "Home" page, do it outside, current code:

also when clicking on the "Earn Rewards by Submitting" the URL can be changed to something way more simple, like
http://localhost:1234/#/?page=rewards and nothing else, that way its simpler to disable the highlight on everything else, and enable it for that text I think. you can try some things out until it works

[kemuru]

HOMEPAGE FEEDBACK:

1. change text to "AVG. MONTHLY SUBMISSIONS", just adding an S at the end

2. when we are on "For Builders" section, and on the Step 3, the button is touching the text above, we can solve this by just adding a bit more of margin top conditionally based on the showStats variable? maybe add a parameter to the StyledButtonAnchor styled component on the "HowToSubmit" component, like:

const StyledButtonAnchor = styled(ButtonAnchor)<{ showStats: boolean }>`
  margin-top: ${({ showStats }) =>
    showStats ? responsiveSize(24, 0) : responsiveSize(24, 48)};

  ${landscapeStyle(
    () => css`
      padding-right: 0;
    `
  )}
`

and then below in the return pass the parameter as:

<StyledButtonAnchor
        {...{ showStats }}
        href={buttonLink}
        target="_blank"
        rel="noopener noreferrer"
      >
        <Button>{buttonText}</Button>
      </StyledButtonAnchor>

APP FEEDBACK:

comparing the Figma's rewards page:

with our current page:

there are some improvements that come to mind:

1. the titles are in "Avenir" font, while the descriptions are in "0xanium" font, check closely in the figma

2. the overall font-size of this page does come off as too big compared to the rest of the website. maybe decrease every font-size a bit, at least 4px decrease, or even more, you can judge by yourself what looks better. try to simulate the Figma "feel", but dont use the font-sizes in Figma, they're too big, make it make sense with the rest of the website's proportions

3. change the middle text for "The reward pool consists of 300,000 PNK (~$7680 as of June 25, 2024)" instead of the outdated one in February

4. there needs to be a bit more margin between these sections:

5. is the "Not EVM address" check working on the CDN registry? I see its working on "Tags" and "Tokens" but i dont get the error on the CDN one

[kemuru]

lower the debounce timing to 500, not only in this component, in CDN and Tags registries too

[kemuru]

lets not close this modal if you click outside. there is sensitive information so its important the user does not accidentally loses everything by clicking outside.

in this specific modal only close it if you click on the X, like it was before

[kemuru]

lets add flex-wrap: wrap; on AddHeader too, because on mobile the add modal looks like this:

and with the fix:

[kemuru]

the CDN contract address validation doesn't seem to work. let's investigate that. example:

2024-06-27.14-57-55.mp4

[kemuru]

change name to StyledUploadIcon

choosing exact and descriptive and detailed and self-explanatory names for variables is very important

[kemuru]

change import to
import UploadIcon from 'tsx:svgs/icons/upload.svg'

[kemuru]

show the fileURI field of an evidence, which is the attached file of an evidence, in case there is any. Right now we are not showing it, we are showing it in curate.kleros.io but not here:

we can show it right after the Description

let's revert all these screenshot size-related changes in CDN you did in this PR and ignore the Figma for now. the issue is that you can't see the details of the screenshot, they're too small, and they occupy a lot of real estate of the screen at the same time.

I thought of a better way to fix this, which is using the FileViewer that we recently did for V2. This way, when we click on any IPFS link (token icons, CDN screenshots, evidence attachments...) instead of opening the file in a new tab like we do now, this component would be casted. Visual representation below:

Screen.Recording.2024-06-27.at.16.32.08.mov

[kemuru]

following the tasks in notion https://www.notion.so/kleros/Kleros-Scout-1-2-0-c1ba54e4777b4c98abf9f06a92cd2de6

there is this one:

this is quite a big task, but I think we should have it finished and feature complete before merging this PR. you can do this last, once you have addressed every comment I put above.

in addition before merging this PR make sure every task in the notion is also done

[kemuru]

these Skeletons on the images of the CDN page have to be the exact same size as the images, or they will look like this:

Screen.Recording.2024-07-04.at.20.59.53.mov

lets add the Return button too

I'd change this for just "File" actually:

can we switch the order here (First the "Clip" icon, then the "View Attached File" text

I feel like the margin is too high (picture 1), lets try eliminating the margin-bottom of this div? (picture 2)

[kemuru]

delete the ~src/