UI Typography/Layout Fixes. #826
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…t, routes/page, hero, spinner. Cleaned up the css in spinner. Added global css file with theme variables and other global overrides. Sanitized margins, creates minor breaking changes that will be cleaned up later in this branch.
This was
linked to
issues
Oct 2, 2022
mike-winberry
changed the title
mike-winberry
changed the title
added 3 commits
October 1, 2022 23:31
…package component accordion list to match design using newly created AccordionComponent. Fix layout in configure/+page.svelte to match design. Create YamlCode component to display the yaml correctly. Cleaned up and sectioned initialize/+layout.svelte.
…or. Update package-component with the custom header styles. Updated initialize/+layout.svelte with initSection and pageHeader classes. Update initialize/+page.svelte: moved initSection css class definition to initialize layout. Remove aria label from sections. Add span with aria-hidden=true to hidden icon. Update review/+page.svelte: Add fix layout and typography to match configure page.
6 tasks
added 5 commits
October 3, 2022 10:13
…eate new divider component
… package-card to package-details-card. Update package-component-accordion to match design and flex properly. Update package-details-card class names. Add material symbols.
…t/clear functions. Update src/internal/packager/deploy.go with calls to set the deploying components when they are set using the deployedComponents accessors added in src/config. Create src/internal/api/components/list.go with method to get the deploying components from config. Update src/internal/api with the new components api list method. Update src/ui/lib/api.ts with the new deploying components list api call. Update deploy page to show live updates of the components installed. Update deploy page typography and formating. Create @ui/routes/initialize/deploy/deploy-utils.ts with helper methods for polling and updating the deploy page.
Madeline-UX
previously approved these changes
Oct 5, 2022
added 4 commits
October 5, 2022 16:50
…on, and page-header. Move page-* css from initialize/layout to app.css. Update theme secondary color to match design. Update icon.svelte with the rocket icon. Create packages +layout. Update packages page to better match the design given the components we currently have.
…accordion to properly display aria-pressed only when an optional component is selected.
mike-winberry
changed the title
jeff-mccoy
reviewed
Oct 6, 2022
|
Overall UI changes look good, I want to take a bit of a deeper dive on the deployment streaming process. Also ran into an issue, the logging/gitserver components said they would deploy but didn't actually deploy (UI said everything was successful) so I'll mess with. that some tomorrow too. Still seeing some odd behavior on load around no data conditions; e.g. after the deployment succeeded, clicking the zarf logo (home button) put things in a weird state and required a hard refresh to show the install package. |
|
Another issue I ran into was not having an init package available just kind of broke |
|
Some screenshots from testing, things are looking much more polished:
|
jeff-mccoy
reviewed
Oct 7, 2022
There was a problem hiding this comment.
This is a large review. I'd like @Racer159's eyes on it too before approval.
Racer159
requested changes
Oct 7, 2022
…istDeployingComponents
…o deploy-component-accordion IconButton in order to avoid using nth element selector in tests. Updated Unicorn-UI version to avoid using nth element selector.
Noxsios
pushed a commit
that referenced
this pull request
Mar 8, 2023
## Description
- [x] Fix Typography and Layout across application to match design and
use new Unicorn-UI typography component.
- [x] home
- [x] initialize
- [x] configure
- [x] review
- [x] deploy
- [x] finished
- [x] Fix pre-tag first line indentation in package-component.
- [x] Create Accordion Group Component that follows the design.
- [x] add caption to Package Component Section of init/config page.
- [x] globally style caption color.
- [x] Sanitize block margin, margin and padding in app.css.
- [x] Add api call for currently deploying components that can access
private variable stored in config.go that gets populated and cleared
during deploy method.
- [x] Update deploy page to fill the stepper as components are
"deployed" and navigate away from page after pop up with successful
deployment shows.
- [x] Update tests.
## Related Issue
- #799
- #798
- #797
- #802
## Type of change
- UI: Frontend styling/theme
## Check list before merging
- [x] Changes have been linted locally
- [x] Tests passing
Co-authored-by: Megamind <[email protected]>
Co-authored-by: Wayne Starr <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Related Issue
Type of change
Check list before merging