fix(amazonq): login styling/CSS #4722

leigaol · web-flow · commit f4b80ea48f2d · 2024-04-17T10:19:30.000-07:00
Problem
Login CSS does not match the design

Solution
- Support VS Code light mode and dark mode
- Fix a bug when icon is not correctly showed.
- Fix some strings in the login UX.
diff --git a/packages/core/src/login/webview/vue/login.vue b/packages/core/src/login/webview/vue/login.vue
@@ -48,8 +48,8 @@
             <svg
                 v-if="app === 'TOOLKIT' && stage !== 'CONNECTED'"
                 width="100"
-                height="100"
-                viewBox="0 0 54 54"
+                height="80"
+                viewBox="0 0 54 40"
                 fill="none"
                 id="Layer_1"
                 data-name="Layer 1"
@@ -106,13 +106,23 @@
                     class="selectable-item"
                 ></SelectableItem>
                 <SelectableItem
+                    v-if="app === 'AMAZONQ'"
                     @toggle="toggleItemSelection"
                     :isSelected="selectedLoginOption === LoginOption.ENTERPRISE_SSO"
                     :itemId="LoginOption.ENTERPRISE_SSO"
                     :itemText="'Single sign-on with AWS IAM Identity Center'"
                     :itemTitle="'Use professional license'"
                     class="selectable-item"
                 ></SelectableItem>
+                <SelectableItem
+                    v-if="app === 'TOOLKIT'"
+                    @toggle="toggleItemSelection"
+                    :isSelected="selectedLoginOption === LoginOption.ENTERPRISE_SSO"
+                    :itemId="LoginOption.ENTERPRISE_SSO"
+                    :itemText="'Sign in to AWS with single sign-on'"
+                    :itemTitle="'Workforce'"
+                    class="selectable-item"
+                ></SelectableItem>
                 <SelectableItem
                     v-if="app === 'TOOLKIT'"
                     @toggle="toggleItemSelection"
@@ -147,9 +157,8 @@
                         Using CodeCatalyst with AWS Builder ID?
                         <a href="#" @click="handleCodeCatalystSignin()">Skip to sign-in</a>
                     </div>
-                    <br /><br />
                 </div>
-                <div class="p">Start URL</div>
+                <div class="title">Start URL</div>
                 <div class="hint">URL for your organization, provided by an admin or help desk</div>
                 <input
                     class="urlInput"
@@ -160,15 +169,13 @@
                     v-model="startUrl"
                 />
                 <h4 class="start-url-error">{{ startUrlError }}</h4>
-                <br /><br />
                 <div class="title">Region</div>
                 <div class="hint">AWS Region that hosts identity directory</div>
                 <select class="regionSelect" id="regions" name="regions" v-model="selectedRegion">
                     <option v-for="region in regions" :key="region.id" :value="region.id">
                         {{ `${region.name} (${region.id})` }}
                     </option>
                 </select>
-                <br /><br />
                 <button
                     class="continue-button"
                     :disabled="startUrl.length == 0 || startUrlError.length > 0"
@@ -199,20 +206,14 @@
             </button>
             <div class="title">IAM Credentials:</div>
             <div class="hint">Credentials will be added to the appropriate ~/.aws/ files</div>
-            <br /><br />
-            <div class="p">Profile Name</div>
+            <div style="margin-bottom: 8px"></div>
+            <div class="title">Profile Name</div>
             <div class="hint">The identifier for these credentials</div>
             <input class="iamInput" type="text" id="profileName" name="profileName" v-model="profileName" />
-
-            <br /><br />
-            <div class="p">Access Key</div>
+            <div class="title">Access Key</div>
             <input class="iamInput" type="text" id="accessKey" name="accessKey" v-model="accessKey" />
-
-            <br /><br />
-            <div class="p">Secret Key</div>
+            <div class="title">Secret Key</div>
             <input class="iamInput" type="text" id="secretKey" name="secretKey" v-model="secretKey" />
