Fix Note not Formatted Properly

content/configuration/auth-sso.md

@@ -311,11 +311,11 @@ AUTH_GITHUB_ACCESS_URL="https://github.com/login/oauth/access_token"
 AUTH_GITHUB_PROFILE_URL="https://api.github.com/user"
 ```
 
-::: warning Notice
+::callout{icon="material-symbols:warning-rounded" color="amber"}
 
 If the authenticating user has not marked their email as "public" in GitHub, it will not be accessible by Directus.
 
-:::
+::
 
 #### Twitter
 
@@ -406,4 +406,4 @@ AUTH_GOOGLE_EMAIL_KEY="email"
 </EntityDescriptor>
 ```
 
-::
+::

content/tutorials/1.getting-started/fetch-data-from-directus-with-angular.md

@@ -336,11 +336,11 @@ Go to `src/app/app.routes.ts` file and add the following route in the `Routes` a
 ```
 Once the application reloads, go to `http://localhost:4200/blog` and the list of posts will be displayed on the page.
 
-:::info Navigation
+::callout{icon="material-symbols:info-outline" title="Navigation"}
 
 In Angular, the order in which you put the routes in the `Routes` array will affect how components are loaded in your application. In this case, you don't want the path to `blog` to be consumed as a `slug`. As a result, ensure the blog route is put before slug in the Routes array.
 
-:::
+::
 
 ![blog post listing](https://marketing.directus.app/assets/fa4a4af1-13bc-4357-9dd2-4c06a9583ce6)
 

content/tutorials/4.migration/migrate-from-wordpress-to-directus.md

@@ -233,11 +233,11 @@ api_key = "your-api-token"
 # Uncomment the line below to run the function with your actual Directus URL and API key
 import_posts_to_directus(json_file_path, directus_url, api_key)
 ```
-::: info Replace Data
+::callout{icon="material-symbols:info-outline" title="Replace Data"}
 
 Note: Replace `https://your.directus.app` and `your-api-token` with the appropriate details.
 
-:::
+::
 The code above:
 1. Opens and reading a JSON file specified by `json_file_path`. It expects the file to contain an array of posts, with each post represented as a dictionary. These dictionaries must at least include keys for `"Title"`, `"Content"`, and `"Date"`.
 2. Sets up HTTP headers for the request to the Directus API, including authorization via a Bearer token (specified by `api_key`) and setting `"Content-Type"` to `"application/json"` to indicate that the payload will be in JSON format.

content/tutorials/5.extensions/summarize-relational-items-in-a-custom-display-extension.md

@@ -304,12 +304,12 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-:::info Required files
+::callout{icon="material-symbols:info-outline" title="Required files"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
 
-:::
+::
 
 ## Use the Display
 

content/tutorials/6.self-hosting/deploy-directus-to-an-ubuntu-server.md

@@ -131,23 +131,23 @@ On the initial run, Docker will fetch the necessary image from the registry befo
 
 Your application should now be accessible at `http://your_server_ip:8055`.
 
-:::info `SQLITE_CANTOPEN` Error
+::callout{icon="material-symbols:info-outline" title="`SQLITE_CANTOPEN` Error"}
 
 If you encounter any error e.g `SQLITE_CANTOPEN: unable to open database file`, it is probably due to permission issues. You can learn more about [this issue here](https://github.com/directus/directus/discussions/17823#discussioncomment-5395649).
 
-:::
+::
 
 ## Running the Docker Container as a Background Service
 
 Running your application using `sudo docker compose up` will stop it running when you close the terminal.
 
 To ensure your application runs in the background and restarts automatically, you can create a systemd service.
 
-:::info What is Systemd?
+::callout{icon="material-symbols:info-outline" title="What is Systemd?"}
 
 Systemd is a system and service manager for Linux operating systems. It provides a standard process for controlling the startup, management, and monitoring of services and applications. It is usually defined by a configuration file usually ending with the _.service_ extension.
 
-:::
+::
 
 ### Create a Systemd Service File
 
@@ -173,11 +173,11 @@ ExecStop=/usr/bin/docker compose down
 WantedBy=multi-user.target
 ```
 
-:::info
+::callout{icon="material-symbols:info-outline" title="Navigation"}
 
 You can get the full path to your directory by running the command `pwd` in the project directory on your server and copying the output.
 
-:::
+::
 
 Save the file and exit the editor.
 

content/tutorials/7.workflows/combine-live-preview-and-content-versioning-with-next-js.md

@@ -137,9 +137,9 @@ To configure your Directus Studio App to preview different versions of your cont
 - Update the preview url with the version by selecting Version from the dropdown and entering it in this format: `http://<your-site>/api/draft?secret=MY_SECRET_TOKEN&id=ID&version=Version`
 - Save your changes.
 
-::callout{icon="material-symbols:info-outline" title="Replace Values
+::callout{icon="material-symbols:info-outline" title="Replace Values"}
 
-Remember to replace `<your-site>` with your actual website domain and  MY_SECRET_TOKEN with the secret you have in your Next.js project.
+Remember to replace `<your-site>` with your actual website domain and `MY_SECRET_TOKEN` with the secret you have in your Next.js project.
 
 ::
 

content/tutorials/7.workflows/enrich-user-data-with-clearbit-and-directus-automate.md

@@ -37,11 +37,11 @@ Add a `Authorization` header with the value `Bearer YOUR_KEY`, replacing `YOUR_K
 
 From the resolved path of the previous operation, create an **Update Data** operation. Set the Collection to `directus_users` with Full Access permissions.
 
-:::info Set a System Collection
+::callout{icon="material-symbols:info-outline" title="Set a System Collection"}
 
 The dropdown in the collection field will only show user-created collections. To add `directus_users`, which is a system collection, click the `{}` button to turn the input to raw mode and type the collection name manually.
 
-:::
+::
 
 Add one item to the IDs tags - `{{$trigger.key}}` - which represents the ID of the new user that was created and triggered the Flow to run.
 

content/tutorials/7.workflows/generate-transcripts-with-deepgram-and-directus-automate.md

@@ -57,11 +57,11 @@ Replace `YOUR_DIRECTUS_URL` with the URL for your Directus project, and `TOKEN`
 
 From the resolved path of the previous operation, create an **Update Data** operation. Set the Collection to `directus_files` with Full Access permissions.
 
-:::info Set a System Collection
+::callout{icon="material-symbols:info-outline" title="Set a System Collection"}
 
 The dropdown in the collection field will only show user-created collections. To add `directus_files`, which is a system collection, click the `{}` button to turn the input to raw mode and type the collection name manually.
 
-:::
+::
 
 Add one item to the IDs tags - `{{$trigger.key}}` - which represents the ID of the file that was uploaded and triggered the Flow to run.