From 67c42fcceecf89d1de730623df6646e1bfa44b13 Mon Sep 17 00:00:00 2001
From: Jess <jess@jessicasachs.io>
Date: Tue, 21 Dec 2021 20:12:05 -0500
Subject: [PATCH] chore: apply ux feedback (#19286)

Co-authored-by: Mark Noonan <oddlyaromatic@gmail.com>
Co-authored-by: Mark Noonan <mark@cypress.io>
---
 .../cypress/e2e/integration/top-nav.spec.ts   |  2 +-
 .../app/src/settings/SettingsContainer.vue    |  2 +-
 .../app/src/specs/CreateSpecModal.spec.tsx    |  4 +--
 packages/app/src/specs/CreateSpecModal.vue    |  1 -
 .../frontend-shared/src/components/Card.vue   | 16 +++++-----
 .../src/components/StandardModal.vue          | 10 +++----
 .../src/components/StandardModalFooter.vue    |  2 +-
 .../src/gql-components/Auth.vue               |  2 +-
 .../src/gql-components/HeaderBarContent.vue   |  2 +-
 .../src/gql-components/topnav/LoginModal.vue  | 20 ++++++-------
 .../src/gql-components/topnav/TopNav.vue      | 30 +++++++++++--------
 .../frontend-shared/src/locales/en-US.json    | 13 ++++----
 .../launchpad/src/setup/OpenBrowserList.vue   | 18 +++++++----
 13 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/packages/app/cypress/e2e/integration/top-nav.spec.ts b/packages/app/cypress/e2e/integration/top-nav.spec.ts
index ff5d3d112153..3a0ccc12d2a2 100644
--- a/packages/app/cypress/e2e/integration/top-nav.spec.ts
+++ b/packages/app/cypress/e2e/integration/top-nav.spec.ts
@@ -277,7 +277,7 @@ describe('App Top Nav Workflows', () => {
       it('shows log in modal when button is pressed', () => {
         cy.get('@logInButton').click()
 
-        cy.findByRole('dialog', { name: 'Log In To Cypress' }).as('logInModal')
+        cy.findByRole('dialog', { name: 'Log in to Cypress' }).as('logInModal')
         cy.get('@logInModal').findByRole('button', { name: 'Log In' })
         cy.get('@logInModal').findByRole('button', { name: 'Close' }).click()
       })
diff --git a/packages/app/src/settings/SettingsContainer.vue b/packages/app/src/settings/SettingsContainer.vue
index 225c88e082a1..22ef48ccb483 100644
--- a/packages/app/src/settings/SettingsContainer.vue
+++ b/packages/app/src/settings/SettingsContainer.vue
@@ -19,7 +19,7 @@
         :title="t('settingsPage.project.title')"
         :description="t('settingsPage.project.description')"
         :icon="IconFolder"
-        max-height="3600px"
+        max-height="10000px"
         :initially-open="initiallyOpen.project"
       >
         <ProjectSettings
diff --git a/packages/app/src/specs/CreateSpecModal.spec.tsx b/packages/app/src/specs/CreateSpecModal.spec.tsx
index c63cfc71f115..25ac9066f47c 100644
--- a/packages/app/src/specs/CreateSpecModal.spec.tsx
+++ b/packages/app/src/specs/CreateSpecModal.spec.tsx
@@ -38,11 +38,11 @@ describe('<CreateSpecModal />', () => {
   })
 
   describe('dismissing', () => {
-    it('is not dismissed when you press escape or click outside', () => {
+    it('is dismissed when you click outside', () => {
       cy.get(modalSelector)
       .click(0, 0)
       .get(modalSelector)
-      .should('be.visible')
+      .should('not.exist')
     })
 
     it('is dismissed when the X button is clicked', () => {
diff --git a/packages/app/src/specs/CreateSpecModal.vue b/packages/app/src/specs/CreateSpecModal.vue
index 4abd16f3970d..cbb345d3ac68 100644
--- a/packages/app/src/specs/CreateSpecModal.vue
+++ b/packages/app/src/specs/CreateSpecModal.vue
@@ -1,7 +1,6 @@
 <template>
   <StandardModal
     class="transition transition-all duration-200"
-    :click-outside="false"
     variant="bare"
     :title="title"
     :model-value="show"
diff --git a/packages/frontend-shared/src/components/Card.vue b/packages/frontend-shared/src/components/Card.vue
index bc122397e2bb..8086994bbba7 100644
--- a/packages/frontend-shared/src/components/Card.vue
+++ b/packages/frontend-shared/src/components/Card.vue
@@ -1,14 +1,14 @@
 <template>
   <a
-    class="block h-auto text-center rounded outline-none
-  cursor-pointer group
-  children:hyphens-manual border-1 hocus-default
-  focus-within-default"
+    class="rounded cursor-pointer h-auto outline-none border-1
+  text-center block
+  group hocus-default focus-within-default
+  children:hyphens-manual"
     :class="{
       'bg-gray-50 border-gray-100 pointer-events-none': disabled
     }"
     data-cy="card"
-    :tabindex="disabled ? 0 : undefined"
+    :tabindex="disabled ? -1 : 1"
     @click="emits('click')"
   >
     <div
@@ -18,7 +18,7 @@
       <component
         :is="hoverIcon"
         v-if="hoverIcon"
-        class="absolute opacity-0 group-hover:opacity-100"
+        class="opacity-0 absolute group-hover:opacity-100"
         :class="iconClass"
         data-cy="card-icon"
       />
@@ -32,14 +32,14 @@
       />
     </div>
     <h2
-      class="text-indigo-500 m-8px text-18px leading-24px"
+      class="m-8px text-indigo-500 text-18px leading-24px"
       :class="{
         'text-gray-700': disabled
       }"
     >
       {{ title }}
     </h2>
-    <p class="text-gray-600 tracking-tight text-14px leading-20px">
+    <p class="tracking-tight text-gray-600 text-14px leading-20px">
       {{ description }}
     </p>
     <slot name="footer" />
diff --git a/packages/frontend-shared/src/components/StandardModal.vue b/packages/frontend-shared/src/components/StandardModal.vue
index 96a6b8a2c7dd..7883ea627799 100644
--- a/packages/frontend-shared/src/components/StandardModal.vue
+++ b/packages/frontend-shared/src/components/StandardModal.vue
@@ -1,18 +1,18 @@
 <template>
   <Dialog
     :open="modelValue"
-    class="fixed inset-0 z-10 overflow-y-auto"
+    class="inset-0 z-10 fixed overflow-y-auto"
     @close="clickOutside && setIsOpen(false)"
   >
-    <div class="flex items-center justify-center min-h-screen">
+    <div class="flex min-h-screen items-center justify-center">
       <slot
         name="overlay"
         :classes="'fixed inset-0'"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-800 opacity-90" />
+        <DialogOverlay class="bg-gray-800 opacity-90 inset-0 fixed" />
       </slot>
       <div
-        class="relative mx-auto bg-white rounded"
+        class="bg-white rounded mx-auto ring-[#9095AD40] ring-4 relative"
         :class="props.class || ''"
       >
         <StandardModalHeader
@@ -27,7 +27,7 @@
 
         <DialogDescription
           v-if="$slots.description"
-          class="font-normal text-gray-700 p-24px"
+          class="font-normal p-24px text-gray-700"
         >
           <slot name="description" />
         </DialogDescription>
diff --git a/packages/frontend-shared/src/components/StandardModalFooter.vue b/packages/frontend-shared/src/components/StandardModalFooter.vue
index 3b89c9903140..665d18683dc6 100644
--- a/packages/frontend-shared/src/components/StandardModalFooter.vue
+++ b/packages/frontend-shared/src/components/StandardModalFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-b border-t-1px px-24px py-16px bg-gray-50">
+  <div class="rounded-b bg-gray-50 border-t-1px border-gray-100 py-16px px-24px">
     <slot />
   </div>
 </template>
diff --git a/packages/frontend-shared/src/gql-components/Auth.vue b/packages/frontend-shared/src/gql-components/Auth.vue
index 19ddabccf16d..5f3d294da13e 100644
--- a/packages/frontend-shared/src/gql-components/Auth.vue
+++ b/packages/frontend-shared/src/gql-components/Auth.vue
@@ -5,7 +5,7 @@
 
   <div v-else-if="showLogout">
     <button
-      class="block w-full bg-white py-8px border-gray-100 text-14px text-indigo-500 whitespace-nowrap border-rounded border-1 hover:no-underline hocus:border-gray-200 outline-transparent"
+      class="bg-white border-rounded outline-transparent border-gray-100 border-1 w-full py-8px text-14px text-indigo-500 block whitespace-nowrap hocus:border-gray-200 hover:no-underline"
       @click="handleLogout"
     >
       {{ t('topNav.login.actionLogout') }}
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index 65dd9c266bc5..4405f155e16d 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -86,7 +86,7 @@
             <i-cy-profile_x16
               class="h-16px mr-8px w-16px block icon-dark-gray-500 icon-light-gray-100 group-hocus:icon-dark-indigo-500 group-hocus:icon-light-indigo-50"
             />
-            <span class="group-hocus:text-indigo-500">{{ t('topNav.login.actionLogin') }}</span>
+            <span class="font-semibold group-hocus:text-indigo-500">{{ t('topNav.login.actionLogin') }}</span>
           </button>
         </div>
       </div>
diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue b/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
index 73467c17de28..e3254d2dfe07 100644
--- a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
@@ -1,14 +1,14 @@
 <template>
   <Dialog
     :open="modelValue"
-    class="fixed inset-0 z-10 overflow-y-auto"
+    class="inset-0 z-10 fixed overflow-y-auto"
     @close="setIsOpen"
   >
-    <div class="flex items-center justify-center min-h-screen">
-      <DialogOverlay class="fixed inset-0 bg-gray-800 opacity-90" />
+    <div class="flex min-h-screen items-center justify-center">
+      <DialogOverlay class="bg-gray-800 opacity-90 inset-0 fixed" />
 
-      <div class="relative w-480px mx-auto bg-white rounded">
-        <div class="border-b-1px min-h-64px flex justify-between items-center px-24px">
+      <div class="bg-white rounded mx-auto w-480px relative">
+        <div class="flex border-b-1px min-h-64px px-24px justify-between items-center">
           <DialogTitle class="text-gray-900 text-18px">
             {{ title }}
           </DialogTitle>
@@ -17,11 +17,11 @@
             class="hocus-default"
             @click="setIsOpen(false)"
           >
-            <i-cy-delete_x12 class="icon-dark-gray-400 w-12px h-12px" />
+            <i-cy-delete_x12 class="h-12px w-12px icon-dark-gray-400" />
           </button>
         </div>
 
-        <DialogDescription class="p-24px text-gray-700 font-normal">
+        <DialogDescription class="font-normal p-24px text-gray-700">
           <i18n-t
             v-if="!viewer"
             scope="global"
@@ -30,7 +30,7 @@
             <ExternalLink
               href="https://on.cypress.io/dashboard"
             >
-              {{ t('topNav.login.dashboard') }}
+              {{ t('topNav.login.cloud') }}
             </ExternalLink>
           </i18n-t>
           <i18n-t
@@ -40,14 +40,14 @@
           >
             <ExternalLink
               href="https://on.cypress.io/dashboard/profile"
-              class="text-indigo-500 font-medium"
+              class="font-medium text-indigo-500"
             >
               {{ viewer.fullName }}
             </ExternalLink>
           </i18n-t>
         </DialogDescription>
 
-        <div class="border-t-1px px-24px py-16px bg-gray-50">
+        <div class="bg-gray-50 border-t-1px py-16px px-24px">
           <Auth
             :gql="props.gql"
             @continue="$emit('update:modelValue', false)"
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index a93b51c4dd23..b0a8ad944e9d 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -3,25 +3,27 @@
     v-if="versions && runningOldVersion"
     data-cy="cypress-update-popover"
   >
-    <template #heading="{ open }">
+    <template #heading>
       <i-cy-arrow-outline-down_x16
-        class="h-16px w-16px group-hocus:icon-dark-indigo-500 group-hocus:icon-light-indigo-50"
-        :class="open ? 'icon-dark-indigo-500 icon-light-indigo-50' : 'icon-dark-gray-500 icon-light-gray-100'"
+        class="h-16px text-indigo-500 w-16px icon-dark-indigo-500 icon-light-indigo-50"
       />
-      <span data-cy="top-nav-version-list">v{{ versions.current.version }} <span
+      <span
+        data-cy="top-nav-version-list"
+        class="font-semibold text-indigo-500"
+      >v{{ versions.current.version }} <span
         class="text-indigo-300"
         aria-hidden="true"
-      >•</span> Upgrade</span>
+      >•</span> {{ t('topNav.upgradeText') }}</span>
     </template>
 
     <TopNavListItem
       class="min-w-278px py-8px px-16px"
       data-cy="update-hint"
     >
-      <div class="whitespace-nowrap">
+      <div class="font-semibold whitespace-nowrap">
         <ExternalLink
           :href="`${releasesUrl}/tag/v${versions.latest.version}`"
-          class="font-semibold text-indigo-500"
+          class="text-indigo-500"
           data-cy="latest-version"
         >
           {{ versions.latest.version }}
@@ -111,12 +113,13 @@
       >
       <span
         data-cy="top-nav-active-browser"
+        class="font-semibold"
       >{{ props.gql.currentProject?.currentBrowser?.displayName }} {{ props.gql.currentProject?.currentBrowser?.majorVersion }}</span>
     </template>
     <TopNavListItem
       v-for="browser in props.gql.currentProject.browsers"
       :key="browser.id"
-      class="cursor-pointer min-w-240px py-12px px-16px"
+      class="cursor-pointer min-w-240px py-12px px-16px group"
       :class="browser.isSelected ? 'bg-jade-50' : ''"
       :selectable="!browser.isSelected"
       data-cy="top-nav-browser-list-item"
@@ -133,13 +136,13 @@
       </template>
       <div>
         <button
-          class="hocus-link-default box-border"
-          :class="browser.isSelected ? 'text-jade-600' : 'text-indigo-600'"
+          class="font-medium box-border"
+          :class="browser.isSelected ? 'text-jade-700' : 'text-indigo-500 group-hover:text-indigo-700'"
         >
           {{ browser.displayName }}
         </button>
         <div
-          class="font-normal mr-20px text-gray-500 text-14px whitespace-nowrap"
+          class="font-normal mr-20px text-gray-500 text-14px filter whitespace-nowrap group-hover:mix-blend-luminosity"
         >
           {{ t('topNav.version') }} {{ browser.version }}
         </div>
@@ -165,7 +168,10 @@
         class=" h-16px w-16px group-hocus:icon-dark-indigo-500 group-hocus:icon-light-indigo-50"
         :class="open ? 'icon-dark-indigo-500 icon-light-indigo-50' : 'icon-dark-gray-500 icon-light-gray-100'"
       />
-      <span :class="{'text-indigo-600': open}">{{ t('topNav.docsMenu.docsHeading') }}</span>
+      <span
+        class="font-semibold"
+        :class="{'text-indigo-600': open}"
+      >{{ t('topNav.docsMenu.docsHeading') }}</span>
     </template>
     <div
       v-if="docsMenuVariant === 'main'"
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 43530de77423..89e81d096af0 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -67,7 +67,7 @@
       },
       "customPatternNoSpecs": {
         "title": "No Specs Found",
-        "description": "We couldn’t find any files matching the following spec patterns. You may need to move your specs or update your {0} to find them."
+        "description": "We couldn't find any files matching the following spec patterns. You may need to move your specs or update your {0} to find them."
       }
     },
     "noSpecsMessage": "If you feel that you're seeing this screen in error, and there should be specs listed here, you likely need to update the spec pattern.",
@@ -161,7 +161,7 @@
           "noParallelTime": "12 mins",
           "withParallelization": "with Parallelization",
           "withoutParallelization": "without Parallelization",
-          "intro": " With Smart Orchestration, you’ll be able to:",
+          "intro": "With Smart Orchestration, you'll be able to:",
           "bullet1": "Run spec files in parallel",
           "bullet2": "Prioritize failed specs to run first",
           "bullet3": "Cancel CI runs on test failure",
@@ -174,8 +174,8 @@
       "bodySuccess": "You are now logged in as {0}.",
       "bodyError": "An error occurred while attempting to log in:",
       "bodyBrowserError": "Cypress was unable to open your installed browser. To continue logging in, please paste this URL into your web browser:",
-      "dashboard": "Cypress Dashboard Service",
-      "titleInitial": "Log In To Cypress",
+      "cloud": "Cypress Dashboard Service",
+      "titleInitial": "Log in to Cypress",
       "titleSuccess": "Login Successful",
       "titleFailed": "Login Failed",
       "titleBrowserError": "Browser Error",
@@ -193,7 +193,8 @@
       "pasteToUpgradeProject": "To upgrade to the latest version for your project, first {0}, then paste the command below into your terminal:",
       "pasteToUpgradeGlobal": "To upgrade to the latest version, first {0}, then paste the command below into your terminal:",
       "rememberToCloseInsert": "close this app"
-    }
+    },
+    "upgradeText": "Upgrade"
   },
   "launchpadErrors": {
     "generic": {
@@ -361,7 +362,7 @@
       }
     },
     "footer": {
-      "text": "You can reconfigure the settings for this project if you’re experiencing issues with your Cypress configuration.",
+      "text": "You can reconfigure the settings for this project if you're experiencing issues with your Cypress configuration.",
       "button": "Reconfigure Project"
     }
   },
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index 58df15288e74..6f93c602092c 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/packages/launchpad/src/setup/OpenBrowserList.vue
@@ -4,18 +4,18 @@
     @submit.prevent="emit('launch', props.gql?.currentBrowser?.path)"
   >
     <div
-      class="flex flex-wrap py-16 gap-6 justify-center"
+      class="flex flex-wrap py-40px gap-24px justify-center"
       data-cy="open-browser-list"
     >
       <div
         v-for="browser of props.gql.browsers"
         :key="browser.id"
-        class="rounded border-1 text-center pt-6 pb-4 w-160px relative block"
+        class="rounded border-1 text-center min-h-144px pt-6 pb-4 w-160px relative block"
         :class="{
-          'border-jade-300 ring-2 ring-jade-50': browser.isSelected,
+          'border-jade-300 ring-2 ring-jade-100 focus:border-jade-400 focus:border-1 focus:outline-none': browser.isSelected,
           'border-gray-200': !browser.isSelected,
           'filter grayscale bg-gray-100': browser.disabled,
-          'hover:border-indigo-200 hover:ring-2 hover:ring-indigo-50': !browser.disabled && !browser.isSelected
+          'hover:border-indigo-300 hover:ring-2 hover:ring-indigo-100': !browser.disabled && !browser.isSelected
         }"
       >
         <input
@@ -33,6 +33,9 @@
         <label
           :for="browser.id"
           class="radio-label"
+          :class="{
+            'before:hocus:cursor-pointer': !browser.isSelected
+          }"
         >
           <div class="text-center">
             <img
@@ -41,8 +44,11 @@
               class="h-40px w-40px inline"
             >
           </div>
-          <div class="text-lg pt-2 text-indigo-600">{{ browser.displayName }}</div>
-          <div class="text-xs text-gray-400">v{{ browser.majorVersion }}</div>
+          <div
+            class="pt-2 text-indigo-600 text-18px leading-28px"
+            :class="{ 'text-jade-600': browser.isSelected }"
+          >{{ browser.displayName }}</div>
+          <div class="text-14px text-gray-500 leading-20px">v{{ browser.majorVersion }}</div>
         </label>
       </div>
     </div>