-
-            <br /><br />
             <button
                 class="continue-button"
                 :disabled="profileName.length <= 0 || accessKey.length <= 0 || secretKey.length <= 0"
@@ -432,65 +433,113 @@ export default defineComponent({
     margin-bottom: 10px;
     margin-top: 10px;
 }
-.continue-button {
-    background-color: #29a7ff;
-    color: white;
-    width: 100%;
-    height: 40px;
-}
-.back-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: white;
-    font-size: 30px;
-}
 .logoIcon {
     display: flex;
     flex-direction: row;
     justify-content: left;
     align-items: flex-start;
-    padding-top: 150px;
-    padding-bottom: 10px;
+    padding-top: 130px;
+    padding-bottom: 2px;
     padding-left: 10px;
     height: auto;
 }
 .hint {
-    color: #948a8a;
+    color: #c6c6c6;
     margin-bottom: 5px;
     margin-top: 5px;
+    font-size: 8px;
+}
+.vscode-light .hint {
+    color: #3d3a3a;
+}
+.vscode-dark .hint {
+    color: #c6c6c6;
 }
+
 .title {
-    margin-bottom: 5px;
-    margin-top: 5px;
-    font-size: 15px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    font-size: 12px;
     font-weight: bold;
+}
+.title.vscode-dark {
     color: white;
 }
+.title.vscode-light {
+    color: black;
+}
+
 .h4 {
-    font-size: 10px;
+    font-size: 8px;
+    margin-bottom: 8px;
+}
+.continue-button {
+    background-color: var(--vscode-button-background);
+    color: white;
+    width: 100%;
+    height: 30px;
+    border: none;
+    border-radius: 4px;
+    font-weight: bold;
+    margin-bottom: 3px;
+    margin-top: 3px;
+}
+.back-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--vscode-button-foreground);
+    padding: 0;
+    height: 13px;
 }
 .continue-button:disabled {
-    background-color: #252526;
+    background-color: var(--vscode-input-background);
     color: #6f6f6f;
 }
 .urlInput {
-    background-color: #252526;
+    background-color: var(--vscode-input-background);
     width: 100%;
+    height: 15px;
+    color: white;
+    border: none;
+}
+.vscode-light .urlInput {
+    color: black;
+}
+.vscode-dark .urlInput {
     color: white;
 }
 .iamInput {
-    background-color: #252526;
+    background-color: var(--vscode-input-background);
     width: 100%;
+    height: 15px;
+    color: white;
+    border: none;
+    margin-bottom: 5px;
+    margin-top: 2px;
+}
+.vscode-light .iamInput {
+    color: black;
+}
+.vscode-dark .iamInput {
     color: white;
 }
 .regionSelect {
-    background-color: #252526;
+    background-color: var(--vscode-input-background);
     width: 100%;
     color: white;
+    margin-bottom: 5px;
+    margin-top: 2px;
+}
+.vscode-light .regionSelect {
+    color: black;
+}
+.vscode-dark .regionSelect {
+    color: white;
 }
 .start-url-error {
     color: #ff0000;
+    font-size: 8px;
 }
 #logo {
     fill: var(--vscode-button-foreground);
diff --git a/packages/core/src/login/webview/vue/selectableItem.vue b/packages/core/src/login/webview/vue/selectableItem.vue
@@ -2,35 +2,33 @@
     <div class="item-container" :class="{ selected: isSelected }" @click="toggleSelection">
         <div class="icon">
             <svg
-                v-if="itemTitle == 'Personal'"
-                width="20"
-                height="20"
+                v-if="itemTitle == 'Use For Free'"
+                width="16"
+                height="16"
                 viewBox="0 0 16 16"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                transform="translate(0, 20)"
             >
                 <path
