fix(toolkit): Improve text description in login page (#4481)

* update auth login text

* add change log

* css adjust

* css adjustments

* text change

* text adjustments

* update text

* trigger ci

* Update .changes/next-release/Feature-e6bbf14f-90d8-4b30-8e63-7ff522fd855a.json

Co-authored-by: Maxim Hayes <[email protected]>

---------

Co-authored-by: Maxim Hayes <[email protected]>

Author: leigaol

.changes/next-release/Feature-e6bbf14f-90d8-4b30-8e63-7ff522fd855a.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "UI: Improve text description in login page"
+}

packages/toolkit/src/auth/ui/vue/authForms/manageBuilderId.vue

@@ -170,7 +170,9 @@ abstract class BaseBuilderIdState implements AuthForm {
      */
     async getSubmitButtonText(): Promise<string> {
         if (!(await this.anyBuilderIdConnected())) {
-            return 'Use for free with AWS Builder ID'
+            return this.name === 'CodeWhisperer'
+                ? 'Use for free, no AWS Account required'
+                : 'Use for free with AWS Builder ID'
         } else {
             return `Connect AWS Builder ID with ${this.name}`
         }

packages/toolkit/src/auth/ui/vue/authForms/manageIdentityCenter.vue

@@ -150,7 +150,8 @@ export default defineComponent({
             if (this.isConnected && !this.checkIfConnected) {
                 this.buttonText = 'Add an IAM Identity Center profile'
             } else {
-                this.buttonText = 'Sign in with IAM Identity Center (SSO)'
+                this.buttonText =
+                    this.authName === 'CodeWhisperer' ? 'Use Professional License' : 'Use Single Sign-on (SSO)'
             }
         },
         async emitUpdate(cause?: ConnectionUpdateCause) {

packages/toolkit/src/auth/ui/vue/authForms/sharedAuthForms.css

@@ -19,6 +19,14 @@
     flex-direction: column;
 }
 
+.auth-container-section button {
+    font-size: 1.3rem;
+}
+
+.auth-container > div > button {
+    font-size: 1.3rem;
+}
+
 .auth-form-container {
     display: flex;
     flex-direction: column;

packages/toolkit/src/auth/ui/vue/featurePanel/awsExplorerContent.vue

@@ -1,7 +1,7 @@
 <template>
     <div :id="panelId" class="feature-panel-container border-common" :class="isActive ? 'feature-panel-selected' : ''">
         <div class="feature-panel-container-upper">
-            <div class="feature-panel-container-title">AWS Explorer</div>
+            <div class="feature-panel-container-title">Resource Explorer</div>
 
             <img
                 class="feature-panel-image"

packages/toolkit/src/auth/ui/vue/featurePanel/codeCatalystContent.vue

@@ -35,6 +35,10 @@
                 ></IdentityCenterForm>
 
                 <button v-if="connectedAuth" v-on:click="showCodeCatalystNode()">Open CodeCatalyst in Toolkit</button>
+                <div v-if="!connectedAuth">
+                    Don't have a CodeCatalyst account?
+                    <a href="https://codecatalyst.aws/onboarding/view">Get started with creating a Space.</a>
+                </div>
             </div>
         </template>
     </div>

packages/toolkit/src/auth/ui/vue/root.vue

@@ -46,8 +46,8 @@
                     </svg>
                 </div>
                 <div>
-                    <div style="font-size: 1.8rem; font-weight: bold">AWS Toolkit for VS Code</div>
-                    <div style="font-size: 1rem; font-weight: bold">
+                    <div style="font-size: 1.4rem">AWS Toolkit for VS Code</div>
+                    <div style="font-size: 1rem">
                         <a href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/welcome.html"
                             >Documentation</a
                         >
@@ -75,7 +75,7 @@
             </div>
         </div>
         <div>
-            <div style="font-size: 1.6rem; font-weight: bold">Sign in to Get Started</div>
+            <div style="font-size: 2.1rem; font-weight: bold">Select a sign-in option to continue:</div>
             <hr style="margin: 1em 0 1em 0; border-color: var(--vscode-textBlockQuote-border)" />
             <div style="display: flex; flex-direction: row; justify-content: space-between; gap: 1em">
                 <CodeWhispererContent