fix: highlights, formatting and others on studio (#5424)

* fix: highlights, formatting and others

* fix: wording

* fix: minor improvements

* fix: wording and remove comment

Author: ykethan

src/pages/console/adminui/access-management.mdx

@@ -3,7 +3,7 @@ export const meta = {
   description: `Manage team access to a project`,
 };
 
-With Amplify Studio, team members with different job functions can collaborate on different aspects of a project deployed in Amplify. Studio developers can create accounts with scoped access to resources and invite team members to join via email. Team members with *Full access* can create and manage AWS resources, while team members with *Manage only* access can edit application content and users.
+With Amplify Studio, team members with different job functions can collaborate on different aspects of a project deployed in Amplify. Studio developers can create accounts with admin or manage-only access to resources and invite team members to join via email.
 
 Follow these instructions to add and manage team members and their access to a project.
 
@@ -35,7 +35,9 @@ Follow these instructions to add and manage team members and their access to a p
   * Choose **Delete**. In the **Delete users** window, confirm the delete action.
 
 <Callout warning>
-If a team member logs into Amplify Studio, their login token is valid for 60 minutes, unless explicitly logged out. When you change a team member's permission from *full access* to *manage-only* or when you delete a team member's access, the team member can continue accessing Amplify Studio with their previously granted permissions until their token expires.
+
+If a team member logs into Amplify Studio, their login token is valid for 5 hours 30 minutes, unless they explicitly log out. When you change a team member's permission from **Full access** to **Manage only** or when you delete a team member's access, the team member can continue accessing Amplify Studio with their previously granted permissions until their token expires.
+
 </Callout>
 
 ## Understanding how Studio manages user access

src/pages/console/data/content-management.mdx

@@ -78,11 +78,11 @@ To use the data manager, you can [adjust your GraphQL API settings.](/console/da
 ### Null required fields
 When using the data manager, you may encounter the following error message:
 
-<Callout info>
+```console
 
-"Field {{fieldName}} cannot be set to null since its a required field."
+Field {{fieldName}} cannot be set to null since it's a required field.
 
-</Callout>
+```
 
 This message occurs when there are records in the selected data model that have null values for required fields. Usually, this occurs because a field was changed to be required after records were created. To resolve this issue, null records need to be updated.
 
@@ -106,11 +106,11 @@ A bi-directionally required field is a Relationship field between two data model
 ### Change of type in fields
 When using the data manager, you may encounter the following error message:
 
-<Callout info>
+```console
 
-"Field {{fieldName}} has a type mismatch. Expected {{typeName}}, but got {{typeName}}"
+Field {{fieldName}} has a type mismatch. Expected {{typeName}}, but got {{typeName}}
 
-</Callout>
+```
 
 This message occurs when there are records in the selected data model that have a mismatch in the expected type of a field. Usually, this occurs because a field was updated with a new type after records were created. To resolve this issue, records need to be updated.
 

src/pages/console/formbuilder/customize.mdx

@@ -83,7 +83,7 @@ Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a re
 
 ## Enable list inputs
 
-Form inputs can be made to accept multiple values. The form input gets "wrapped" around by a "list input" component to allow your users to add, update, and remove items. **This functionality is only enabled for inputs not tied to a data model.** If your input is tied to one of your existing models, this feature is controlled directly on the model by toggling the **Is array** property on the corresponding field and deploying your update.
+`TextInput`s can accept multiple values by toggling "Accept multiple values", enabling users to add, update, and remove items. This functionality is only enabled for inputs not linked to a data model. If your input is linked to an existing model, this feature is controlled directly on the model by toggling the "Is array" property on the corresponding field.
 
 1. Select a form input that's not connected to a data model
 2. Go to **Data**

src/pages/console/formbuilder/lifecycle.mdx

@@ -71,7 +71,6 @@ For example, if you want to trim all the string data before saving it:
 ```jsx
 <HomeCreateForm
     onSubmit={(fields) => {
-        // Example function to trim all string inputs
         const updatedFields = {}
         Object.keys(fields).forEach(key => {
             if (typeof fields[key] === 'string') {

src/pages/console/formbuilder/overrides.mdx

@@ -12,9 +12,6 @@ Use the `overrides` property to select the input component you want to override
 
 ```jsx
 function ProductFormContainer({ productType }) {
-  // "productType" is dynamically passed into this
-  // container component as a React prop (e.g. "shoe", "phone")
-
   return (
     <div className="App">
       <ProductForm
@@ -29,4 +26,4 @@ function ProductFormContainer({ productType }) {
 }
 ```
 
-**Note:** we do not recommend overriding properties that are already set by the generated form. This could lead to unexpected behavior during runtime. Verify the set properties by navigating to the component in the `src/ui-components/<your-form-component>.jsx` file.
+**Note:** We do not recommend overriding properties that are already set by the generated form. This could lead to unexpected behavior during runtime. Verify the set properties by navigating to the component in the `src/ui-components/<your-form-component>.jsx` file.

src/pages/console/tutorial/bindui.mdx

@@ -11,7 +11,7 @@ To add a property, choose **Add prop** and set a name for your property. For thi
 
 ## Set child property values
 
-Select a child element such as the "\$99 USD" Text element and choose \*\*Set prop\*\*. Here, you are able to set all available properties for that child element. Configure the `label` for the text element and set the value to "Price: \$" and then select _Command + Enter_ on your keyboard to concatenate another value such as `home.price`.
+Select a child element such as the `$99 USD` Text element and choose **Set prop**. Here, you are able to set all available properties for that child element. Configure the `label` for the text element and set the value to `Price: $` and then select _Command + Enter_ (or _Ctrl + Enter_) on your keyboard to concatenate another value such as `home.price`.
 
 ![Screenshot of UI bound to data](/images/studio/data-binding.png)
 

src/pages/console/tutorial/buildui.mdx

@@ -3,7 +3,7 @@ export const meta = {
   description: `Figma to React code with Amplify Studio`
 };
 
-With Studio’s new “UI Library”, you can sync components from Figma to React code. Amplify also provides you with a handy Figma file to get started faster. The Amplify Figma file includes both UI primitives and component templates. You can also create your own component in Figma! In this tutorial, you'll create a home listings app using Amplify Studio.
+With Studio’s new **UI Library**, you can sync components from Figma to React code. Amplify also provides you with a handy Figma file to get started faster. The Amplify Figma file includes both UI primitives and component templates. You can also create your own component in Figma! In this tutorial, you'll create a home listings app using Amplify Studio.
 
 ## Create UI components in Figma
 
@@ -50,10 +50,11 @@ Next, run `amplify pull` to sync all your components into your local code base.
 Import the UI component you want from `./ui-components` and then render it in your React app. For example:
 
 ```js
-import { CardB } from './ui-components'
-...
-  return <div>
+import { CardB } from './ui-components';
+
+return (
+  <div>
     <CardB />
   </div>
-...
+);
 ```

src/pages/console/tutorial/collections.mdx

@@ -3,7 +3,7 @@ export const meta = {
   description: `Figma to React code with Amplify Studio`
 };
 
-Amplify Studio also allows you to build lists and grids based on individual UI components. Let's create a "NewHomes" grid that showcases the latest homes added to the app.
+Amplify Studio also allows you to build lists and grids based on individual UI components. Let's create a `NewHomes` grid that showcases the latest homes added to the app.
 
 ## Create a collection
 

src/pages/console/tutorial/data.mdx

@@ -7,9 +7,11 @@ Amplify Studio provides a visual way to create your app's data model and manage
 
 ## Create data model
 
-In [Amplify Studio](/console/adminui/start/#logging-in-and-creating-an-app), from the **Set up** menu, choose **Data**. On the **Data modeling** page, choose **Add model** to create your first data model. Think of a model as a table in your database.
+1. [Launch Studio](/console/adminui/start/#logging-in-and-creating-an-app) for an app
+1. On the **Set up** menu, choose **Data**
+1. On the **Data modeling** page, choose **Add model** to create your first data model.
 
-In this case, you'll create a `Home` model and add a few fields like `address (String)`, `price (Float)`, and `image_url (String)`.
+Think of a model as a table in your database. In this case, you'll create a `Home` model and add a few fields like `address (String)`, `price (Float)`, and `image_url (String)`.
 
 ![Screenshot showing the "Add Model" button](/images/studio/add-model.png)
 

src/pages/console/uibuilder/figmatocode.mdx

@@ -91,11 +91,11 @@ In order to upgrade your Figma file, the newest version of all Amplify UI primit
 
 1. Duplicate the new [Figma community file](https://www.figma.com/community/file/1047600760128127424) into your Figma account.
 ![Duplicate the new figma file](/images/console/ui-figma-file.png)
-1. Copy everything in the 'README' page of the cloned community file into your existing customized Figma file
-    * If your Figma file doesn't have a 'README' page, create new page named README
-1. Delete all content in the 'Primitives' page of your customized Figma file
-1. Copy everything in the 'Primitives' page of the cloned Figma file, and paste it into the 'Primitives' page of your customized Figma file.
-1. Go through each component on the 'My Components' page and update the broken component instances to point to the local components on the 'Primitives' page. Unfortunately, there is no easy way to bulk update component instances in Figma.
+1. Copy everything in the **README** page of the cloned community file into your existing customized Figma file
+    * If your Figma file doesn't have a **README** page, create new page named **README**
+1. Delete all content in the **Primitives** page of your customized Figma file
+1. Copy everything in the **Primitives** page of the cloned Figma file, and paste it into the **Primitives** page of your customized Figma file.
+1. Go through each component on the **My Components** page and update the broken component instances to point to the local components on the **Primitives** page. Unfortunately, there is no easy way to bulk update component instances in Figma.
 ![Reattach figma components](/images/console/figma-upgrade-reattach.gif)
 
 **It is important to reattach your primitives. If you skip this step, Amplify Studio will generate components that look correct, but the React code generated will not use the [Amplify UI components](https://ui.docs.amplify.aws), and may not behave as expected**