+                    class="svg-path"
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M8 2C6.68228 2 5.61 3.07228 5.61 4.39C5.61 5.70772 6.68228 6.78 8 6.78C9.31771 6.78 10.39 5.70772 10.39 4.39C10.39 3.07228 9.31772 2 8 2ZM3.61 4.39C3.61 1.96772 5.57771 0 8 0C10.4223 0 12.39 1.96771 12.39 4.39C12.39 5.66447 11.8453 6.81311 10.9762 7.61551C11.1666 7.71116 11.3535 7.81608 11.5368 7.93001C13.5215 9.15787 15 11.3598 15 14V15H1V14C1 11.147 2.63919 8.7213 4.99701 7.59061C4.14356 6.78943 3.61 5.65134 3.61 4.39ZM10.482 9.62922C9.71501 9.15233 8.88729 8.90797 8.00229 8.91L8 8.91C5.59623 8.91 3.5507 10.634 3.09474 13H12.8975C12.601 11.5742 11.6867 10.3744 10.484 9.63047L10.482 9.62922Z"
-                    fill="white"
                 />
             </svg>
             <svg
-                v-if="itemTitle == 'Workforce'"
-                width="20"
-                height="20"
+                v-if="itemTitle == 'Workforce' || itemTitle == 'Use professional license'"
+                width="16"
+                height="16"
                 viewBox="0 0 16 16"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                transform="translate(0, 20)"
             >
                 <path
+                    class="svg-path"
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M4 3C3.44772 3 3 3.44772 3 4C3 4.55229 3.44772 5 4 5C4.55228 5 5 4.55229 5 4C5 3.44772 4.55228 3 4 3ZM1 4C1 2.34315 2.34315 1 4 1C5.65685 1 7 2.34315 7 4C7 5.65676 5.65701 6.99984 4.00029 7C6.21244 7.00016 8 8.78781 8 11C8 8.78772 9.78771 7 12 7C14.2123 7 16 8.78772 16 11V14C16 14.5523 15.5523 15 15 15H9C8.44771 15 8 14.5523 8 14C8 14.5523 7.55228 15 7 15H1C0.447715 15 0 14.5523 0 14V11C0 8.78772 1.78801 7 4.00029 7C2.34344 7 1 5.65685 1 4ZM12 7C10.3431 7 9 5.65685 9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4C15 5.65685 13.6569 7 12 7ZM11 4C11 3.44772 11.4477 3 12 3C12.5523 3 13 3.44772 13 4C13 4.55229 12.5523 5 12 5C11.4477 5 11 4.55229 11 4ZM10 11C10 9.89228 10.8923 9 12 9C13.1077 9 14 9.89228 14 11V13H10V11ZM2 11C2 9.89228 2.89228 9 4 9C5.10772 9 6 9.89228 6 11V13H2V11Z"
-                    fill="white"
                 />
             </svg>
             <svg
@@ -40,13 +38,12 @@
                 viewBox="0 0 16 16"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                transform="translate(0, 20)"
             >
                 <path
+                    class="svg-path"
                     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>
@@ -87,28 +84,45 @@ export default defineComponent({
 
 <style scoped>
 .item-container {
-    border: 2px solid white;
     padding: 5px;
     display: flex;
 }
+
+.item-container {
+    border: 1px solid #625f5f;
+}
+
 .selected {
-    border: 2px solid #29a7ff;
+    border: 1px solid #0e639c;
     user-select: none;
 }
+
 .title {
-    font-size: 15px;
+    font-size: 12px;
     font-weight: bold;
-    color: white;
 }
 
 .text {
     display: flex;
     flex-direction: column;
-    font-size: 15px;
-    color: white;
+    font-size: 12px;
 }
 
+.text.vscode-dark {
+    color: white;
+}
+.text.vscode-light {
+    color: black;
+}
 .icon {
     padding-right: 10px;
+    display: flex;
+    align-items: center;
+}
+.vscode-dark .icon .svg-path {
+    fill: white;
+}
+.vscode-light .icon .svg-path {
+    fill: black;
 }
 </style>
