Skip to content

swap deck card layout simplification + swipe interaction polish#16

Merged
moehdotdev merged 1 commit into
mainfrom
dev
Mar 8, 2026
Merged

swap deck card layout simplification + swipe interaction polish#16
moehdotdev merged 1 commit into
mainfrom
dev

Conversation

@moehdotdev

Copy link
Copy Markdown
Owner

this pr refactors the swap deck UI on the home page to simplify the card layout, remove placeholder content, and improve swipe interaction behavior. the update focuses on making the swipe experience cleaner, more responsive, and visually consistent.

swap deck layout refactor

removed placeholder banners
the previous swap card contained multiple nested placeholder banner sections that were not related to the swipe functionality.

changes:

  • removed repeated featured banner sections inside the swipe card
  • removed unnecessary wrapper sections and nested card elements
  • simplified the swap deck structure to a single focused card

result:
the swap deck is now cleaner, easier to maintain, and focused purely on the swipe interaction.

card container improvements

layout simplification
the swipe card container was restructured to improve alignment and spacing.

changes:

  • replaced the complex grid layout with a centered container
  • constrained the swipe deck width using a max-w-4xl container
  • added horizontal padding for large screens (lg:px-24)

result:
the swipe deck is now centered on the page and scales better across screen sizes.

swipe interaction improvements

pointer interaction handling
the swipe gesture logic was preserved but reorganized for better readability and structure.

behavior:

  • pointer down captures swipe start position
  • pointer move tracks drag distance
  • pointer up triggers swipe evaluation
  • pointer cancel resets the swipe state

result:
swiping behavior remains the same but the implementation is easier to understand and maintain.

card animation behavior

drag feedback improvements
the swipe card continues to rotate and translate during drag gestures.

animation:

  • horizontal translation based on drag distance
  • slight rotation proportional to drag movement
  • transitions disabled during active swipe and restored afterward

result:
the swipe interaction feels smooth and responsive.

visual feedback for swipe actions

like / dislike indicators
visual feedback appears during drag gestures to show swipe intent.

changes:

  • LIKE indicator appears when dragging right
  • DISLIKE indicator appears when dragging left
  • indicators remain hidden until swipe threshold is reached

result:
users receive clearer feedback when performing swipe gestures.

card stacking effect

visual depth enhancement
added layered background elements under the swipe card.

changes:

  • two subtle background layers placed under the main card
  • layers use primary color transparency
  • positioned slightly below the main card

result:
creates a lightweight stacked-card effect similar to swipe-based apps.

overall impact

this refactor improves the swap experience by:

  • removing unnecessary placeholder UI
  • simplifying the swap deck layout
  • centering the swipe interaction area
  • improving swipe feedback visuals
  • adding a subtle stacked card effect
  • making the component easier to maintain

@moehdotdev moehdotdev merged commit 81ad117 into main Mar 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant