Refine dapp styling and spacing #53
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/uma/emp-tools/pkxmp3pew |
|
@nicholaspai can you take a look at this? @chrismaree Looks great to me (although I don't really have an eye for this sorta stuff). One thing I noticed was that a lot of things went from top-bottom to being side-to-side. Just curious why you made that decision? I could see someone arguing that top-bottom is better for entering numbers because it feels more "mathy". But once again, I'm not super opinionated -- more curious. |
| <Typography variant="h4"> | ||
| <i>EMP Tools</i> | ||
| </Typography> | ||
| <Typography variant="h4">⚒️⚡️EMP Tools</Typography> |
There was a problem hiding this comment.
@mrice32 @kendricktan @adrianmcli @daywiss Please suggest other emoji's here or forever hold your peace! (until the next PR).
There was a problem hiding this comment.
so you guys can see it more easily it looks like this now:
| @@ -42,6 +42,7 @@ const Manager = () => { | |||
| {method === "deposit" && <Deposit />} | |||
| {method === "withdraw" && <Withdraw />} | |||
| {method === "redeem" && <Redeem />} | |||
| {method === "transfer" && <FalseDoor />} | |||
There was a problem hiding this comment.
I think we should just remove this option. Here and in ManagePosition/MethodSelector
There was a problem hiding this comment.
We do actually want it though, no? I've created an issue to track this: #63
There was a problem hiding this comment.
Yes eventually but for now why not just remove it?
| @@ -130,7 +128,7 @@ const Deposit = () => { | |||
| : startingCR; | |||
| const resultingCRBelowGCR = resultingCR && gcr ? resultingCR < gcr : null; | |||
| const fastWithdrawableCollateral = | |||
| collateral && tokens && gcr ? (collateral - gcr * tokens).toFixed(2) : null; | |||
| collateral && tokens && gcr ? (gcr * tokens - collateral).toFixed(2) : null; | |||
There was a problem hiding this comment.
previously the fastWithdrawableCollateral was showing me a negative value. see screenshot
so I swapped it around.
Thinking about this again now this is because my position is below the GCR! that's why it's negative. there is 0 that I can fast withdrawal. I'll change this to say if < 0 then it should = 0 so there is no negative case.
There was a problem hiding this comment.
Yes I agree. This should be changed to:
const fastWithdrawableCollateral =
collateral !== null && tokens !== null && gcr !== null
? (collateral < gcr * tokens ? 0 : (collateral - gcr * tokens).toFixed(2))
: null;
Signed-off-by: Christopher Maree <[email protected]>
Mainly because it felt like a more consistent and clean use of space. I tried to make all inputs looks the same throughout the app and to my eye it looks a fair amount better. |
|
@nicholaspai I've implemented your nits and added some additional cleanups. Some things I have chosen to leave for later PRs. |
Signed-off-by: Christopher Maree <[email protected]>
Signed-off-by: Christopher Maree <[email protected]>
I personally like the horizontal layout but have no reason why besides aesthetics |
* Add dynamic links to exchanges to buy collateral or synthetic tokens (#50) Signed-off-by: Nick Pai <[email protected]> * Distinguish between Staging and Prod sites (#59) * Refine dapp styling and spacing (#53) * Updated styling * nits Signed-off-by: Christopher Maree <[email protected]> * Updated favicon * Fixed nits Signed-off-by: Christopher Maree <[email protected]> * Fix EMP Management features (#55) Signed-off-by: Nick Pai <[email protected]> Co-authored-by: Chris Maree <[email protected]>
This PR refines the dapp styling, spacing and general wording to be more consistent and "clean". Pretty much every page in the dapp has some kind of change implemented. Please see the preview to see these changes effectively.