fix: clean up some unexpected behavior and designs (#21551)

* refactor: try removing the safelist

* fix open browser bugs

* add ts in windi observed files

* resolve typescript issue

* remove markdown code class

* fix automation disconnected button color

* fix disabled card

* fix retry button

* fix config warning test

* fix color of topnav

* fix browser dropdown header text

* remove the removing

* revert unwanted change to card

Co-authored-by: Mark Noonan <[email protected]>
Co-authored-by: Zachary Williams <[email protected]>

Author: 3 people

packages/app/src/runner/SpecRunnerDropdown.vue

@@ -13,10 +13,11 @@
       :disabled="props.disabled"
     >
       <div
-        class="flex text-gray-600 gap-8px items-center"
+        class="flex gap-8px items-center"
         :class="{
           'group-hocus:text-indigo-600': !props.disabled,
           'text-indigo-600': open,
+          'text-gray-600': !open,
         }"
       >
         <slot

packages/app/src/runner/automation/AutomationDisconnected.vue

@@ -12,9 +12,7 @@
           {{ t('runner.automation.disconnected.description') }}
         </p>
         <Button
-          class="bg-indigo-500 text-white"
           size="md"
-          variant="outline"
           :prefix-icon="RefreshIcon"
           prefix-icon-class="icon-dark-white"
           @click="relaunch"

packages/frontend-shared/src/components/Card.vue

@@ -40,9 +40,10 @@
     <!-- this button can be focused via tab key and allows card hocus styles to appear
     as well as allows a keyboard user to "activate" the card with spacebar or enter keys -->
     <button
-      class="font-medium mx-8px mb-8px text-indigo-500 text-18px leading-24px focus:outline-transparent"
+      class="font-medium mx-8px mb-8px text-18px leading-24px focus:outline-transparent"
       :class="{
-        'text-gray-700 cursor-default': disabled
+        'text-gray-700 cursor-default': disabled,
+        'text-indigo-500': !disabled
       }"
       :disabled="disabled"
     >

packages/frontend-shared/src/composables/useMarkdown.ts

@@ -41,7 +41,7 @@ const defaultClasses = {
   h6: ['font-medium', 'text-xs', 'mb-3'],
   p: ['my-3 first:mt-0 text-sm mb-4'],
   pre: ['rounded p-3 bg-white mb-2'],
-  code: [`font-medium rounded text-sm px-4px py-2px bg-red-100`],
+  code: ['font-medium rounded text-sm px-4px py-2px'],
   a: ['text-blue-500', 'hover:underline text-sm'],
   ul: ['list-disc pl-6 my-3 text-sm'],
   ol: ['list-decimal pl-6 my-3 text-sm'],

packages/frontend-shared/src/gql-components/topnav/TopNav.vue

@@ -106,11 +106,12 @@
   >
     <template #heading="{ open }">
       <img
+        v-if="props.gql?.currentProject?.activeBrowser?.displayName"
         class="w-16px filter group-hocus:grayscale-0"
         data-cy="top-nav-active-browser-icon"
         :alt="props.gql?.currentProject?.activeBrowser?.displayName"
         :class="open ? 'grayscale-0' : 'grayscale'"
-        :src="allBrowsersIcons[props.gql?.currentProject?.activeBrowser?.displayName] || allBrowsersIcons.generic"
+        :src="allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName] || allBrowsersIcons.generic"
       >
       <span
         data-cy="top-nav-active-browser"

packages/frontend-shared/src/gql-components/topnav/TopNavList.vue

@@ -8,8 +8,8 @@
       @click="emit('clearForceOpen')"
     >
       <div
-        class="flex text-gray-600 gap-8px items-center group-hocus:text-indigo-600"
-        :class="(open || props.forceOpenState) ? 'text-indigo-600' : ''"
+        class="flex gap-8px items-center group-hocus:text-indigo-600"
+        :class="(open || props.forceOpenState) ? 'text-indigo-600' : 'text-gray-600'"
       >
         <slot
           name="heading"

packages/frontend-shared/src/warning/Warning.vue

@@ -14,14 +14,12 @@
     />
     <Button
       v-if="retryable"
-      class="bg-indigo-500 text-white"
       size="md"
-      variant="outline"
       :prefix-icon="RefreshIcon"
       prefix-icon-class="icon-dark-white"
       @click="emits('retry')"
     >
-      Retry
+      {{ t('warnings.retry') }}
     </Button>
   </Alert>
 </template>
@@ -34,6 +32,9 @@ import Button from '@cy/components/Button.vue'
 import RefreshIcon from '~icons/cy/refresh_x16'
 import { computed, ref } from 'vue'
 import { useVModels } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 const emits = defineEmits<{
   (eventName: 'update:modelValue', value: boolean): void

packages/launchpad/cypress/e2e/config-warning.cy.ts

@@ -11,7 +11,7 @@ describe('baseUrl', () => {
       sinon.stub(ctx._apis.projectApi, 'isListening').resolves(undefined)
     })
 
-    cy.contains('button', 'Retry').click()
+    cy.contains('button', 'Try again').click()
     cy.get('[data-cy="alert"]').should('not.exist')
   })
 

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -53,8 +53,8 @@
             >
           </div>
           <div
-            class="font-medium pt-2 text-indigo-600 text-18px leading-28px"
-            :class="{ 'text-jade-600': checked, 'text-gray-500': browser.disabled || !browser.isVersionSupported }"
+            class="font-medium pt-2 text-18px leading-28px"
+            :class="checked ? 'text-jade-600' : ( browser.disabled || !browser.isVersionSupported ) ? 'text-gray-500' : 'text-indigo-600'"
           >
             {{ browser.displayName }}
           </div>