Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix alignment for unlock screen in modal #4423

Closed
markmhendrickson opened this issue Oct 25, 2023 · 5 comments · Fixed by #4569
Closed

Fix alignment for unlock screen in modal #4423

markmhendrickson opened this issue Oct 25, 2023 · 5 comments · Fixed by #4569
Assignees
@pete-watters

Comments

@markmhendrickson
Copy link
Collaborator

It seems to big on the left and right:

Image
@pete-watters pete-watters mentioned this issue Oct 25, 2023
Closed
@markmhendrickson
Copy link
Collaborator Author

Padding seems fixed but content still needs left-alignment?

Screenshot 2023-11-21 at 12 55 31

@markmhendrickson markmhendrickson changed the title Reduce viewport padding for unlock screen in modal Fix alignment for unlock screen in modal Nov 21, 2023
@markmhendrickson
Copy link
Collaborator Author

The continue button should also be aligned against the bottom of the viewport instead of leaving this margin?

Screenshot 2023-11-22 at 14 00 18

pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: give more margin to Continue button in extension mode, closes #4423
89803c3
pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: give more margin to Continue button in extension mode, closes #4423
94a37a3
pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: align heading text left, closes #4423
9a6892d
pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: give more margin to Continue button in extension mode, closes #4423
c560203
pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: align heading text left, closes #4423
22cb065
pete-watters added a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: align heading text left, closes #4423
5da5f35
@pete-watters pete-watters linked a pull request Nov 27, 2023 that will close this issue
fix: Improve visual display of unlock screen #4569
Merged
@pete-watters
Copy link
Contributor

This issue continues on from #4435.

The padding was fixed elsewhere so I:

  • gave more margin to the Continue button to push it down the page
  • left aligned the heading text

Screenshot 2023-11-27 at 06 30 10

Moving stuff on the page like this isn't ideal and this will be fixed properly by adding containers

I also couldn't find any design for small versions of this screen. We have design for full screen but not for extension width https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=8109%3A81636&mode=design&t=hRL9HhEHe0fB0DlF-1

github-merge-queue bot pushed a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: give more margin to Continue button in extension mode, closes #4423
8d61e93
github-merge-queue bot pushed a commit that referenced this issue Nov 27, 2023
@pete-watters
fix: align heading text left, closes #4423
31ddc89
@pete-watters pete-watters mentioned this issue Nov 28, 2023
Merged
kyranjamie pushed a commit that referenced this issue Nov 28, 2023
@semantic-release-bot
chore(release): 6.17.0
2754466 
## [6.17.0](v6.16.1...v6.17.0) (2023-11-28)

### Features

