fix(auth): update css of "common" auth UX #4500

Problem:
The "common" auth UX is not aligned with the new design. 

Solution:
1. Update text description for IAM login
2. Update icon size and font size
3. Update icon SVG with new design
4. Align AWS or Amazon Q icon to the left of common login UX panel.

Author: leigaol

packages/core/src/login/webview/vue/backend_amazonq.ts

@@ -10,10 +10,6 @@ import { awsIdSignIn } from '../../../codewhisperer/util/showSsoPrompt'
 import { connectToEnterpriseSso } from '../../../codewhisperer/util/getStartUrl'
 
 export class AmazonQLoginWebview extends CommonAuthWebview {
-    // TODO: update source, id
-    public override id: string = 'aws.AmazonCommonAuth'
-    public override source: string = 'src/login/webview/vue/index.js'
-
     fetchConnection(): SsoConnection | undefined {
         if (AuthUtil.instance.isConnected() && AuthUtil.instance.conn?.type === 'sso') {
             return AuthUtil.instance.conn

packages/core/src/login/webview/vue/backend_toolkit.ts

@@ -11,9 +11,6 @@ import { SsoConnection, createSsoProfile } from '../../../auth/connection'
 import { Auth } from '../../../auth/auth'
 
 export class ToolkitLoginWebview extends CommonAuthWebview {
-    public override id: string = 'aws.AmazonCommonAuth'
-    public override source: string = 'src/login/webview/vue/index.js'
-
     async startEnterpriseSetup(startUrl: string, region: string): Promise<AuthError | undefined> {
         return this.ssoSetup('createIdentityCenterConnection', async () => {
             const ssoProfile = createSsoProfile(startUrl, region)

packages/core/src/login/webview/vue/login.vue

@@ -6,8 +6,8 @@
 
             <svg
                 v-if="app === 'AMAZONQ' && stage !== 'CONNECTED'"
-                width="71"
-                height="71"
+                width="100"
+                height="100"
                 viewBox="0 0 71 71"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -47,8 +47,8 @@
             </svg>
             <svg
                 v-if="app === 'TOOLKIT' && stage !== 'CONNECTED'"
-                width="54"
-                height="54"
+                width="100"
+                height="100"
                 viewBox="0 0 54 54"
                 fill="none"
                 id="Layer_1"
@@ -159,7 +159,7 @@
 
         <template v-if="stage === 'AUTHENTICATING'">
             <div class="auth-container-section">
-                <div v-if="app === 'TOOLKIT' && profileName.length > 0" class="title">Authenticating...</div>
+                <div v-if="app === 'TOOLKIT' && profileName.length > 0" class="title">Connecting to IAM...</div>
                 <div v-else class="title">Authenticating in browser...</div>
                 <button class="continue-button" v-on:click="handleCancelButtom()">Cancel</button>
             </div>
@@ -366,10 +366,10 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
     justify-content: left;
-    align-items: center;
-    padding-top: 25px;
-    padding-bottom: 30px;
-    padding-left: 60px;
+    align-items: flex-start;
+    padding-top: 150px;
+    padding-bottom: 10px;
+    padding-left: 10px;
     height: auto;
 }
 .hint {
@@ -381,6 +381,9 @@ export default defineComponent({
     margin-bottom: 5px;
     margin-top: 5px;
     font-size: 23px;
+    font-size: 15px;
+    font-weight: bold;
+    color: white;
 }
 .continue-button:disabled {
     background-color: #252526;

packages/core/src/login/webview/vue/selectableItem.vue

@@ -35,16 +35,18 @@
             </svg>
             <svg
                 v-if="itemTitle == 'IAM Credential'"
-                width="15"
-                height="15"
-                viewBox="0 0 15 15"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
                 transform="translate(0, 20)"
             >
                 <path
-                    d="M10.36 1.06667C11.1778 1.24444 11.8889 1.61778 12.4933 2.18667C13.1333 2.75556 13.56 3.43111 13.7733 4.21333C13.9867 4.96 14.0222 5.72444 13.88 6.50667C13.6667 7.53778 13.1333 8.39111 12.28 9.06667C11.4622 9.74222 10.52 10.08 9.45333 10.08C8.99111 10.08 8.56444 10.0089 8.17333 9.86667L7.37333 10.8267L7 10.9867H5.98667V12.48L5.50667 13.0133H4.01333V14.5067L3.48 14.9867H0.493333L0.0133333 14.5067V12.2133L0.12 11.84L5.13333 6.88C4.99111 6.41778 4.92 5.93778 4.92 5.44C4.92 4.8 5.06222 4.17778 5.34667 3.57333C5.66667 2.93333 6.07556 2.41778 6.57333 2.02667C7.10667 1.6 7.69333 1.31556 8.33333 1.17333C9.00889 0.995556 9.68445 0.96 10.36 1.06667ZM11.6933 8.26667C12.3333 7.76889 12.7422 7.11111 12.92 6.29333C13.0267 5.68889 12.9911 5.10222 12.8133 4.53333C12.6711 3.96444 12.3867 3.46667 11.96 3.04C11.5333 2.61333 11.0356 2.32889 10.4667 2.18667C9.89778 2.00889 9.31111 1.97333 8.70667 2.08C7.92444 2.25778 7.26667 2.66667 6.73333 3.30667C6.2 3.94667 5.93333 4.67556 5.93333 5.49333C5.89778 5.95556 5.96889 6.4 6.14667 6.82667L6.04 7.36L1.02667 12.4267V14.0267H3V12.48L3.48 12H5.02667V10.5067L5.50667 10.0267H6.73333L7.64 9.01333L8.17333 8.85333C8.6 8.99556 9.02667 9.06667 9.45333 9.06667C10.2711 9.06667 11.0178 8.8 11.6933 8.26667ZM10.84 5.54667C10.9467 5.40444 11 5.24444 11 5.06667C11.0356 4.88889 11 4.72889 10.8933 4.58667C10.8222 4.40889 10.7156 4.26667 10.5733 4.16C10.4311 4.05333 10.2533 4 10.04 4C9.86222 3.96444 9.68444 4 9.50667 4.10667C9.36445 4.17778 9.25778 4.28444 9.18667 4.42667C9.04444 4.67556 8.99111 4.94222 9.02667 5.22667C9.09778 5.47556 9.24 5.67111 9.45333 5.81333C9.70222 5.95556 9.95111 6.00889 10.2 5.97333C10.4489 5.90222 10.6622 5.76 10.84 5.54667Z"
-                    fill="#C5C5C5"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M10.0042 11C10.0042 11.009 10.002 11.0325 9.99974 11.0548L9.99979 11.0502L10 11L10 10.9993L9.99997 11L9.995 11.1L9.99652 11.0855L9.99974 11.0548C9.978 13.1703 8.62586 15.046 6.62064 15.7331C4.59789 16.4261 2.3583 15.7562 1.0483 14.0663C-0.261694 12.3764 -0.352147 10.0406 0.823246 8.25441C1.89701 6.62271 3.81005 5.77972 5.71121 6.05367L12.3412 0.24769C12.5235 0.0880192 12.7576 0 13 0H15C15.5523 0 16 0.447715 16 1V6C16 6.55228 15.5523 7 15 7H14V8C14 8.55229 13.5523 9 13 9H12V10C12 10.5523 11.5523 11 11 11H10.0042ZM13.376 2L6.65881 7.88231C6.41017 8.10005 6.07001 8.18087 5.75 8.09825C4.50783 7.77752 3.19918 8.28216 2.49395 9.35384C1.78871 10.4255 1.84298 11.827 2.62898 12.841C3.41498 13.8549 4.75873 14.2569 5.97239 13.841C7.18604 13.4252 8.00096 12.2837 8 11.0007L8.00502 10.9C8.03175 10.634 8.03175 10.366 8.00502 10.1C7.94583 9.51115 8.40818 9 9 9H10V8C10 7.44772 10.4477 7 11 7H12V6C12 5.44772 12.4477 5 13 5H14V2H13.376ZM6 10H4V12H6V10Z"
+                    fill="white"
                 />
             </svg>
         </div>
@@ -94,12 +96,19 @@ export default defineComponent({
     user-select: none;
 }
 .title {
-    font-size: 21px;
+    font-size: 15px;
     font-weight: bold;
+    color: white;
 }
 
 .text {
     display: flex;
     flex-direction: column;
+    font-size: 15px;
+    color: white;
+}
+
+.icon {
+    padding-right: 10px;
 }
 </style>