Skip to content
This repository has been archived by the owner on Oct 20, 2023. It is now read-only.

Rename Tokens - Light Theme Prep #67

Merged
merged 11 commits into from
Jan 19, 2023

Conversation

arniebradfo
Copy link
Collaborator

@arniebradfo arniebradfo commented Jan 18, 2023

🗣 Description

I've updated the names of the tokens to make them a bit easier to read in-code and to match our Figma mockups style names.

💭 Motivation and context

The Tokens values were previously all one massive object that included all the Blueprint tokens in addition to the CoreTokens that are most used. This PR separates the tokens into 2 Token constants:

  1. CoreTokens what should be used in 90% of cases. This now contains much fewer options with better naming
  2. AdvancedTokens contains all the Blueprint Tokens and anything else technical

The CoreTokens have also now been mapped to css --custom-properties to support light/dark theming! The theme values have not been fully set up yet, but they do work as a proof of concept (see screenshot). There is also a theme switch toggle that is currently commented out. It will appear in the SettingsForm under the ⚙️ left bar button (if you uncomment for testing).

🧪 Testing

Please take a look at the SettingsForm and settings mobx and review how the settings are applied and saved. I mostly copied how the timezone was done. I will reference specific lines in comments.

📷 Screenshots (Not in this PR)

Screen Shot 2023-01-18 at 8 23 59 AM

The colors for most of the app still need tuning. The Graph and timeline don't yet have theme values applied.

checked={state.theme === 'dark'}
onChange={state.setTheme}
label={'Dark theme'}
{/* <Switch // Uncomment to test light theme
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Theme toggle is commented out here. Uncomment to preview the Light Theme.

@arniebradfo
Copy link
Collaborator Author

@sang2925, @ccarpenter28, and @GoldingAustin,
Not sure why the test is failing. I didn't change anything in the UI other than colors. Could this failure have come from develop?

@sang2925
Copy link
Collaborator

@arniebradfo the tests are no longer failing.

@GoldingAustin GoldingAustin merged commit 731596c into develop Jan 19, 2023
@GoldingAustin GoldingAustin deleted the rename-tokens--light-theme-prep branch January 19, 2023 05:53
GoldingAustin added a commit that referenced this pull request Jan 19, 2023
* expand multiCommands, route to previous expanded command when collapsing the last command

* update commandBreadcrumb beaconSelect to support expanding multi commands

* be able to expand multi commands, with collapse all button

* clean up

* removed old expand/collapse button

* Explicitly pkg-fetch before running yarn run release, to avoid issues observed building in docker on [some] intel macs.

* Add a "release:all" test for CI

* Fav a comment won't add user

* Update build.yml

Remove release step

* Update build.yml

Remove extra whitespace

* Tests to verify command and beacon counts (#45)

* Cypress/blue team test (#48)

* upgrade cypress 11.0.1

remove txt files

downgrade to cypress 10.11, 11 seems to be broken

upgrade to cypress 11

change to chromium

revert commandtypes test

more blue team tests

blue team tests

blue team ci/cd command

fix graphql test imports

moving files to separate blueteam / redteam testing

upgrade docker images, caching cypress

upload raw logs

fixture file, graphql upload campaign WIP

test

upgrade cypress to 10.11.0

* reduced number of parallelization (+10 squashed commits)
Squashed commits:
[bf87ede] going to skip select beacon, select host test
[666d32f] forgot to uncomment
[1553970] changing cache
[351c86e] edit select beacon blue team test
[b61831c] fix flaky select host and beacon tests
[3cdc4d9] test
[5274cc2] upgrade cypress, edit workflow
[c668831] waits for flaky tests
[8381d2e] workflow update
[72a80f5] make project id public

* reduce to 0 matrix

* comment out whole workflow

* upgrade cypress to 11.2.0

* fix broken blue team checkscreenshot test

* Add error message to http server close (#51)

Closes #50

* query full CommpandGroupIds list, then query paginated commandGroups

* add useEffect for command/commentsBox scroll, temp queryCommands

* Database Migrations (#54)

* fixed isLoading / undefined query issue

* Set database mode to dev_persist in parsing machine when not in production to prevent database from being cleaned on upload of log files (#56)

* Feature/543 timeline show time on drag (#57)

* Timeline grabber - render time below grabber when dragging/clicking

* take grabber time label out of svg and restyle

* Feature/ambiguous data (#49)

* Added code to only show link display name box if a link is being added and to pull the display name if a link has been created

Removed old unused files and changed search on addBeaconSelectOrSuggest to search both display name and beacon name in prep for PR

Added comments to explain some code choices and have delete, edit and add links all working

Fix link mutation for editing and deleting

having issue with deleted comments deleting all a beacon's commands

Added delete link mutation to the comment box code

Add delete link mutation

Stuck with select and got the menu looking closer to correct. Ready to schedule time to discuss next steps

Have mostly functional without search using Select, about to look into popover as alternative

Have a popover working adn am about to try select instead

* Update global operators graphql query & mutation auth (#58)

* Add custom auth middleware for global operator graphql query and mutation
Update login form with feedback that creating a new user is disabled
Closes #55

* Fix commandGroup default query

* fix progressBar for no comments group

* Update graphql models

* Feature/343 timeline hover bar to see beacon data (#60)

* Timeline bars onHover and onClick labels via popover

* bar onHover/onClick state to ctrl labels, update route when clicking beacons

* click to show beacon list with router update when clicking listed beacon

* Use new mikro-orm checkMigrationNeeded method to prevent unnecessary migration attempts (#59)

* docs(changeset): Exposing BeaconMeta source LogLine

* fix comments tab - command explanding/collapsing bug

* change to headed cypress

* Make migration imports static for pkg build (#66)

* Rename Tokens - Light Theme Prep (#67)

* add build alias to package scripts

* REVERT THIS: disabled husky

* updateTokenNames

* rename and repair tokens

* consolidate utility styles

* rename styles.ts files

* reorg client/ui-styles package

* setting up theme vars

* add theme switching toggle to settings

* hide light theme so it doesn't end up in develop

* Revert "REVERT THIS: disabled husky"

This reverts commit 388b45a.

Co-authored-by: James Bradford <j.bradford@pnnl.gov>

* 0.8.2

Co-authored-by: Li, Huiqing <forqing@gmail.com>
Co-authored-by: Matthew Galligan <matthew.galligan@cisa.dhs.gov>
Co-authored-by: Yablargo <matthew.galligan@gmail.com>
Co-authored-by: Courtney Carpenter <100231016+ccarpenter28@users.noreply.github.com>
Co-authored-by: Huiqing Li <75810860+sharplessHQ@users.noreply.github.com>
Co-authored-by: Sebastian Ang <22081109+sang2925@users.noreply.github.com>
Co-authored-by: BrittDavis <brittany.f.davis@gmail.com>
Co-authored-by: Devan Farrell <devanfarrell@users.noreply.github.com>
Co-authored-by: James Bradford <arniebradfo@gmail.com>
Co-authored-by: James Bradford <j.bradford@pnnl.gov>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants