authWebview: Various fixes (#3616)

* webviewUi: Shrink content window + fix colors for light theme

This shrinks the right side content window with the image
to something smaller so that it will fit more easily in
the screen.

Also some text colors are fixed to show properly in a light theme.

Signed-off-by: Nikolas Komonen <[email protected]>

* ui: Adjust UI so content window is at top of page

Before we had the content window (with image + auth form)
under the title section so it was adjacent to the service/feature
tab/buttons. But we want to fit everything on one screen and
it required scrolling down a bit.

Solution:

Move the content window to the top of the whole screen
and now it all fits in one screen

Signed-off-by: Nikolas Komonen <[email protected]>

* builderId: customize sign up url for CW

CW wants the builder id sign up url
to redirect to a specific link instead of the
standard one.

Solution:

Each auth type for builder id will provide
its own sign up url.

Signed-off-by: Nikolas Komonen <[email protected]>

* greenBar: Move to top of the page

This moves the green status bar to the very top
of the page instead of under the title

Signed-off-by: Nikolas Komonen <[email protected]>

* webview: dont have default feature selected

Previously we had the resource explorer feature
selected on open.

Now we will instead select nothing.

Signed-off-by: Nikolas Komonen <[email protected]>

* identityCenter: Default to us-east-1 region

This has all identity center forms default to
us-east-1 and additionally fixes the UX of
where the user can click to select a region so
that the pointer cursor appears and they can click
on the text itself instead of only the pencil.

Signed-off-by: Nikolas Komonen <[email protected]>

* formError: Increase error font size

Signed-off-by: Nikolas Komonen <[email protected]>

---------

Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

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

@@ -5,11 +5,9 @@
 
             <div v-if="stage === 'START'">
                 <div class="form-section">
-                    <div>
+                    <div style="color: #cccccc">
                         With AWS Builder ID, sign in for free without an AWS account.
-                        <a href="https://docs.aws.amazon.com/signin/latest/userguide/sign-in-aws_builder_id.html"
-                            >Read more.</a
-                        >
+                        <a :href="signUpUrl">Read more.</a>
                     </div>
                 </div>
 
@@ -68,9 +66,11 @@ export default defineComponent({
             builderIdCode: '',
             name: this.state.name,
             error: '' as string,
+            signUpUrl: '' as string,
         }
     },
     async created() {
+        this.signUpUrl = this.getSignUpUrl()
         await this.update('created')
     },
     methods: {
@@ -95,6 +95,9 @@ export default defineComponent({
         showNodeInView() {
             this.state.showNodeInView()
         },
+        getSignUpUrl() {
+            return this.state.getSignUpUrl()
+        },
     },
 })
 
@@ -124,6 +127,10 @@ abstract class BaseBuilderIdState implements AuthStatus {
     async signout(): Promise<void> {
         await client.signoutBuilderId()
     }
+
+    getSignUpUrl(): string {
+        return 'https://docs.aws.amazon.com/signin/latest/userguide/sign-in-aws_builder_id.html'
+    }
 }
 
 export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
@@ -146,6 +153,10 @@ export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
     override showNodeInView(): Promise<void> {
         return client.showCodeWhispererNode()
     }
+
+    override getSignUpUrl(): string {
+        return 'https://docs.aws.amazon.com/codewhisperer/latest/userguide/whisper-setup-indv-devs.html'
+    }
 }
 
 export class CodeCatalystBuilderIdState extends BaseBuilderIdState {

src/auth/ui/vue/authForms/manageCredentials.vue

@@ -17,7 +17,7 @@
                     <label class="small-description"
                         >Credentials will be added to the appropriate `~/.aws/` files.</label
                     >
-                    <div v-on:click="editCredentialsFile()" style="cursor: pointer">
+                    <div v-on:click="editCredentialsFile()" style="cursor: pointer; color: #cccccc">
                         <div class="icon icon-vscode-edit edit-icon"></div>
                         Edit file directly
                     </div>

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

@@ -7,7 +7,7 @@
                     href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/sso-credentials.html"
                 ></a
             ></FormTitle>
-            <div v-if="!isConnected">Successor to AWS Single Sign-on</div>
+            <div v-if="!isConnected" style="color: #cccccc">Successor to AWS Single Sign-on</div>
         </div>
         <div v-else>
             <!-- In this scenario we do not care about the active IC connection -->
@@ -17,7 +17,7 @@
                     href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/sso-credentials.html"
                 ></a
             ></FormTitle>
-            <div>Successor to AWS Single Sign-on</div>
+            <div style="color: #cccccc">Successor to AWS Single Sign-on</div>
         </div>
 
         <div v-if="stage === 'START'">
@@ -32,9 +32,9 @@
                 <label class="input-title">Region</label>
                 <label class="small-description">AWS Region that hosts Identity directory</label>
 
-                <div style="display: flex; flex-direction: row; gap: 10px">
-                    <div v-on:click="getRegion()" class="icon icon-lg icon-vscode-edit edit-icon"></div>
-                    <div style="width: 100%">{{ data.region ? data.region : 'Not Selected' }}</div>
+                <div v-on:click="getRegion()" style="display: flex; flex-direction: row; gap: 10px; cursor: pointer">
+                    <div class="icon icon-lg icon-vscode-edit edit-icon"></div>
+                    <div style="width: 100%; color: #cccccc">{{ data.region ? data.region : 'Not Selected' }}</div>
                 </div>
             </div>
 
@@ -187,10 +187,7 @@ abstract class BaseIdentityCenterState implements AuthStatus {
     protected _stage: IdentityCenterStage = 'START'
 
     constructor() {
-        this._data = {
-            startUrl: '',
-            region: '',
-        }
+        this._data = BaseIdentityCenterState.initialData()
     }
 
     abstract get id(): AuthFormId
@@ -220,10 +217,7 @@ abstract class BaseIdentityCenterState implements AuthStatus {
         // Successful submission, so we can clear
         // old data.
         if (!error) {
-            this._data = {
-                startUrl: '',
-                region: '',
-            }
+            this._data = BaseIdentityCenterState.initialData()
         }
         return error
     }
@@ -252,6 +246,13 @@ abstract class BaseIdentityCenterState implements AuthStatus {
     protected async getSubmittableDataOrThrow(): Promise<IdentityCenterData> {
         return this._data as IdentityCenterData
     }
+
+    private static initialData(): IdentityCenterData {
+        return {
+            startUrl: '',
+            region: 'us-east-1',
+        }
+    }
 }
 
 export class CodeWhispererIdentityCenterState extends BaseIdentityCenterState {

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

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     text-align: left;
+    color: #ffffff;
 
     padding: 10px;
 }
@@ -19,6 +20,11 @@
     margin-top: 3px;
 }
 
+/* Consistent margins between the elements of a grouping of elements */
+.auth-form .form-section > button {
+    margin-top: 3px;
+}
+
 .auth-form-title {
     font-size: 14px;
     font-weight: bold;
@@ -41,6 +47,7 @@
 
 .error-text {
     color: #f14c4c;
+    font-size: 12px;
 }
 
 input[data-invalid='true'] {