update ui components in quickstarts (#2924)

* add inline

* add ui elements

---------

Co-authored-by: Alex Patterson <[email protected]>

astro/src/content/quickstarts/5-minute-fastpath.mdx

@@ -19,6 +19,7 @@ import FiveMinuteTestApplication from 'src/content/quickstarts/_5-minute-test-ap
 import FiveMinuteLogout from 'src/content/quickstarts/_5-minute-logout.mdx';
 import FiveMinuteSummingUp from 'src/content/quickstarts/_5-minute-summing-up.mdx';
 import { YouTube } from '@astro-community/astro-embed-youtube';
+import InlineUIElement from 'src/components/InlineUIElement.astro';
 
 
 You've chosen to install FusionAuth via Fast Path, using a local database (PostgreSQL or MySQL). 
@@ -110,13 +111,13 @@ Here you need to provide the super user credentials for the database along with
 
 The reason that FusionAuth uses a separate username and password to connect to the database during normal operation is that if the configuration is compromised and an attacker learns the database username and password, they will only have access to the FusionAuth database. This is helpful if you are using a single database server for multiple applications and databases. This is known as the principle of least privilege and FusionAuth generally follows this principle.
 
-Once you click the **Submit** button, you will be taken to the next step of Maintenance Mode. If you have opted to install with Elasticsearch, this step is where the FusionAuth Search component is configured, otherwise you can skip ahead to step 4, the Setup Wizard.
+Once you click the <InlineUIElement>Submit</InlineUIElement> button, you will be taken to the next step of Maintenance Mode. If you have opted to install with Elasticsearch, this step is where the FusionAuth Search component is configured, otherwise you can skip ahead to step 4, the Setup Wizard.
 
 Our Fast Path install and startup script automatically start the `fusionauth-search` component, which is a standard version of Elasticsearch. Since FusionAuth is able to connect to this search engine, all that is needed is to create the indexes inside it. This page looks like this.
 
 <img src="/img/docs/quickstarts/maintenance-mode-search.png" alt="Maintenance Mode Search" width="1200" role="bottom-cropped" />
 
-Clicking the **Submit** button here will cause FusionAuth to exit Maintenance Mode and begin starting up. You see an interstitial page.
+Clicking the <InlineUIElement>Submit</InlineUIElement> button here will cause FusionAuth to exit Maintenance Mode and begin starting up. You see an interstitial page.
 
 <img src="/img/docs/quickstarts/interstitial.png" alt="Interstitial" width="1200" role="bottom-cropped" />
 

astro/src/content/quickstarts/_5-minute-application-setup.mdx

@@ -1,30 +1,31 @@
 import InlineField from 'src/components/InlineField.astro';
+import InlineUIElement from 'src/components/InlineUIElement.astro';
 
-Once you arrive in the FusionAuth admin UI, the first thing you need to do is create an Application. An Application is something that a user can log into. This is the application you are building or that you are migrating to use FusionAuth. Click the <strong>Application</strong> menu option on the left side of the page or the **Setup** button in the box at the top of the page.
+Once you arrive in the FusionAuth admin UI, the first thing you need to do is create an Application. An Application is something that a user can log into. This is the application you are building or that you are migrating to use FusionAuth. Click the <InlineUIElement>Application</InlineUIElement> menu option on the left side of the page or the <InlineUIElement>Setup</InlineUIElement> button in the box at the top of the page.
 
 <img src={`/img/docs/quickstarts/dashboard-applications${props.imagesuffix || ''}.png`} alt="Dashboard to Applications" width="1200" />
 
-This will take you to the listing page for Applications. Next, you'll click the green plus button (the add button) at the top of the page:
+This will take you to the listing page for Applications. Next, you'll click the <InlineUIElement>green plus button</InlineUIElement> (the add button) at the top of the page:
 
 <img src={`/img/docs/quickstarts/application-listing${props.imagesuffix || ''}.png`} alt="Application Listing" width="1200" role="bottom-cropped" />
 
 On the Application form, provide a name for your Application (this is only used for display purposes) and a couple of items on the OAuth tab. Start with a simple setup that allows existing users to log into your application. There is no need to add any roles or registration configuration.
 
-When you click on the OAuth tab, you'll see this form.
+When you click on the <InlineUIElement>OAuth tab</InlineUIElement>, you'll see this form.
 
 <img src={`/img/docs/quickstarts/application-form${props.imagesuffix || ''}.png`} alt="Application Form" width="1200" />
 
 Most of the defaults will work, but provide the following items.
 
-* An authorized redirect URL. This is the route/controller in your application's backend that will complete the OAuth grant and obtain a token. For this example, add `http://localhost:3000/oauth-redirect`. You will see example code below for this route. Note that when you type or paste values into this text field you also must click the popup that appears. Otherwise the value will not be saved.
+* An <InlineField>authorized redirect URL</InlineField>. This is the route/controller in your application's backend that will complete the OAuth grant and obtain a token. For this example, add `http://localhost:3000/oauth-redirect`. You will see example code below for this route. Note that when you type or paste values into this text field you also must click the popup that appears. Otherwise the value will not be saved.
 * Specify a valid <InlineField>Logout URL</InlineField>. This is where the user will be redirected to after they are logged out of FusionAuth's OAuth front-end: your application. For this example, set this value to `http://localhost:3000/logout`. You'll see how this is used below.
 * Make sure the Authorization Code grant is selected in the <InlineField>Enabled Grants</InlineField>.
 * Set the <InlineField>Require registration</InlineField> field to `true`.
 
-Once you have configured the application, you'll click the blue "Save" button at the top of the page.
+Once you have configured the application, you'll click the blue <InlineUIElement>Save</InlineUIElement> button at the top of the page.
 
 <img src={`/img/docs/quickstarts/application-form-save${props.imagesuffix || ''}.png`} alt="Save Button Application Form" width="1200" role="bottom-cropped" />
 
-Then, click on the green magnifying glass on the list view next to your application. Scroll down to the <strong>OAuth Configuration</strong> section and copy the <InlineField>Client Id</InlineField> and <InlineField>Client Secret</InlineField> values off to a text file. You'll use them later.
+Then, click on the <InlineUIElement>green magnifying glass</InlineUIElement> on the list view next to your application. Scroll down to the <strong>OAuth Configuration</strong> section and copy the <InlineField>Client Id</InlineField> and <InlineField>Client Secret</InlineField> values off to a text file. You'll use them later.
 
 <img src={`/img/docs/quickstarts/application-details${props.imagesuffix || ''}.png`} alt="Application Details" width="1200" />

astro/src/content/quickstarts/_5-minute-register-user.mdx

@@ -1,12 +1,14 @@
 import Aside from 'src/components/Aside.astro';
+import InlineUIElement from 'src/components/InlineUIElement.astro';
+import Breadcrumb from 'src/components/Breadcrumb.astro';
 
-Next, grant the user you created in the Setup Wizard permissions to log into your new Application. This can be done from the User management section of the FusionAuth admin UI. Click the <strong>Users</strong> link in the navigation. If needed, search for the user.
+Next, grant the user you created in the Setup Wizard permissions to log into your new Application. This can be done from the User management section of the FusionAuth admin UI. Click the <Breadcrumb>Users</Breadcrumb> link in the navigation. If needed, search for the user.
 
-Manage the user's details by clicking on the black "Manage" button.
+Manage the user's details by clicking on the black <InlineUIElement>Manage</InlineUIElement> button.
 
 <img src={`/img/docs/quickstarts/user-search${props.imagesuffix || ''}.png`} alt="User Search" width="1200" role="bottom-cropped" />
 
-Once you are in this user's account, you'll click the "Add Registration" button. This will take us to a page that will allow us to add a registration for this user to the new Application. Registrations associate users with applications. You may have to select an Application if there are multiple options.
+Once you are in this user's account, you'll click the <InlineUIElement>Add Registration</InlineUIElement> button. This will take us to a page that will allow us to add a registration for this user to the new Application. Registrations associate users with applications. You may have to select an Application if there are multiple options.
 
 <img src={`/img/docs/quickstarts/registration-add-form${props.imagesuffix || ''}.png`} alt="Registration Add Form" width="1200" role="bottom-cropped" />
 
@@ -22,4 +24,4 @@ FusionAuth supports self-service registration. With self-service registration en
 
 You want to make sure your user account has a first name, which should appear under the picture.
 
-If they don't, use the <strong>Edit Profile</strong> button in the upper right hand corner of the user details screen to edit the account and give them one. The first name is how they'll be greeted in the application.
+If they don't, use the <InlineUIElement>Edit Profile</InlineUIElement> button in the upper right hand corner of the user details screen to edit the account and give them one. The first name is how they'll be greeted in the application.

astro/src/content/quickstarts/_5-minute-setup-wizard.mdx

@@ -1,3 +1,5 @@
+import InlineUIElement from 'src/components/InlineUIElement.astro';
+
 Once FusionAuth starts up successfully, you will be taken to the Setup Wizard. This is where you will create the administrator account for FusionAuth and accept the license. 
 
 **Record the email and password** you choose for the administrator account. You won't be able to recover this without setting up an email server, which is beyond the scope of this tutorial.
@@ -8,5 +10,5 @@ Here's what the Setup Wizard page looks like.
 
 <img src="/img/docs/get-started/download-and-install/setup-wizard.png" alt="Setup Wizard" width="1200" />
 
-Clicking **Submit** here will complete the Setup Wizard and log you into the FusionAuth administrative user interface.
+Clicking <InlineUIElement>Submit</InlineUIElement> here will complete the Setup Wizard and log you into the FusionAuth administrative user interface.