starred/pocket-id-pocket-id-1
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-09 14:53:00 +03:00
Code Issues 122 Packages Projects Releases 10 Wiki Activity

[PR #381] [MERGED] feat: modernize ui #848

New Issue
Closed
opened 2025-10-08 00:18:20 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2025-10-08 00:18:20 +03:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/pocket-id/pocket-id/pull/381
Author: @kmendell
Created: 3/24/2025
Status: ✅ Merged
Merged: 3/30/2025
Merged by: @kmendell

Base: main ← Head: feat/ui-redesign

📝 Commits (10+)

  • 1a234eb feat: add fade in animations
  • 5e654c5 add sidebar animations
  • 1efb671 use the sidebar animations on account page
  • fafe759 use consistent animations on all pages
  • 1b1043c update cards on account page
  • 5eb2f12 add link to header logo
  • 9d78477 use correct link for header
  • c6baa65 modernize the passkey list ui
  • 9fe7f65 add animations to login-wrapper
  • 1de076a add sliding animation to login-wrapper(alt login ui is brokecurrently with this new animation

📊 Changes

28 files changed (+845 additions, -510 deletions)

View changed files

📝 frontend/package-lock.json (+6 -6)
📝 frontend/package.json (+57 -57)
📝 frontend/src/app.css (+51 -2)
📝 frontend/src/lib/components/collapsible-card.svelte (+11 -4)
➕ frontend/src/lib/components/fade-wrapper.svelte (+59 -0)
📝 frontend/src/lib/components/form/profile-picture-settings.svelte (+43 -51)
➕ frontend/src/lib/components/glass-row-item.svelte (+75 -0)
📝 frontend/src/lib/components/header/header.svelte (+9 -4)
📝 frontend/src/lib/components/login-wrapper.svelte (+32 -16)
📝 frontend/src/lib/components/ui/card/card-content.svelte (+2 -2)
📝 frontend/src/lib/components/ui/card/card-description.svelte (+1 -1)
📝 frontend/src/lib/components/ui/card/card-header.svelte (+2 -2)
📝 frontend/src/lib/components/ui/card/card-title.svelte (+1 -1)
📝 frontend/src/lib/components/ui/card/card.svelte (+1 -1)
📝 frontend/src/routes/authorize/+page.svelte (+12 -5)
📝 frontend/src/routes/login/+page.svelte (+2 -2)
📝 frontend/src/routes/logout/+page.svelte (+4 -2)
📝 frontend/src/routes/settings/+layout.svelte (+62 -41)
📝 frontend/src/routes/settings/account/+page.svelte (+96 -82)
📝 frontend/src/routes/settings/account/account-form.svelte (+58 -21)

...and 8 more files

📄 Description

So far this is what I've implemented for this:

  • Added Animations for each page.
  • Made the Sidebar sticky and updated the buttons hover state.
  • Updated the My Account page to have a more modern yet separated design.
  • Updated the Passkey List item to be glassy.
  • Added Link back to /account/settings for the header logo.
  • Slide in animation for Login Wrapper
  • Combined Profile Picture into Account Details Card (Left old component and code till we confirm we like this look)
  • Moved the Glassy Row Item to Separate Svelte Component
  • Updated All Cards to use the new 'Depth' Design look.
  • Updated the version of lucide-svelte to 0.483.0

Known Issues

  • Scrollbars popup on the sub-components during the animations... I fought with this all night and could not figure it out.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/pocket-id/pocket-id/pull/381 **Author:** [@kmendell](https://github.com/kmendell) **Created:** 3/24/2025 **Status:** ✅ Merged **Merged:** 3/30/2025 **Merged by:** [@kmendell](https://github.com/kmendell) **Base:** `main` ← **Head:** `feat/ui-redesign` --- ### 📝 Commits (10+) - [`1a234eb`](https://github.com/pocket-id/pocket-id/commit/1a234eb2ad2074a5ad3142ceba5ea649c6bb94b4) feat: add fade in animations - [`5e654c5`](https://github.com/pocket-id/pocket-id/commit/5e654c52d9e19ef74a4ddffbe696fead03fb294e) add sidebar animations - [`1efb671`](https://github.com/pocket-id/pocket-id/commit/1efb671d3d1c29080119f06a98dc12bb2e764806) use the sidebar animations on account page - [`fafe759`](https://github.com/pocket-id/pocket-id/commit/fafe759d7a8198a06e3459bdc0f6afdd4d62709a) use consistent animations on all pages - [`1b1043c`](https://github.com/pocket-id/pocket-id/commit/1b1043c63543de321564c940f8d073a58c0709c2) update cards on account page - [`5eb2f12`](https://github.com/pocket-id/pocket-id/commit/5eb2f12368300d794512825b3496b6a53c47d77f) add link to header logo - [`9d78477`](https://github.com/pocket-id/pocket-id/commit/9d7847782ad221cdbb28beb02e26d7e51de7e8b0) use correct link for header - [`c6baa65`](https://github.com/pocket-id/pocket-id/commit/c6baa65667ef312dfa6760a30490beeb0029e887) modernize the passkey list ui - [`9fe7f65`](https://github.com/pocket-id/pocket-id/commit/9fe7f65d234694d6ad93a3fa5b9036e2442aa744) add animations to login-wrapper - [`1de076a`](https://github.com/pocket-id/pocket-id/commit/1de076aee108ca89cb217ae5e1a90a47ece8eed0) add sliding animation to login-wrapper(alt login ui is brokecurrently with this new animation ### 📊 Changes **28 files changed** (+845 additions, -510 deletions) <details> <summary>View changed files</summary> 📝 `frontend/package-lock.json` (+6 -6) 📝 `frontend/package.json` (+57 -57) 📝 `frontend/src/app.css` (+51 -2) 📝 `frontend/src/lib/components/collapsible-card.svelte` (+11 -4) ➕ `frontend/src/lib/components/fade-wrapper.svelte` (+59 -0) 📝 `frontend/src/lib/components/form/profile-picture-settings.svelte` (+43 -51) ➕ `frontend/src/lib/components/glass-row-item.svelte` (+75 -0) 📝 `frontend/src/lib/components/header/header.svelte` (+9 -4) 📝 `frontend/src/lib/components/login-wrapper.svelte` (+32 -16) 📝 `frontend/src/lib/components/ui/card/card-content.svelte` (+2 -2) 📝 `frontend/src/lib/components/ui/card/card-description.svelte` (+1 -1) 📝 `frontend/src/lib/components/ui/card/card-header.svelte` (+2 -2) 📝 `frontend/src/lib/components/ui/card/card-title.svelte` (+1 -1) 📝 `frontend/src/lib/components/ui/card/card.svelte` (+1 -1) 📝 `frontend/src/routes/authorize/+page.svelte` (+12 -5) 📝 `frontend/src/routes/login/+page.svelte` (+2 -2) 📝 `frontend/src/routes/logout/+page.svelte` (+4 -2) 📝 `frontend/src/routes/settings/+layout.svelte` (+62 -41) 📝 `frontend/src/routes/settings/account/+page.svelte` (+96 -82) 📝 `frontend/src/routes/settings/account/account-form.svelte` (+58 -21) _...and 8 more files_ </details> ### 📄 Description So far this is what I've implemented for this: - Added Animations for each page. - Made the Sidebar sticky and updated the buttons hover state. - Updated the My Account page to have a more modern yet separated design. - Updated the Passkey List item to be glassy. - Added Link back to `/account/settings` for the header logo. - Slide in animation for Login Wrapper - Combined Profile Picture into Account Details Card **_(Left old component and code till we confirm we like this look)_** - Moved the Glassy Row Item to Separate Svelte Component - Updated All Cards to use the new 'Depth' Design look. - Updated the version of lucide-svelte to 0.483.0 ### Known Issues - Scrollbars popup on the sub-components during the animations... I fought with this all night and could not figure it out. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2025-10-08 00:18:20 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
breaking
bug
documentation
feature
needs more upvotes
open to pull requests
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/pocket-id-pocket-id-1#848
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?