Commit Graph

15 Commits

Author SHA1 Message Date
John Cowen a686404ccd
ui: Fix brand coloring for inline-code plus docs (#11578)
* ui: Fix brand coloring for inline-code plus docs

Also use --tones instead of --black/--white (#11601)

Co-authored-by: Evan Rowe <ev.rowe@gmail.com>
2021-11-23 18:32:11 +00:00
John Cowen dae93f8a9c
ui: Fix up socket icon (#11234) 2021-10-11 14:37:05 +01:00
John Cowen 2200cde988
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200)
From an engineers perspective, whenever specifying colors from now on we should use the form:

```
color: rgb(var(--tone-red-500));
```

Please note:

- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.

Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)

There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 19:21:11 +01:00
John Cowen 7639cc8797
ui: Adds Flight icons to our icon set (#11097)
* ui: Adds Flight icons to our icon set

This commit doesn't actually add anything to the UI, rather just makes
the flight icons available for use.
2021-09-27 18:26:42 +01:00
Kenia 01ec8d1419
ui: Add Vault as a Service External Source (#10769) 2021-08-04 18:22:43 -04:00
Kenia a8f1f28785
ui: Add socket icon for UDS (#10573) 2021-07-12 09:28:01 -04:00
John Cowen 6d8dc8a09b
ui: Rename icons for consistency and remove unused icons (#10311)
* ui: Standardize logo naming

According to structure it should always be logo-name not name-logo

* Make sure all our logos use logo-name format

* Upgrade to @hashicorp/structure-icons 1.9.0

* Add `-color` to be consistent with other logos

* Add ms logo back in

* Remove all the old `*-color` icons from before when we got masks

* Add missing files

* Missed glimmer extend name change
2021-06-22 18:56:17 +01:00
John Cowen 93c5780fab
ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298)
* ui: Move all our icons to use CSS custom properties

The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small.

We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available.

This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use.

This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit)

Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons)
2021-06-21 11:54:58 +01:00
John Cowen 07496c0180
ui: Adds CRD popover 'informed action' for intentions managed by CRDs (#10100)
* ui: Adds CRD popover 'informed action' for intentions add via CRDs
2021-05-04 17:21:54 +01:00
Hector Simpson 0e9d4ceb0f
Update brand assets (#10081)
* Update header logo and inline icon

* Update full logos + layout on loading screen

* Update favicon assets and strategy
- Switches to serve an ico file alongside an SVG file
- Introduces an apple-touch-icon

* Removes unused favicon/meta assets

* Changelog item for ui

* Create component for logo

* Simplify logo component, set brand color

* Fix docs loading state CSS issue
2021-05-03 16:19:09 +01:00
John Cowen d47ccb859f
ui: Improves UI engineering docs (#9875)
Also fixes some typos in with-overlay
2021-03-17 15:58:17 +00:00
John Cowen 5ff1897070
ui: Adds warning icon to side menu when ACLs are disabled (#9864)
* ui: Adds warning icon to side menu when ACLs are are disabled
2021-03-17 11:23:00 +00:00
Kenia da8280f4c5
ui: Auth Methods List view (#9617)
* Create mock-api endpoints for auth-methods

* Implement auth-method endpoints and model with tests

* Create route and tab for auth-methods

* Create auth-method list and type components with styles

* Add JWT and OIDC svg logos to codebase

* Add brand translations

* Add SearchBar to Auth Methods

* Add acceptance test for Auth Methods UI

* Skip auth method repo test

* Changes from review notes

* Fixup auth-method modela and mock-data

* Update SearhBar with rebased changes

* Add filterBy source and sortBy max token ttl

* Update to SortBy MethodName

* Update UI acceptance tests

* Update mock data DisplayNames

* Skip repo test

* Fix to breaking serializer test

* Implement auth-method endpoints and model with tests

* Add acceptance test for Auth Methods UI

* Update SearhBar with rebased changes

* Add filterBy source and sortBy max token ttl

* Update to SortBy MethodName

* Update UI acceptance tests

* Update mock data DisplayNames

* Fix to breaking serializer test

* Update class for search

* Add auth-methods link to sidebar

* Fixup PR review notes

* Fixup review notes

* Only show OIDC filter with enterprise

* Update conditionals for MaxTokenTTL & TokenLocality

* Refactor
2021-02-17 13:56:56 -05:00
John Cowen 6ef7c15e51
ui: New overlays (#9305)
Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
John Cowen c98130cc08
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00