chore: improve inputs and outputs lists#388
Conversation
src/components/tx/TxData.js
Outdated
| if (idx in this.props.spentOutputs) { | ||
| return ( | ||
| <span> | ||
| // TODO for some reason, bold does not work with SF Pro |
There was a problem hiding this comment.
@pedroferreira1 @tuliomir any idea why? I tried all options (bold, strong, 700, etc). I believe all text we have as bold on the website (that's currently working) uses Mona Sans font, not SF Pro.
There was a problem hiding this comment.
Based on our recent conversation, it seems the bold font files were available on the developer machines that implemented these changes ( and also on mine, as I couldn't reproduce the error ), but were not available in the repository for all users.
Adding those to the repository will probably solve this issue.
There was a problem hiding this comment.
Fixed by adding the font file (src/assets/fonts/SFPRODISPLAYBOLD.OTF) and definition on scss.
| .table-details td { | ||
| color: var(--purple-text); | ||
| padding: 20px 10px; | ||
| padding: 20px 0px; |
There was a problem hiding this comment.
Removed the padding from the lists. It's not according to Ana's design, but I personally think it looks better.
Original
New
| gap: 2px; | ||
| align-items: center; | ||
| font-size: 14px; | ||
| font-size: 16px; |
There was a problem hiding this comment.
The original design has both this and the timestamp column as 14px. However, we currently use 14px for this and 16px for the timestamp. Since both can use 16px, it's better for usability.
src/components/tx/TxData.js
Outdated
|
|
||
| const renderNewUiDivList = hashes => { | ||
| const renderTxListWithSpacer = hashes => { | ||
| const obj = hashes.map( h => <Link className="fs-14" to={`/transaction/${h}`}>{h}</Link> ); |
There was a problem hiding this comment.
Increased font size to 14px to improve usability. It was too small before.
Original
New
| return ( | ||
| <div className={`container-drop-div ${open ? 'container-drop-div-open' : ''}`}> | ||
| <div className="container-drop-header"> | ||
| <div className="container-drop-header" onClick={click}> |
There was a problem hiding this comment.
note(non-blocking): This behavior was supposed to be fixed in #378, but an issue with overlays postponed it.
I'm sharing this here because I believe there are still some places where this kind of overlay issue is still happening, and in these cases the container-drop-header click event will seem not to be working, breaking the manual QA.
I couldn't find precisely where to open an objective issue about it, but will do it soon.
There was a problem hiding this comment.
I don't understand. This makes the whole dropdown header row clickable. Is it supposed to be fixed in #378?
There was a problem hiding this comment.
We currently have some "ghost" divs with a high z-index that block the click behavior of some elements on the screen.
This is the issue that was partially solved in 378. However, every now and then I try to click some element on screen and notice it's not working. Just a small scroll up or down is enough to avoid this problem.
During an eventual QA, this issue might be mistaken for a bug on your code on the click behavior of the header row, and that's why I brought it here: to clarify the actual source of the problem.
obiyankenobi
force-pushed
the
chore/improve-utxos
branch
from
2508a42 to
5f32157
Compare
| return ( | ||
| <div key={token.uid}> | ||
| const obj = this.state.tokens.map(token => ( | ||
| // TODO I don't think we have a TokenMarker here on Figma. Remove? |
There was a problem hiding this comment.
@tuliomir is that the case? Should we remove TokenMarkers?
There was a problem hiding this comment.
I believe TokenMarkers were not considered in the current design.
We should send examples of marked tokens to the designer to have a new version of the figma considering them, and then we remove or adapt the TokenMarker elements accordingly.
Do you agree with this approach?
github-project-automation
bot
moved this from In Progress (Done)
to In Review (WIP)
in Hathor Network
github-project-automation
bot
moved this from In Review (Done)
to Waiting to be deployed
in Hathor Network
3 participants
Acceptance Criteria
Security Checklist
Screenshots