Skip to content

Studio: Ensure that buttons in the footer are the same size - #1174

Merged
katinthehatsite merged 1 commit into
trunkfrom
fix/ensure-all-modal-buttons-have-consistent-height
Apr 8, 2025
Merged

Studio: Ensure that buttons in the footer are the same size#1174
katinthehatsite merged 1 commit into
trunkfrom
fix/ensure-all-modal-buttons-have-consistent-height

Conversation

@katinthehatsite

@katinthehatsite katinthehatsite commented Apr 8, 2025

Copy link
Copy Markdown
Contributor

Related issues

Closes STU-325

Proposed Changes

This PR ensures that the Previous and Next / Done buttons have the same height in the What's new modal.

Previously, the buttons did use the same height but the Previous button had an outline added to it which added 2 extra pixels (1 to the top and 1 to the bottom) and made it look slightly bigger. I propose to remove the outline and use border instead to make sure it is included in the box model and is not added on the top of the button.

Testing Instructions

  • Pull the changes from this branch
  • Start the app with STUDIO_WHATS_NEW_SECTION=true npm start
  • Click on Help > What's New in the top bar
  • Once the modal is open, navigate to the second page
  • Confirm that Previous and Next buttons look visually the same

Sidenote: I tried with Tailwind but it was not going anywhere so I decided to use CSS directly.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
@katinthehatsite katinthehatsite self-assigned this Apr 8, 2025
@katinthehatsite
katinthehatsite requested review from a team and ivan-ottinger April 8, 2025 11:45
Comment thread src/index.css
background: white;
}

.components-button.components-guide__finish-button {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is not related, just fixing a small linter issue instead of opening a whole new PR for it

@ivan-ottinger ivan-ottinger left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good. Both buttons have the same height now. 👌🏼

Markup on 2025-04-08 at 13:54:53

@katinthehatsite
katinthehatsite merged commit d720eb1 into trunk Apr 8, 2025
@katinthehatsite
katinthehatsite deleted the fix/ensure-all-modal-buttons-have-consistent-height branch April 8, 2025 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants