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.

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

feat: App card's style enhancement #812

Merged
merged 5 commits into from
Oct 11, 2023
Merged

Conversation

LinaYahya
Copy link
Contributor

  • style enhancement includes:
    • extend card content height
    • remove shifting down when selecting an app card
  • toggle selection on card itself
  • add back button from custom app selection

closes #811

@LinaYahya LinaYahya marked this pull request as ready for review October 4, 2023 08:51
@LinaYahya LinaYahya requested a review from spaenleh October 4, 2023 08:51
@spaenleh spaenleh temporarily deployed to development October 6, 2023 12:59 — with GitHub Actions Inactive
@spaenleh
Copy link
Member

@LinaYahya
I took the liberty to propose some changes:

  • use outline instead of border to create the selection border
    • this allows to avoid layout shifts and does not affect the box model see below the white outline when there is no border (transparent)

With border:
with_border

With outline
with_outline

  • use Graasp button without re-styling for the "Back to app list"
  • use a stack to create spacing between the form fields
  • remove <br />
  • fuse conditional elements controlled by isCustomApp
  • use Grid2 for grid layout and make number of items responsive (1 when small, 2 when medium, 3 when large)
  • add a description for the custom app card
  • improve AppCard prop to make it more generic and type the function appropriately
  • added some flexbox magic to ensure the app names are at the same height (height: "100%" was not centering the card content)

@spaenleh spaenleh merged commit 33dd377 into main Oct 11, 2023
3 checks passed
@spaenleh spaenleh deleted the 811-app-card-style-enhancement branch October 11, 2023 05:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

App Card style Enhancement
2 participants