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

[TITAN-363] - UI Adjustments #78

Merged
merged 5 commits into from
Jun 1, 2023
Merged

[TITAN-363] - UI Adjustments #78

merged 5 commits into from
Jun 1, 2023

Conversation

RossoMaguire
Copy link
Contributor

Description

This change fixes up some outstanding UI issues that we have identified:

  • The footer is always stuck at the bottom of the pages, specially the pages that can have no content like Search and Cart. Make sure content space has a minimum.
  • Add padding between content and footer
  • Remove bevel on cta buttons
  • I also identified that the charcoal variant wasn't showing a black swatch because that is not a native colour in CSS. So I created a VARIANT_MAP const that the user can extend to map variants to CSS colours.

Testing

  • npm run dev and test the changes listed above in various browsers

padding: 1rem;
min-width: 115px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This just makes all CTA buttons a standard width rather than depending on the text

@@ -1,4 +1,5 @@
.component {
color: var(--wpe--main--color);
background-color: var(--wpe--main--background-color);
min-height: 100vh;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Footer snaps to bottom with this property on the main content wrapper

blue: 'blue',
purple: 'purple',
charcoal: 'black',
red: 'red',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be extended for others that are not CSS colours, here it is charcoal

Copy link
Member

@alvarocavalcanti alvarocavalcanti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seal of Approval

@RossoMaguire RossoMaguire merged commit 0cbdc5b into main Jun 1, 2023
@RossoMaguire RossoMaguire deleted the RossoMaguire/TITAN-363 branch June 1, 2023 09:26
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.

2 participants