Jasmine's Style Notes & Advice

These are not fool proof, but these ideas help me stay somewhat consistent in the UI.

Use rem for your CSS unit.
I think the only things using px are borders or box-shadows.

Use constants whenever possible
This is just a consistency thing so we don't have 5000 variations of grey in the app.

To make a design mobile-friendly, put everything into one column.
This is obviously not the best design, but it will keep the app usable for those who need to use it on their phone for one reason or another. Ideally people won't be using Rode on their phones. Most of the responsive design is focused on enabling tablet and larger devices.

Use the mixins to your advantage
If you need to add some pizazz to a hover, add the transition mixin! If you need to control for screen size, there are mixins for that! If you need to cut off some super long text, there's a mixin for that!

When using a drawer, always return something within the <Drawer></Drawer> tags
If you render a drawer without showing any content, you will not see the drawer slide out or collapse animation; it will just show or hide. Not a super huge deal, but those fancies can make the user feel like the app is working as expected. You can return an empty <div/> or a <Loading/> indicator if you need to fill that space.

Don't forget about styling for the dark theme & light theme
When you style for theme, you have to be aware of which **.module.scss file you are targeting. If your component is a child component using the same stylesheet as a parent component that specifies the theme, you don't need to add the style[theme] class to your child component. However, if you are in a stylesheet that is specific to your component, you will need to pull the theme from context and add the classname at whatever level you deem appropriate (usually the top level tag in the component).

• Example of inheriting theme: the OccurrenceDetails component uses the same stylesheet as it's children components, so those child components, like BuildOccurrenceDetails, can inherit the theme from their parent.
• Example of needing to specify the theme: the DetailsHeader is a child of the Resource and Policy pages, but since it has it's own stylesheet it needs to pull the theme from context and pass it as a class name.

You can use the styles/constants.scss file to help with theming. Any variable starting with $LT_ is a light-theme based color, and should have a $DT_ (dark theme) counterpart. There are varying levels of background and text colors that should enable you to pick colors that go well together without having to put too much thought into it, but feel free to expand into the other colors if you feel the need.

---

How To

Add New Icons

If you want to add a new icon to the project, follow these steps.

1. Copy & paste an existing icon file into the icon directory.
2. Copy the JSX from HeroIcons, and paste into the file. If you are getting an icon from another source, you may need to massage the SVG data to fit the React syntax.
3. Add a title tag for accessibility and testing purposes.
4. Find the file utils/icon-utils.js and import your icon.
5. Create a name constant and add the icon to the ICON_COMPONENTS map and ICON_NAMES object.
6. Add a test to /tests/components/Icon.spec.js. You will now be able to use your new Icon by using the <Icon/> component or by using the <Button buttonType="icon"/>. This commit shows an example of adding a new icon, as well as consuming the icon as a standalone element and as a button.

Highlight Syntax with Prism

To perform syntax highlighting in the app, we use Prism. The file /prism/prism.js is a copy of the code provided by Prism with JSON and Rego selected. If the app needs additional language support or functionality, you will need to download a new copy and replace the contents of the file. The styles used by Prism live in /styles/prism.scss. The classes can be moved around to fit whatever styling is desired. If you update Prism to include additional functionality, you may need to copy the provided stylesheet in order to get any new class names that may apply.