Update info callout titles (#1207)

Author: amirhhashemi

WRITING.md

@@ -66,7 +66,7 @@ We ask that you use them sparingly.
 3. Once you have the Aside component imported, simply follow the below example for how to add one to your document.
 
 ```
-:::info
+:::note
     content here
 :::
 ```

src/routes/concepts/components/basics.mdx

@@ -27,7 +27,7 @@ function App() {
 }
 ```
 
-:::info[Note]
+:::note
 
 Component names must start with a capital letter to distinguish them from regular HTML elements.
 Otherwise, they won't be recognized as components.
@@ -155,7 +155,7 @@ This example uses a [ternary operator](https://developer.mozilla.org/en-US/docs/
 When `count` is greater than 5, the component will display `"Count limit reached"`.
 Otherwise, it will display the current count with an increment button.
 
-:::info
+:::note
 To simplify conditional rendering, Solid provides built-in [control-flow](/concepts/control-flow/conditional-rendering) components like [`Show`](/concepts/control-flow/conditional-rendering#show), which create a more readable conditional rendering experience.
 
     ```tsx

src/routes/concepts/components/class-style.mdx

@@ -96,7 +96,7 @@ const [current, setCurrent] = createSignal("foo");
 This is because `classList` selectively toggles only the classes that require alteration, while `class` will be re-evaluated each time.
 For a single conditional class, using `class` might be simpler but as the number of conditional classes increases, `classList` offers a more readable and declarative approach.
 
-:::info
+:::note
     While it is possible, mixing `class` and `classList` can introduce unexpected errors.
     If both are reactive when the `class` value changes, Solid will set the entire `class` attribute.
     This will remove any classes set by `classList`.

src/routes/concepts/components/event-handlers.mdx

@@ -182,7 +182,7 @@ button
 </div>
 ```
 
-:::info[onInput / onChange]
+:::note[onInput / onChange]
 
     `onChange` and `onInput` events work according to their native behavior:
     - `onInput` will fire immediately after the value has changed

src/routes/concepts/context.mdx

@@ -247,7 +247,7 @@ function Child() {
 
 If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
 
-:::info[More on default values]
+:::note[More on default values]
 Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
 :::
 

src/routes/concepts/control-flow/portal.mdx

@@ -38,7 +38,7 @@ By putting the element outside of the parent element, it is no longer bound by t
 This creates a more accessible experience for users, as the content is no longer obscured.
 
 
-:::info
+:::note
   `<Portal>` will render wrapped unless specifically targeting `document.head`.
 
   This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.

src/routes/concepts/effects.mdx

@@ -87,7 +87,7 @@ setCount(1); // Output: 1, "Hello"
 setMessage("World"); // Output: 1, "World"
 ```
 
-:::info
+:::note
 When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*.
 While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous.
 This means that the order of execution of effects is *not guaranteed* and should not be relied upon.

src/routes/concepts/refs.mdx

@@ -29,7 +29,7 @@ function Component() {
 This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM.
 It can be used multiple times without having to worry about duplicate selectors.
 
-The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure. 
+The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure.
 This makes the component's JSX structure more difficult to read and understand.
 
 ## Refs in Solid
@@ -61,7 +61,7 @@ If access to an element is needed before it is added to the DOM, you can use the
 </p>
 ```
 
-:::info
+:::note
 In TypeScript, you must use a definitive assignment assertion.
 Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't
 confirm it.

src/routes/concepts/signals.mdx

@@ -21,7 +21,7 @@ const [count, setCount] = createSignal(0);
 //       ^ getter  ^ setter
 ```
 
-    	:::info
+    	:::note
     	  The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
 
 This lets you extract values from the array.
@@ -79,7 +79,7 @@ function Counter() {
 }
 ```
 
-:::info
+:::note
 A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect)  or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
 
 Both functions subscribe to the signals accessed within them, establishing a dependency relationship.

src/routes/concepts/stores.mdx

@@ -193,7 +193,7 @@ const App = () => {
 }
 ```
 
-:::info
+:::note
 Separating the read and write capabilities of a store provides a valuable debugging advantage.
 
 This separation facilitates the tracking and control of the components that are accessing or changing the values.
@@ -358,8 +358,8 @@ setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
 // update users with location "Canada"
 setStore("users", (user) => user.location == "Canada" , "loggedIn", false)
 
-// update users with id 1, 2 or 3 
-let ids = [1,2,3] 
+// update users with id 1, 2 or 3
+let ids = [1,2,3]
 setStore("users", (user) => ids.includes(user.id) , "loggedIn", false)
 ```