fix: organize colors, modal buttons

[interim17]

Time to review

Medium: mostly reorganization, pruning of unused variables, renaming, etc

Problem

A maintenance PR to organize colors modal button styles, and make some style fixes on modal buttons. Preliminary work to some updates to CustomModal.

With the exception of modal buttons, these changes should not affect current styling anywhere else in the application.

To review:

Inspect the website for inadvertent changes, and inspect the three modals: share trajectory, version info, upload file (screenshots below).

Almost all changes are trivial except for colors.css. In colors I have tried hard to confirm that all removed variables were unused, and no styles were unintentionally changed by reorganization/pruning. Missing something here and messing with other styles unintentionally is the primary concern in review

Theme and styling:

• apply light theme at the custom-modal level, remove from implementing components
• consistently use primary-button and secondary-button class names to match theme, remove antd button type to prevent adding and removing their styling.- use consistent naming scheme for light theme color variables
• removed a large commented styling code block that was "just in case" storage, 3 years old, not current design.
• button fixes, refer to: figma source of truth: darken hover color on secondary buttons, bring version modal button into scheme, make copy button on share trajectory modal primary, make share trajectory error modal secondary, make all modal footer buttons equal width
• removed border and border radius styles in light theme that seem to be inherited correctly from antd defaults and swapped in new variable names, provide vars for color, bg, and border color across the board for consistency

General color maintenance:

• looked for anywhere hexes were used directly in stylesheets and made variables
• looked for any variables that were not currently used anywhere, removed them. All removed/renamed variables are listed below for confirmation
• changed all instances of "grey" to "gray" not a huge deal but we did have both dark-blue-grey and dark-blue-gray defined and it also makes searching the repo more reliable if we are consistent
• make hexes consistently lower case

removed unused css vars:

--dark-blue-grey
--viewer-btn-border-on
--border-gray
--background-dim-gray
--background-dark-gray
--light-theme-button-purple
--light-theme-button-light-gray
--light-theme-input-border-highlight
--dark-theme-btn-disabled-color
--dark-theme-btn-primary-text
--dark-theme-btn-disabled-bg
--dark-theme-slider-color

renamed/reused: (using primary and secondary now to match UX usage)

--light-theme-btn-default-bg
--light-theme-btn-default-color
--light-theme-btn-default-border
--light-theme-btn-default-hover-bg
--light-theme-btn-default-hover-color
--light-theme-btn-default-hover-border
--light-theme-btn-default-disabled-bg
--light-theme-btn-default-disabled-color
--light-theme-btn-default-disabled-border

Screenshots (optional):

Old:

New:

Old:

New:

Old:

New:

Old:

New:

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	73.27%	603/823
🟡	Branches	68.38%	80/117
🔴	Functions	40.31%	79/196
🟡	Lines	71.73%	538/750

Test suite run success

99 tests passing in 7 suites.

Report generated by 🧪jest coverage report action from eba4d9744a73d208bb7034921d6ec6e1c2ac6201

[meganrm]

When I compared these to the design, the x in the modal looks farther away from the right edge in your build. I think this is probably the default antd positioning, but just FYI

[meganrm]

When I compared these to the design, the x in the modal looks farther away from the right edge in your build. I think this is probably the default antd positioning, but just FYI

suggestion: add justify-content: center; to .style__modal--vTNFd .ant-modal-close-x

[meganrm]

All the secondary buttons lose their outline on focus:

Ooops, I had a type in my primary button focus selector, it was actually targeting focused secondary buttons. I think that fixed it.

[interim17]

When I compared these to the design, the x in the modal looks farther away from the right edge in your build. I think this is probably the default antd positioning, but just FYI

You're right, I have a fix for that lined up in my next set of changes. Used your justify-content suggestion though, can see about the other fix later.