Change note to abstract

Author: Archmonger

docs/src/learn/editor-setup.md

@@ -65,6 +65,6 @@ Ideally, you should format your code on every save. VS Code has settings for thi
 4. In the search bar, type "format on save"
 5. Be sure the "format on save" option is ticked!
 
-!!! note
+!!! abstract "Note"
 
     If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is _only_ used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.

docs/src/learn/start-a-new-react-project.md

@@ -10,7 +10,7 @@ If you want to build a new app or a new website fully with ReactPy, we recommend
 
 <!-- FIXME: This is reliant on https://github.com/reactive-python/reactpy/issues/1071 -->
 
-!!! note
+!!! abstract "Note"
 
     Some of our backend frameworks are considered _built-in_, meaning that compatibility for these backends are contained within `reactpy.backend.*`.
 

docs/src/learn/tutorial-tic-tac-toe.md

@@ -6,7 +6,7 @@ You will build a small tic-tac-toe game during this tutorial. This tutorial does
 
 </p>
 
-!!! note
+!!! abstract "Note"
 
     This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](./your-first-component.md)
 
@@ -71,7 +71,7 @@ In the code example below, click **Run** to open the editor in a new tab using t
     # TODO
     ```
 
-!!! note
+!!! abstract "Note"
 
     You can also follow this tutorial using your local development environment. To do this, you need to:
 

docs/src/learn/writing-markup-with-psx.md

@@ -33,7 +33,7 @@ Keeping a button's rendering logic and markup together ensures that they stay in
 
 Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called PSX to represent that markup. PSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to PSX markup.
 
-!!! note
+!!! abstract "Note"
 
     PSX and ReactPy are two separate things. They're often used together, but you _can_ use them independently of each other. PSX is a syntax extension, while ReactPy is a Python library.