* extended add-network page with the option to add bitcoin network too ([870574a](870574a))
* support bitcoin ledger, closes [#2893](#2893) ([8a81f58](8a81f58))
* updated dlc-tools package, modified accept bitcoin contract rpc params ([0742719](0742719))

### Bug Fixes

* account circle numbers and delete unused code ([a6588dc](a6588dc))
* add background state for ledger connect modal ([41fef37](41fef37))
* align heading text left, closes [#4423](#4423) ([31ddc89](31ddc89))
* allow users to click input when populated, closes [#4582](#4582) ([222a854](222a854))
* axios get request for config ([3ad4b06](3ad4b06))
* bitcoin fees tx size calc ([3f5718c](3f5718c))
* filter network dust amounts when sending all ([b7a34a9](b7a34a9))
* fixed previously saved network loading ([c8724b4](c8724b4))
* give more margin to Continue button in extension mode, closes [#4423](#4423) ([8d61e93](8d61e93))
* mark ui bugs ([e9da651](e9da651))
* minor ui bugs ([0095ebc](0095ebc))
* **popup:** avatar circle on stacks transactions ([8dbfefe](8dbfefe))
* provider name in tests ([6b75267](6b75267))
* psbt bare utxo signing ([954e707](954e707))
* qr code ([b035f20](b035f20))
* remove not working onFocusborder, to be fixed in [#4583](#4583) ([cddf09b](cddf09b))
* sign out and close all tabs on create wallet, closes [#4517](#4517) ([0b47dea](0b47dea))
* skip bitcoin contract tests ([83c4d04](83c4d04))

### Internal

* fix type errors ([98f5ddf](98f5ddf))
* icon tokens ([91403d7](91403d7))
* migrate icons ([fbc6580](fbc6580))
* post-release merge back ([c3c7bd1](c3c7bd1))
* remove bitcoinjs-lib from inscription send ([97854b0](97854b0))
* remove patch file ([be8b040](be8b040))
* remove remaining old icon libraries ([1fa4e6c](1fa4e6c))
* remove stacks ui ([99fb117](99fb117))
* remove unneeded parent button, closes [#4550](#4550) ([c44a7bb](c44a7bb))
* update font and color for receive asset ([800fa3e](800fa3e))
* update panda ([2807b50](2807b50))
* update readme ([c86f2ab](c86f2ab))
* use tokens for border radius ([b387903](b387903))
@markmhendrickson markmhendrickson mentioned this issue Nov 30, 2023
Closed
@markmhendrickson
Copy link
Collaborator Author

@pete-watters for consideration as part of your related containers work:

This screen seems a bit off still in that the header copy doesn't have the same left padding as the input, and the space between that copy and the input vertically looks extraordinarily big to me now.

I'm not sure where this screen's UI stands in Figma atm, but if helpful, we can revert to creating a new issue with implementation detail tweaks if you prefer.

Screenshot 2023-12-08 at 14 58 12

@pete-watters
Copy link
Contributor

Thanks Mark. I'll try and improve this in #4370 but as mentioned here there is no visual design for this which would help if we want things to be precise.

@pete-watters pete-watters mentioned this issue Dec 22, 2023
Closed
pete-watters added a commit to Nithishvb/extension that referenced this issue Jan 17, 2024
@pete-watters
fix: give more margin to Continue button in extension mode, closes le…
42f8022 
…ather-io#4423
pete-watters added a commit to Nithishvb/extension that referenced this issue Jan 17, 2024
@pete-watters
fix: align heading text left, closes leather-io#4423
f4077b0
pete-watters pushed a commit to Nithishvb/extension that referenced this issue Jan 17, 2024
@semantic-release-bot @pete-watters
chore(release): 6.17.0
1884b79 
## [6.17.0](leather-io/extension@v6.16.1...v6.17.0) (2023-11-28)

### Features

* extended add-network page with the option to add bitcoin network too ([870574a](leather-io@870574a))
* support bitcoin ledger, closes [leather-io#2893](leather-io#2893) ([8a81f58](leather-io@8a81f58))
* updated dlc-tools package, modified accept bitcoin contract rpc params ([0742719](leather-io@0742719))

### Bug Fixes

* account circle numbers and delete unused code ([a6588dc](leather-io@a6588dc))
* add background state for ledger connect modal ([41fef37](leather-io@41fef37))
* align heading text left, closes [leather-io#4423](leather-io#4423) ([31ddc89](leather-io@31ddc89))
* allow users to click input when populated, closes [leather-io#4582](leather-io#4582) ([222a854](leather-io@222a854))
* axios get request for config ([3ad4b06](leather-io@3ad4b06))
* bitcoin fees tx size calc ([3f5718c](leather-io@3f5718c))
* filter network dust amounts when sending all ([b7a34a9](leather-io@b7a34a9))
* fixed previously saved network loading ([c8724b4](leather-io@c8724b4))
* give more margin to Continue button in extension mode, closes [leather-io#4423](leather-io#4423) ([8d61e93](leather-io@8d61e93))
* mark ui bugs ([e9da651](leather-io@e9da651))
* minor ui bugs ([0095ebc](leather-io@0095ebc))
* **popup:** avatar circle on stacks transactions ([8dbfefe](leather-io@8dbfefe))
* provider name in tests ([6b75267](leather-io@6b75267))
* psbt bare utxo signing ([954e707](leather-io@954e707))
* qr code ([b035f20](leather-io@b035f20))
* remove not working onFocusborder, to be fixed in [leather-io#4583](leather-io#4583) ([cddf09b](leather-io@cddf09b))
* sign out and close all tabs on create wallet, closes [leather-io#4517](leather-io#4517) ([0b47dea](leather-io@0b47dea))
* skip bitcoin contract tests ([83c4d04](leather-io@83c4d04))

### Internal

* fix type errors ([98f5ddf](leather-io@98f5ddf))
* icon tokens ([91403d7](leather-io@91403d7))
* migrate icons ([fbc6580](leather-io@fbc6580))
* post-release merge back ([c3c7bd1](leather-io@c3c7bd1))
* remove bitcoinjs-lib from inscription send ([97854b0](leather-io@97854b0))
* remove patch file ([be8b040](leather-io@be8b040))
* remove remaining old icon libraries ([1fa4e6c](leather-io@1fa4e6c))
* remove stacks ui ([99fb117](leather-io@99fb117))
* remove unneeded parent button, closes [leather-io#4550](leather-io#4550) ([c44a7bb](leather-io@c44a7bb))
* update font and color for receive asset ([800fa3e](leather-io@800fa3e))
* update panda ([2807b50](leather-io@2807b50))
* update readme ([c86f2ab](leather-io@c86f2ab))
* use tokens for border radius ([b387903](leather-io@b387903))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pete-watters pete-watters

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Improve visual display of unlock screen leather-io/extension
2 participants
@markmhendrickson @pete-watters