Update UI js (#91)

* [GTD][Code Sample] React SPA Code Sample Update (ADO-54223) (#50)

* react-spa-code-update

* remove-files

* update-products-tag

* JS-updates

* update-README

---------

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: OwenRichards1

angular-spa/README.md

@@ -1,18 +1,20 @@
+<!-- Keeping yaml frontmatter commented out for now
 ---
 # Metadata required by https://docs.microsoft.com/samples/browse/
 # Metadata properties: https://review.docs.microsoft.com/help/contribute/samples/process/onboarding?branch=main#add-metadata-to-readme
 languages:
 - Javascript
 page_type: sample
-name: Angular Single Page Application (SPA) that accesses Graph
-description: This Angular Single Page Application (SPA) accesses a protected route and makes a call to the Graph API as the user.
+name: "Angular Single Page Application (SPA) that accesses Graph"
+description: "This Angular Single Page Application (SPA) accesses a protected route and makes a call to the Graph API as the user."
 products:
 - azure
 - azure-active-directory
 - ms-graph
 urlFragment: ms-identity-docs-javascript-angular-spa
 ---
-
+-->
+<!-- SAMPLE ID: DOCS-CODE-022 -->
 # Angular | web | user sign-in, protected web API access (Microsoft Graph) | Microsoft identity platform
 
 <!-- Build badges here
@@ -75,7 +77,7 @@ ng serve --open
 
 Follow the instructions that are presented on the web browser. If everything worked, you should receive a response similar to this on the "View Profile" page:
 
-![Screenshot with profile information from Graph](./profile.png)
+![Screenshot with profile information from Graph](./readme-files/angular-spa-sign-in.png)
 
 ## About the code
 

angular-spa/profile.png

@@ -2,7 +2,7 @@
 	<a class="navbar-brand" > Microsoft Identity Platform </a>
 		<a>
 			<button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
-			<button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Signout</button>
+			<button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Sign Out</button>
 		</a>
 </a>
 	<a class="profileButton">

angular-spa/readme-files/angular-spa-sign-in.png

@@ -10,6 +10,7 @@ products:
 - azure
 - azure-active-directory
 - ms-graph
+- microsoft-identity-platform
 urlFragment: ms-identity-docs-code-webapi-nodejs-client-credentials-flow
 ---
 

angular-spa/src/app/app.component.html

@@ -9,6 +9,7 @@ description: "This Node.js API protects its own protected endpoint using JWT sco
 products:
 - azure
 - azure-active-directory
+- microsoft-identity-platform
 urlFragment: ms-identity-docs-code-web-api-nodejs
 ---
 

msal-client-credentials-flow/README.md

@@ -9,6 +9,7 @@ products:
 - azure
 - azure-active-directory
 - azure-functions
+- microsoft-identity-platform
 ---
 
 # Node.js | Azure Function | protect an API | Microsoft identity platform

protect-api/README.md

@@ -10,6 +10,7 @@ products:
 - azure
 - azure-active-directory
 - ms-graph
+- microsoft-identity-platform
 urlFragment: ms-identity-docs-code-api-obo-nodejs
 ---
 

protect-function-app/README.md

@@ -6,6 +6,7 @@ products:
 - azure
 - azure-active-directory
 - ms-graph
+- microsoft-identity-platform
 name: React single-page app (SPA) that signs in user
 url-fragment: msal-react-single-page-app
 description: This minimal React application demonstrates usage of the Microsoft Authentication Library for React (MSAL React) to sign in Azure AD users (authentication), call a protected web API (authorization), and sign out users.

protected-api-access-protected-api/README.md

@@ -29,7 +29,7 @@ export const PageLayout = (props) => {
             </Navbar>
                 <div className="title">
                     <h5>
-                        Welcome to the Microsoft Authentication Library For Javascript - React SPA Tutorial
+                        Welcome to the Microsoft Authentication Library For Javascript - React SPA
                     </h5>
                 </div>
                 <div className="profileContent">