Dev / design updates: typography, colours, button styles, etc. #322
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
added 14 commits
February 6, 2020 18:30
Added `styles/variables.scss`, which `vuetify-loader` uses to override SCSS variable definitions in Vuetify. We can use this as a starting point for implementing the MOVE Design System.
and move the user sign in / sign out button into its own component.
to get some further progress here.
Turns out that Vuetify theming has *excellent* integration with CSS variables, `color` attributes, and other methods of dynamic styling throughout the application - really makes a lot of these tasks easier.
This will allow us to apply button styling changes application-wide (in case these styles ever change).
and button / copy overhaul, plus a "Clear All" action for filters.
There's a bunch of intricate form element work here - this is just the start.
This allows us to accept text entry in the text box, which makes entering dates faster for power users (and also allows for easier keyboard entry).
Last few pieces - only remaining thing here is to restyle the toast.
as per designs. (Still haven't switched over to white-on-black.)
as per mocks. Still a couple of more complex things (e.g. Assign-To selector) that I haven't done yet, but we're getting there.
Finally had a chance to address a couple of bugs in `<FcButton type="secondary">` - we weren't adding the `.fc-button` class properly.
At this point, we've finished all the small bits and pieces, and can tackle some of the larger things (assign-to menu, reporting, etc.)
candu
commented
Feb 18, 2020
Switch `<v-btn>` for `<FcButton>`, use `map-get` instead of hardcoding SCSS variables, testing, and comments.
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.
This PR closes #318 , #319 , and #320 by cutting a broad swath through @shinechaudhuri 's excellent dev / design walkthrough on the Figma mocks.
In the process, we use theming and SASS variables to customize key parts of Vuetify across the entire application, plus a few targeted CSS overrides where needed. These CSS overrides lean on Vuetify's support for generating CSS3 variables based on theme colours.