From cf9207faeb5dbf159e4d299c439beef04260f38a Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Wed, 18 Dec 2024 22:13:04 -0700
Subject: [PATCH 01/10] misc: update browser icons

---
 packages/app/package.json                     |   8 +-
 .../app/src/debug/LayeredBrowserIcons.vue     |  39 +--
 .../src/runner/SpecRunnerHeaderOpenMode.vue   |   6 +-
 .../src/runner/SpecRunnerHeaderRunMode.cy.tsx |   2 +-
 .../src/runner/SpecRunnerHeaderRunMode.vue    |   6 +-
 .../runner/automation/AutomationMissing.vue   |   6 +-
 packages/app/src/runs/RunCard.vue             |   4 +-
 packages/frontend-shared/package.json         |   3 +-
 .../src/assets/browserLogos.ts                |  65 +++--
 .../logos/browser-chrome-for-testing_x16.svg  |  33 ---
 .../src/assets/logos/generic-browser.svg      |  15 -
 .../src/gql-components/topnav/TopNav.vue      |   6 +-
 .../topnav/VerticalBrowserListItems.vue       |   8 +-
 packages/launchpad/package.json               |   2 +-
 .../launchpad/src/setup/OpenBrowserList.vue   |   6 +-
 yarn.lock                                     | 271 ++++++++----------
 16 files changed, 189 insertions(+), 291 deletions(-)
 delete mode 100644 packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
 delete mode 100644 packages/frontend-shared/src/assets/logos/generic-browser.svg

diff --git a/packages/app/package.json b/packages/app/package.json
index caf28bb0cc2c..bc84d3851d03 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -21,10 +21,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
-    "@cypress-design/vue-icon": "^0.26.0",
-    "@cypress-design/vue-statusicon": "^0.5.7",
-    "@cypress-design/vue-tabs": "^0.5.1",
+    "@cypress-design/vue-button": "^1.1.0",
+    "@cypress-design/vue-icon": "^1.6.0",
+    "@cypress-design/vue-statusicon": "^1.0.0",
+    "@cypress-design/vue-tabs": "^1.2.2",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
diff --git a/packages/app/src/debug/LayeredBrowserIcons.vue b/packages/app/src/debug/LayeredBrowserIcons.vue
index 4cb4032cd3b1..c14a181f6734 100644
--- a/packages/app/src/debug/LayeredBrowserIcons.vue
+++ b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -20,22 +20,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import {
-  IconBrowserChrome,
-  IconBrowserChromeBeta,
-  IconBrowserChromeCanary,
-  IconBrowserMozillaFirefox,
-  IconBrowserEdge,
-  IconBrowserWebkit,
-  IconBrowserElectronLight,
-  IconGeneralGlobe,
-} from '@cypress-design/vue-icon'
-
-// Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/develop/packages/common/src/logos/getLogoPath.ts
-export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME FOR TESTING' | 'CUSTOM CHROME FOR TESTING' | 'CHROMIUM' | 'CUSTOM CHROMIUM' | 'EDGE' | 'EDGE BETA' | 'EDGE CANARY' | 'EDGE DEV' | 'ELECTRON' | 'FIREFOX' | 'FIREFOX DEVELOPER EDITION' | 'FIREFOX NIGHTLY' | 'WEBKIT'
+import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 
 interface LayeredProps {
-  browsers: BrowserType[]
+  browsers: string[]
 }
 
 const props = defineProps<LayeredProps>()
@@ -44,7 +32,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: BROWSER_MAP[browserType] || IconGeneralGlobe,
+        icon: browserType ? allBrowsersIcons[browserType.toLowerCase()] : allBrowsersIcons.generic,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
@@ -53,25 +41,4 @@ const results = computed(() => {
   return []
 })
 
-// TODO: Add correct icons for firefox, edge, and chromium
-const BROWSER_MAP: Record<BrowserType, any> = {
-  'CHROME': IconBrowserChrome,
-  'CHROME BETA': IconBrowserChromeBeta,
-  'CANARY': IconBrowserChromeCanary,
-  'CHROME CANARY': IconBrowserChromeCanary,
-  'CHROME FOR TESTING': IconBrowserChrome,
-  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
-  'CHROMIUM': IconGeneralGlobe,
-  'CUSTOM CHROMIUM': IconGeneralGlobe,
-  'EDGE': IconBrowserEdge,
-  'EDGE BETA': IconBrowserEdge,
-  'EDGE CANARY': IconBrowserEdge,
-  'EDGE DEV': IconBrowserEdge,
-  'ELECTRON': IconBrowserElectronLight,
-  'FIREFOX': IconBrowserMozillaFirefox,
-  'FIREFOX DEVELOPER EDITION': IconBrowserMozillaFirefox,
-  'FIREFOX NIGHTLY': IconBrowserMozillaFirefox,
-  'WEBKIT': IconBrowserWebkit,
-}
-
 </script>
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
index 5c74700bf3d2..ca28e98562ef 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -63,11 +63,11 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
             class="min-w-[16px] w-[16px]"
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
             :alt="selectedBrowser.displayName"
-          >
+          />
           {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
 
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
index e534f6e83ed2..283a8bbd09b8 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -70,7 +70,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.Chrome)
+      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.chrome)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
index 8f9a53ca796f..e4a3a769fb90 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -29,12 +29,12 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
             v-if="selectedBrowser.displayName"
             class="min-w-[16px] w-[16px]"
             alt=""
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-          > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
+          /> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
       </SpecRunnerDropdown>
       <SpecRunnerDropdown
diff --git a/packages/app/src/runner/automation/AutomationMissing.vue b/packages/app/src/runner/automation/AutomationMissing.vue
index ed57e91d5d11..0d20af7b82f9 100644
--- a/packages/app/src/runner/automation/AutomationMissing.vue
+++ b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -19,10 +19,10 @@
           data-cy="select-browser"
         >
           <template #heading>
-            <img
+            <component
+              :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
               class="min-w-[16px] w-[16px]"
-              :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-            >
+            />
             {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
           </template>
 
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index a40a19a72a88..1dac4f95d8a6 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -122,7 +122,7 @@
             :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
             @click="onDebugClick"
           >
-            <IconTechnologyDebugger
+            <IconObjectBug
               aria-hidden="true"
               class="h-[16px] w-[16px] mr-2 shrink-0"
             />
@@ -155,7 +155,7 @@ import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
 import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
-import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
+import { IconObjectBug, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
 const { t } = useI18n()
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index cb688dca6793..52d2fd107a02 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.8",
-    "@cypress-design/css": "^0.13.3",
+    "@cypress-design/css": "^1.0.0",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
@@ -45,7 +45,6 @@
     "@vueuse/core": "7.2.2",
     "autoprefixer": "^10.4.19",
     "axe-core": "4.4.1",
-    "browser-logos": "github:alrra/browser-logos",
     "combine-properties": "0.1.0",
     "cross-env": "6.0.3",
     "cypress-plugin-tab": "1.0.5",
diff --git a/packages/frontend-shared/src/assets/browserLogos.ts b/packages/frontend-shared/src/assets/browserLogos.ts
index fb1317acd30e..c065747088a8 100644
--- a/packages/frontend-shared/src/assets/browserLogos.ts
+++ b/packages/frontend-shared/src/assets/browserLogos.ts
@@ -1,33 +1,38 @@
-import chromeIcon from 'browser-logos/src/chrome/chrome.svg?url'
-import firefoxIcon from 'browser-logos/src/firefox/firefox.svg?url'
-import edgeIcon from 'browser-logos/src/edge/edge.svg?url'
-import electronIcon from 'browser-logos/src/electron/electron.svg?url'
-import canaryIcon from 'browser-logos/src/chrome-canary/chrome-canary.svg?url'
-import chromeBetaIcon from 'browser-logos/src/chrome-beta/chrome-beta.svg?url'
-import chromeTestIcon from '@packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg?url'
-import chromiumIcon from 'browser-logos/src/chromium/chromium.svg?url'
-import edgeBetaIcon from 'browser-logos/src/edge-beta/edge-beta.png'
-import edgeCanaryIcon from 'browser-logos/src/edge-canary/edge-canary.png'
-import edgeDevIcon from 'browser-logos/src/edge-dev/edge-dev.png'
-import firefoxNightlyIcon from 'browser-logos/src/firefox-nightly/firefox-nightly.svg?url'
-import firefoxDeveloperEditionIcon from 'browser-logos/src/firefox-developer-edition/firefox-developer-edition.svg?url'
-import webKitIcon from 'browser-logos/src/webkit/webkit.svg?url'
-import genericBrowserLogo from '@packages/frontend-shared/src/assets/logos/generic-browser.svg?url'
+import {
+  IconBrowserElectronLight,
+  IconBrowserChrome,
+  IconBrowserChromeBeta,
+  IconBrowserChromeCanary,
+  IconBrowserChromeForTesting,
+  IconBrowserMozillaFirefox,
+  IconBrowserEdge,
+  IconBrowserChromium,
+  IconBrowserFirefoxNightly,
+  IconBrowserFirefoxDev,
+  IconBrowserEdgeCanary,
+  IconBrowserEdgeBeta,
+  IconBrowserEdgeDev,
+  IconBrowserWebkit,
+  IconGeneralGlobe,
+} from '@cypress-design/vue-icon'
 
 export const allBrowsersIcons = {
-  'Electron': electronIcon,
-  'Chrome': chromeIcon,
-  'Chrome Beta': chromeBetaIcon,
-  'Chrome Canary': canaryIcon,
-  'Chrome for Testing': chromeTestIcon,
-  'Firefox': firefoxIcon,
-  'Edge': edgeIcon,
-  'Chromium': chromiumIcon,
-  'Firefox Nightly': firefoxNightlyIcon,
-  'Firefox Developer Edition': firefoxDeveloperEditionIcon,
-  'Edge Canary': edgeCanaryIcon,
-  'Edge Beta': edgeBetaIcon,
-  'Edge Dev': edgeDevIcon,
-  'WebKit': webKitIcon,
-  'generic': genericBrowserLogo,
+  'electron': IconBrowserElectronLight,
+  'chrome': IconBrowserChrome,
+  'chrome beta': IconBrowserChromeBeta,
+  'canary': IconBrowserChromeCanary,
+  'chrome canary': IconBrowserChromeCanary,
+  'chrome for testing': IconBrowserChromeForTesting,
+  'custom chrome for testing': IconBrowserChromeForTesting,
+  'chromium': IconBrowserChromium,
+  'custom chromium': IconBrowserChromium,
+  'firefox': IconBrowserMozillaFirefox,
+  'firefox nightly': IconBrowserFirefoxNightly,
+  'firefox developer edition': IconBrowserFirefoxDev,
+  'edge': IconBrowserEdge,
+  'edge beta': IconBrowserEdgeBeta,
+  'edge canary': IconBrowserEdgeCanary,
+  'edge dev': IconBrowserEdgeDev,
+  'webkit': IconBrowserWebkit,
+  'generic': IconGeneralGlobe,
 }
diff --git a/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg b/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
deleted file mode 100644
index 0426ce0ae6e0..000000000000
--- a/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_18975_81476)">
-    <path
-      d="M0 8C0 12.4183 3.58172 16 8 16L11.4648 10.0001C10.7732 11.1957 9.48052 12 8 12C6.51727 12 5.22296 11.1932 4.53209 9.99474L1.07026 4C1.03455 4.06173 0.999647 4.12397 0.965557 4.18673C0.349778 5.32027 0 6.61929 0 8Z"
-      fill="#0F9D58" />
-    <path
-      d="M8 16C12.4183 16 16 12.4183 16 8C16 6.54285 15.6104 5.17669 14.9297 4H8C10.2091 4 12 5.79086 12 8C12 8.72651 11.8065 9.40753 11.4679 9.99474L11.4648 10.0001L8 16Z"
-      fill="#FFCD40" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-      d="M1.07026 4C2.4535 1.60879 5.03887 0 8 0C10.9611 0 13.5465 1.60879 14.9297 4H8C5.79086 4 4 5.79086 4 8C4 8.72641 4.19363 9.40758 4.53209 9.99474L1.07026 4Z"
-      fill="#DB4437" />
-    <circle cx="8.00006" cy="8" r="4" fill="white" />
-    <circle cx="7.99999" cy="8.00005" r="3.2" fill="#4285F4" />
-    <path d="M13.9773 13.3182L16 12.4545H14.1591L13.9773 13.3182Z" fill="#202124" />
-    <path d="M6 7.5H16V12.4545H6V7.5Z" fill="#3D4043" />
-    <path d="M7.08691 9.07996V8.60744H9.31321V9.07996H8.48331V11.3182H7.91681V9.07996H7.08691Z"
-      fill="white" />
-    <path
-      d="M10.2637 11.3579C10.0545 11.3579 9.87454 11.3155 9.72365 11.2308C9.57364 11.1452 9.45804 11.0243 9.37686 10.8682C9.29568 10.7111 9.25509 10.5253 9.25509 10.3109C9.25509 10.1018 9.29568 9.91825 9.37686 9.7603C9.45804 9.60235 9.57231 9.47925 9.71968 9.39101C9.86792 9.30277 10.0418 9.25865 10.2412 9.25865C10.3753 9.25865 10.5002 9.28027 10.6158 9.32351C10.7322 9.36586 10.8337 9.42984 10.9202 9.51543C11.0075 9.60102 11.0755 9.70868 11.124 9.83839C11.1726 9.96722 11.1968 10.1181 11.1968 10.2911V10.4459H9.4801V10.0965H10.6661C10.6661 10.0153 10.6484 9.9434 10.6131 9.88074C10.5778 9.81809 10.5288 9.76912 10.4662 9.73382C10.4044 9.69765 10.3325 9.67956 10.2504 9.67956C10.1648 9.67956 10.089 9.69941 10.0228 9.73912C9.95748 9.77795 9.9063 9.83045 9.86924 9.89663C9.83218 9.96193 9.81321 10.0347 9.81233 10.115V10.4472C9.81233 10.5478 9.83086 10.6348 9.86792 10.708C9.90586 10.7812 9.95925 10.8377 10.0281 10.8774C10.0969 10.9171 10.1785 10.937 10.2729 10.937C10.3356 10.937 10.393 10.9282 10.445 10.9105C10.4971 10.8929 10.5416 10.8664 10.5787 10.8311C10.6158 10.7958 10.644 10.7526 10.6634 10.7014L11.1849 10.7358C11.1584 10.8611 11.1042 10.9705 11.0221 11.064C10.9409 11.1567 10.8359 11.2291 10.7071 11.2811C10.5791 11.3323 10.4313 11.3579 10.2637 11.3579Z"
-      fill="white" />
-    <path
-      d="M13.2191 9.86486L12.7029 9.89663C12.694 9.85251 12.6751 9.8128 12.646 9.7775C12.6168 9.74133 12.5785 9.71265 12.5308 9.69147C12.484 9.66941 12.428 9.65838 12.3627 9.65838C12.2753 9.65838 12.2017 9.67691 12.1417 9.71397C12.0817 9.75015 12.0517 9.79868 12.0517 9.85957C12.0517 9.9081 12.0711 9.94913 12.1099 9.98266C12.1487 10.0162 12.2153 10.0431 12.3098 10.0634L12.6777 10.1375C12.8754 10.1781 13.0227 10.2434 13.1198 10.3334C13.2169 10.4234 13.2654 10.5417 13.2654 10.6881C13.2654 10.8214 13.2261 10.9383 13.1476 11.0389C13.07 11.1395 12.9632 11.218 12.8273 11.2745C12.6923 11.3301 12.5365 11.3579 12.3601 11.3579C12.0909 11.3579 11.8765 11.3019 11.7168 11.1898C11.558 11.0768 11.4649 10.9233 11.4375 10.7292L11.9921 10.7001C12.0089 10.7821 12.0495 10.8448 12.1139 10.888C12.1783 10.9304 12.2608 10.9515 12.3614 10.9515C12.4602 10.9515 12.5396 10.9326 12.5996 10.8946C12.6605 10.8558 12.6914 10.8059 12.6923 10.7451C12.6914 10.6939 12.6698 10.652 12.6274 10.6193C12.5851 10.5858 12.5198 10.5602 12.4315 10.5425L12.0795 10.4724C11.8809 10.4327 11.7331 10.3639 11.636 10.2659C11.5399 10.168 11.4918 10.0431 11.4918 9.89133C11.4918 9.76074 11.5271 9.64823 11.5977 9.55381C11.6691 9.4594 11.7693 9.3866 11.8981 9.33542C12.0278 9.28424 12.1796 9.25865 12.3534 9.25865C12.6102 9.25865 12.8123 9.31292 12.9597 9.42145C13.1079 9.52999 13.1944 9.67779 13.2191 9.86486Z"
-      fill="white" />
-    <path
-      d="M14.6646 9.28512V9.70868H13.4402V9.28512H14.6646ZM13.7182 8.79804H14.2821V10.6934C14.2821 10.7455 14.29 10.7861 14.3059 10.8152C14.3218 10.8434 14.3438 10.8633 14.3721 10.8748C14.4012 10.8862 14.4347 10.892 14.4727 10.892C14.4991 10.892 14.5256 10.8898 14.5521 10.8854C14.5785 10.8801 14.5988 10.8761 14.613 10.8734L14.7016 11.293C14.6734 11.3019 14.6337 11.312 14.5825 11.3235C14.5313 11.3358 14.4691 11.3433 14.3959 11.346C14.26 11.3513 14.1409 11.3332 14.0385 11.2917C13.937 11.2502 13.8581 11.1858 13.8016 11.0985C13.7451 11.0111 13.7173 10.9008 13.7182 10.7676V8.79804Z"
-      fill="white" />
-  </g>
-  <defs>
-    <clipPath id="clip0_18975_81476">
-      <rect width="16" height="16" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
diff --git a/packages/frontend-shared/src/assets/logos/generic-browser.svg b/packages/frontend-shared/src/assets/logos/generic-browser.svg
deleted file mode 100644
index b6e93b0d0677..000000000000
--- a/packages/frontend-shared/src/assets/logos/generic-browser.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31 24H43C43 19.0238 41.087 14.4944 37.9563 11.1071C35.7695 12.2278 32.9887 13.0846 29.8508 13.5652C30.5773 16.5601 31 20.1461 31 24Z" fill="#D0D2E0"/>
-<path d="M29.8508 13.5652C32.9887 13.0846 35.7695 12.2278 37.9563 11.1071C34.4852 7.35159 29.5172 5 24 5C26.4461 5 28.5992 8.40558 29.8508 13.5652Z" fill="#D0D2E0"/>
-<path d="M24 5C21.5539 5 19.4008 8.40558 18.1492 13.5652C19.9923 13.8475 21.9585 14 24 14C26.0415 14 28.0077 13.8475 29.8508 13.5652C28.5992 8.40558 26.4461 5 24 5Z" fill="#D0D2E0"/>
-<path d="M17 24H31C31 20.1461 30.5773 16.5601 29.8508 13.5652C28.0077 13.8475 26.0415 14 24 14C21.9585 14 19.9923 13.8475 18.1492 13.5652C17.4227 16.5601 17 20.1461 17 24Z" fill="#D0D2E0"/>
-<path d="M5 24H17C17 20.1461 17.4227 16.5601 18.1492 13.5652C15.0113 13.0846 12.2305 12.2278 10.0437 11.1071C6.91301 14.4944 5 19.0238 5 24Z" fill="#D0D2E0"/>
-<path d="M18.1492 13.5652C19.4008 8.40558 21.5539 5 24 5C18.4828 5 13.5148 7.35159 10.0437 11.1071C12.2305 12.2278 15.0113 13.0846 18.1492 13.5652Z" fill="#D0D2E0"/>
-<path d="M18.1492 34.4348C15.0113 34.9154 12.2305 35.7722 10.0437 36.8929C13.5148 40.6484 18.4828 43 24 43C21.5539 43 19.4008 39.5944 18.1492 34.4348Z" fill="#D0D2E0"/>
-<path d="M17 24H5C5 28.9762 6.91301 33.5056 10.0437 36.8929C12.2305 35.7722 15.0113 34.9154 18.1492 34.4348C17.4227 31.4398 17 27.8539 17 24Z" fill="#D0D2E0"/>
-<path d="M31 24H17C17 27.8539 17.4227 31.4398 18.1492 34.4348C19.9923 34.1525 21.9585 34 24 34C26.0415 34 28.0077 34.1525 29.8508 34.4348C30.5773 31.4398 31 27.8539 31 24Z" fill="#D0D2E0"/>
-<path d="M18.1492 34.4348C19.4008 39.5944 21.5539 43 24 43C26.4461 43 28.5992 39.5944 29.8508 34.4348C28.0077 34.1525 26.0415 34 24 34C21.9585 34 19.9923 34.1525 18.1492 34.4348Z" fill="#D0D2E0"/>
-<path d="M24 43C29.5172 43 34.4852 40.6484 37.9563 36.8929C35.7695 35.7722 32.9887 34.9154 29.8508 34.4348C28.5992 39.5944 26.4461 43 24 43Z" fill="#D0D2E0"/>
-<path d="M43 24H31C31 27.8539 30.5773 31.4398 29.8508 34.4348C32.9887 34.9154 35.7695 35.7722 37.9563 36.8929C41.087 33.5056 43 28.9762 43 24Z" fill="#D0D2E0"/>
-<path d="M24 14V15V14ZM24 34V33V34ZM43 23H5V25H43V23ZM31 25H43V23H31V25ZM44 24C44 18.7624 41.9854 13.9931 38.6906 10.4284L37.2219 11.7859C40.1886 14.9957 42 19.2852 42 24H44ZM37.5002 10.2172C35.4287 11.2789 32.7553 12.1087 29.6994 12.5767L30.0022 14.5537C33.2221 14.0605 36.1104 13.1768 38.4124 11.9971L37.5002 10.2172ZM28.879 13.8009C29.5845 16.7094 30 20.2153 30 24H32C32 20.0768 31.5701 16.4109 30.8226 13.3295L28.879 13.8009ZM24 6C24.7229 6 25.6102 6.50993 26.542 7.90357C27.4537 9.26706 28.2687 11.2851 28.879 13.8009L30.8226 13.3295C30.1813 10.6857 29.294 8.42112 28.2046 6.79192C27.1355 5.19286 25.7232 4 24 4V6ZM29.6994 12.5767C27.9077 12.8511 25.9921 13 24 13V15C26.0908 15 28.1077 14.8438 30.0022 14.5537L29.6994 12.5767ZM24 6C29.2268 6 33.9322 8.22655 37.2219 11.7859L38.6906 10.4284C35.0382 6.47664 29.8076 4 24 4V6ZM24 4C22.2768 4 20.8645 5.19286 19.7954 6.79192C18.706 8.42112 17.8187 10.6857 17.1774 13.3295L19.121 13.8009C19.7313 11.2851 20.5463 9.26706 21.458 7.90357C22.3898 6.50993 23.2771 6 24 6V4ZM17.9978 14.5537C19.8923 14.8438 21.9092 15 24 15V13C22.0079 13 20.0923 12.8511 18.3006 12.5767L17.9978 14.5537ZM18 24C18 20.2153 18.4155 16.7094 19.121 13.8009L17.1774 13.3295C16.4299 16.4109 16 20.0768 16 24H18ZM17 25H31V23H17V25ZM5 25H17V23H5V25ZM18.3006 12.5767C15.2447 12.1087 12.5713 11.2789 10.4998 10.2172L9.58763 11.9971C11.8896 13.1768 14.7779 14.0605 17.9978 14.5537L18.3006 12.5767ZM9.30935 10.4284C6.0146 13.9931 4 18.7624 4 24H6C6 19.2852 7.81142 14.9957 10.7781 11.7859L9.30935 10.4284ZM10.7781 11.7859C14.0678 8.22655 18.7732 6 24 6V4C18.1924 4 12.9618 6.47664 9.30935 10.4284L10.7781 11.7859ZM4 24C4 29.2376 6.0146 34.0068 9.30935 37.5716L10.7781 36.2141C7.81142 33.0043 6 28.7148 6 24H4ZM10.4998 37.7828C12.5713 36.7211 15.2447 35.8913 18.3006 35.4233L17.9978 33.4463C14.7779 33.9395 11.8896 34.8232 9.58763 36.0029L10.4998 37.7828ZM19.121 34.1991C18.4155 31.2906 18 27.7847 18 24H16C16 27.9232 16.4299 31.5891 17.1774 34.6705L19.121 34.1991ZM24 42C23.2771 42 22.3898 41.4901 21.458 40.0964C20.5463 38.7329 19.7313 36.7149 19.121 34.199L17.1774 34.6705C17.8187 37.3143 18.706 39.5789 19.7954 41.2081C20.8645 42.8071 22.2768 44 24 44V42ZM18.3006 35.4233C20.0923 35.1489 22.0079 35 24 35V33C21.9092 33 19.8923 33.1562 17.9978 33.4463L18.3006 35.4233ZM24 42C18.7732 42 14.0678 39.7735 10.7781 36.2141L9.30935 37.5716C12.9618 41.5234 18.1924 44 24 44V42ZM24 35C25.9921 35 27.9077 35.1489 29.6994 35.4233L30.0022 33.4463C28.1077 33.1562 26.0908 33 24 33V35ZM30.8226 34.6705C31.57 31.5891 32 27.9232 32 24H30C30 27.7847 29.5845 31.2906 28.879 34.1991L30.8226 34.6705ZM28.879 34.1991C28.2687 36.7149 27.4537 38.7329 26.542 40.0964C25.6102 41.4901 24.7229 42 24 42V44C25.7232 44 27.1355 42.8071 28.2046 41.2081C29.294 39.5789 30.1813 37.3143 30.8226 34.6705L28.879 34.1991ZM24 44C29.8076 44 35.0382 41.5234 38.6906 37.5716L37.2219 36.2141C33.9322 39.7735 29.2268 42 24 42V44ZM38.4124 36.0029C36.1104 34.8232 33.2221 33.9395 30.0022 33.4463L29.6994 35.4233C32.7553 35.8913 35.4287 36.7211 37.5002 37.7828L38.4124 36.0029ZM42 24C42 28.7148 40.1886 33.0043 37.2219 36.2141L38.6906 37.5716C41.9854 34.0068 44 29.2376 44 24H42Z" fill="#AFB3C7"/>
-</svg>
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index 69926fa2db53..42365b9323af 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -105,14 +105,14 @@
     v-if="props.gql?.currentProject?.activeBrowser && showBrowsers"
   >
     <template #heading="{ open }">
-      <img
+      <component
+        :is="props.gql.currentProject.activeBrowser.displayName ? allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
         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"
-      >
+      />
       <span
         data-cy="top-nav-active-browser"
         class="font-medium whitespace-nowrap"
diff --git a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
index 96bb32b445d9..372fbf32ab89 100644
--- a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
@@ -15,12 +15,12 @@
       :data-browser-id="browser.id"
       @click="handleBrowserChoice(browser)"
     >
-      <img
-        class="mr-[16px] min-w-[26px] w-[26px]"
+      <component
+        :is="browser.displayName ? allBrowsersIcons[browser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+        class="mr-[16px] min-w-[26px] w-[26px] min-h-[45px]"
         :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
-        :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
         alt=""
-      >
+      />
       <div class="grow">
         <div>
           <button
diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
index f0fa325261c6..b50a7c4a29e2 100644
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
+    "@cypress-design/vue-button": "^1.1.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@intlify/unplugin-vue-i18n": "4.0.0",
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index 50b5fde2f8af..642fca90d95e 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/packages/launchpad/src/setup/OpenBrowserList.vue
@@ -48,12 +48,12 @@
             </template>
           </Tooltip>
           <div class="text-center">
-            <img
-              :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
+            <component
+              :is="browser.displayName ? allBrowsersIcons[browser.displayName.toLowerCase()] : allBrowsersIcons.generic"
               alt=""
               class="h-[40px] w-[40px] inline"
               :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
-            >
+            />
           </div>
           <div
             class="font-medium pt-2 px-2 text-[18px] leading-[28px] truncate"
diff --git a/yarn.lock b/yarn.lock
index 6f4f2d037e02..0f97dee55866 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2654,103 +2654,74 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@cypress-design/constants-button@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-button/-/constants-button-0.1.3.tgz#6a3e14bbd0cf6d6c51763f3cc3b286dadc407a77"
-  integrity sha512-0ZBn1DvctrlypkXmclp9L8jwtaXKKBs2goPh43TgYoDNcX/IrNnmn1K/ivRcEN3Zq00qlz7Jgwv7fIxD/w8beg==
-
-"@cypress-design/constants-statusicon@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-statusicon/-/constants-statusicon-0.2.0.tgz#0e47048aafe72b2ac3476c7830776a9704e639f9"
-  integrity sha512-378jTLAxmUhfwCo0eVP3TscZAgwww2xG2AGQ1xaxDyQ77xq4h9tmoVtxEdEaWbe6vh+C6VSkF7o8naxW6go8UA==
-
-"@cypress-design/constants-tabs@*":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-tabs/-/constants-tabs-0.2.0.tgz#e5a05204ecd27ca8b365b4f9537edc07e5d3b9fa"
-  integrity sha512-2ndtAO0ycA0kgpAaCho9T4Y18a9XUbAL/S06hvwSKR7PuEmmpVx9ndGY2STaWcx5qKLRoBfMQWuPwDrN82dk5A==
-  dependencies:
-    "@cypress-design/icon-registry" "*"
-
-"@cypress-design/css@^0.13.3":
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.13.3.tgz#3501e2cdbf671d75f75c8f081030fb0b27bf1714"
-  integrity sha512-+Jj/7K5gkFUOVScssUc39UOEeZiPEtiSjo+/UfxtrpN2or1c8z+56GQqDwgrdf5z5CBSicnWky+LjBS3kREglQ==
+"@cypress-design/color-constants@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/color-constants/-/color-constants-1.0.0.tgz#a8373c5eeeefc9b2040710b9159c96e6e2ac09b3"
+  integrity sha512-ZGSfWR5zSQQkc6+k0xiRiuCdxUzoPYOwdIOHIK6M0PqhPg3rmP455M752U082jbIsQvoea4k9CNE053oOna4Zw==
   dependencies:
-    "@windicss/plugin-interaction-variants" "^1.0.0"
+    "@tailwindcss/container-queries" "^0.1.1"
     lodash "^4.17.21"
     resolve-pkg "^2.0.0"
-    tailwindcss "^3.3.2"
+    tailwindcss "^3.4.3"
+    tailwindcss-hocus "^0.0.7"
+
+"@cypress-design/constants-statusicon@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-statusicon/-/constants-statusicon-1.0.1.tgz#d7398d2cdb4d9a640876f631eb2cc0d851d5f385"
+  integrity sha512-jAg9vttHAVGu3dydZpUkE/mUg0I7fqp2hKNVJeTCI0bKKSnO7XAlEb+JTO8Ffwup6YIR6hTp0DOF0xRs6nAIJg==
 
-"@cypress-design/css@^0.15.1":
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.15.1.tgz#602da84aacb11a576b82494234e97396815a7822"
-  integrity sha512-pM6W6+KK3KIQxPSNJtXyykJFEhkKVrFxpbRKpv7FKlcgHSXZ40MRsOym+U0/iSs39w3KJ3nrvz8uHdQmpfoemw==
+"@cypress-design/constants-tabs@^1.2.1":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-tabs/-/constants-tabs-1.2.2.tgz#23414105e4eba00600090f68ecd9235ca3b30597"
+  integrity sha512-mbcTV3Dvpnsx/X3wCnmawLUGE7sb1Z4HTF+TeEPnlSPzyboyW6IJvAtEIYUU8j+0ahffDFXayjCd/6U2dEpwkA==
   dependencies:
-    "@windicss/plugin-interaction-variants" "^1.0.0"
-    lodash "^4.17.21"
-    resolve-pkg "^2.0.0"
-    tailwindcss "^3.3.3"
+    "@cypress-design/icon-registry" "^1.5.1"
 
-"@cypress-design/css@^0.17.1":
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.17.1.tgz#ff1863d2bce196394f55e6da6077e595b3e5ebfb"
-  integrity sha512-eQlCwbifrTTU8qApJv+c4rS5u1sI06yaGZAYeA4J47mOe3Goxadq7P3lVVW0n3WZrcHEZvkAh5qj0AN2Hpsakg==
+"@cypress-design/css@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-1.0.0.tgz#65c48ee7c7f62446e239f3590016e8817d09b816"
+  integrity sha512-FtKERQybOTBd+2USvTKQVZYnXE9EF2y8hLCslm2iNyb1TbcKU4fLc3aeSTEFKupDsZxCCYDDQJHSYxjWjgYiTg==
   dependencies:
     "@tailwindcss/container-queries" "^0.1.1"
     lodash "^4.17.21"
     resolve-pkg "^2.0.0"
-    tailwindcss "^3.4.1"
+    tailwindcss "^3.4.3"
+    tailwindcss-hocus "^0.0.7"
 
-"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.34.0":
-  version "0.34.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.34.0.tgz#773543dcc89bae562c6c0a59dac46e750dfe4ea0"
-  integrity sha512-X8zW6/WipS3XFn+XbVG+kDEvTxHKngNVE+b5l+wYUxxDnabxvgaTPNmJSwmm3ya/Va5oU0hdL4llUop36BQM4Q==
-  dependencies:
-    "@cypress-design/css" "^0.17.1"
-
-"@cypress-design/icon-registry@^0.28.0":
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.28.0.tgz#a3c5336f7b544d8be82b6a941b8915ba7084d5c9"
-  integrity sha512-xJvE1u3KBQz6Hc0Ea3ia9xUDKxTj5MdKrgYrlE9t321qKxStxVN34VB595TfWzluHZzUb6Qu7QqgqdCTFTccgw==
-  dependencies:
-    "@cypress-design/css" "^0.15.1"
-
-"@cypress-design/vue-button@^0.11.6":
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-0.11.6.tgz#57f6a9f03034e1c84f311a1fef2ecb5cf3f50c80"
-  integrity sha512-tERjqnX07SV9haaq83eOJ35wJ9bW8c1xv6arVxT+mJIPqDAMeob60uUrXDY3m7xRTKNr7PjP1/gcKuuPELR/NQ==
+"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.5.1", "@cypress-design/icon-registry@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.6.0.tgz#6367e40722cbf191a0086419ba06de18e7e79f46"
+  integrity sha512-erJVhL+0gk2oL+fCnBy3hhcs7xFM1abPLZzmIupOtoyb/PB5DtpHtGi3QEF2MBu1UcMjRhuihF6VO3rqZhkn2Q==
   dependencies:
-    "@cypress-design/constants-button" "^0.1.3"
+    "@cypress-design/color-constants" "^1.0.0"
 
-"@cypress-design/vue-icon@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.26.0.tgz#f56bee36514dc4f9b9606a75f69201e312ff9c70"
-  integrity sha512-ZiMpIvjNWX/x6OJDyhb9VrXXlwPQTgSx87PA4VMVC9JVARXja4UZ950KVTZVEdDuCG8MGYu3N4/hWOrNxCKXCQ==
-  dependencies:
-    "@cypress-design/icon-registry" "^0.28.0"
+"@cypress-design/vue-button@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-1.1.0.tgz#447cfee08c15186f6ba04928bbc14d4e95639de7"
+  integrity sha512-SLgYtpjsT8SgzbxpK/Me2aSFCRiB0K/K8WeDHw9kcpDR9St4rEmRUYNcKBCPL0knanOZEOspEmaGzyWcfsLDpQ==
 
-"@cypress-design/vue-icon@^0.32.0":
-  version "0.32.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.32.0.tgz#b5b82a7b22682364584f73fe37901951eccc19cd"
-  integrity sha512-QCgagN1FVnUJ3dLxRI0xQLjL5eSkN6xOqAyoNv65IgCGYi0BXLblaQeOKG56H1CRPgBYo2TwpI+RkJeX6yYztw==
+"@cypress-design/vue-icon@^1.0.0", "@cypress-design/vue-icon@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-1.6.0.tgz#d67e6cf241363f648896717efc456da28590cd0f"
+  integrity sha512-XQjGWTw31ENMh0npWynR71F56zzqgPrryjUFi2b7lremzHzwHV8KaonKNVVSzbJnDOyI50VCns70Rhd8yS6VNw==
   dependencies:
-    "@cypress-design/icon-registry" "^0.34.0"
+    "@cypress-design/icon-registry" "^1.6.0"
 
-"@cypress-design/vue-statusicon@^0.5.7":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.5.7.tgz#778da6d078e3f55934da99c81218bbe1a29e83cb"
-  integrity sha512-VIsDRrARt6q2DOHAAG1eTX7Nf8Dg+CpIz3TOxmIMNNY0AuqPClmAuxz3SG9i6BrMLfmpdraKIPEItVAfbKQmWA==
+"@cypress-design/vue-statusicon@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-1.0.0.tgz#0f065668beba2eb0c2a796d1a287bdb02777cbb3"
+  integrity sha512-JJoS4PEpy/MEDC3A9SclQjJ7snSpUtX2BXBiqGSEQT16Zgn9ouV75dCuqI3HDcX3DmvbKnH2jwWvVGSTv17xbg==
   dependencies:
-    "@cypress-design/constants-statusicon" "^0.2.0"
-    "@cypress-design/icon-registry" "^0.34.0"
-    "@cypress-design/vue-icon" "^0.32.0"
+    "@cypress-design/constants-statusicon" "^1.0.0"
+    "@cypress-design/icon-registry" "^1.0.0"
+    "@cypress-design/vue-icon" "^1.0.0"
 
-"@cypress-design/vue-tabs@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-tabs/-/vue-tabs-0.5.1.tgz#840cdf85cb7d6f1cdd480efad83251395e309400"
-  integrity sha512-Xbe98UIgtFobYd39mwkU3QofCWwBUpksfLzAXsq0vhCKk4ePfOYkVtTJRO1GSu4y/HPmhkkRFmZ3ZXFSvX/fCg==
+"@cypress-design/vue-tabs@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-tabs/-/vue-tabs-1.2.2.tgz#b762c8c53108ca782878479442cae80f57cbee0a"
+  integrity sha512-CpqboAShZ3cWW0/pk12ziXSOb4tq+avRlIqkY9SrUsugHEvLUwKgo1aeokLA+8BuEaYziwyPStk2hn4f0e8JcA==
   dependencies:
-    "@cypress-design/constants-tabs" "*"
+    "@cypress-design/constants-tabs" "^1.2.1"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"
@@ -9313,11 +9284,6 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@windicss/plugin-interaction-variants@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-interaction-variants/-/plugin-interaction-variants-1.0.0.tgz#11e412c6fd653899f6cced4e4f7b402eb5456981"
-  integrity sha512-jk0kvJEwphPlzjgCASxi0yCrLIrMPBHKTjPB1vF2LZsmWVaIPhKQRfpJW6+G093ipDos1E2BkevDrh/R2Ln8gg==
-
 "@xmldom/xmldom@^0.8.8":
   version "0.8.10"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
@@ -10985,10 +10951,6 @@ brorand@^1.0.1, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-"browser-logos@github:alrra/browser-logos":
-  version "75.0.0"
-  resolved "https://codeload.github.com/alrra/browser-logos/tar.gz/021a9533c9d872dccf92713f59afb383b29a50eb"
-
 browser-resolve@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-2.0.0.tgz#99b7304cb392f8d73dba741bb2d7da28c6d7842b"
@@ -19927,10 +19889,10 @@ jimp@^0.2.21:
     tinycolor2 "^1.1.2"
     url-regex "^3.0.0"
 
-jiti@^1.18.2, jiti@^1.21.0:
-  version "1.21.6"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
-  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+jiti@^1.18.2, jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
 jose@^4.15.5:
   version "4.15.5"
@@ -20759,10 +20721,10 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lilconfig@^2.0.5, lilconfig@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
 line-column@^1.0.2:
   version "1.0.2"
@@ -21815,7 +21777,7 @@ methods@1.1.2, methods@^1.1.1, methods@^1.1.2, methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@4.0.6, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.6.tgz#ab4e37c42726b9cd788181ba4a2a4fead8e394a3"
   integrity sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==
@@ -21842,6 +21804,14 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -25189,10 +25159,10 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
-picocolors@^1.0.0, picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@2.3.0:
   version "2.3.0"
@@ -25464,13 +25434,13 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
-  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
-    lilconfig "^2.0.5"
-    yaml "^2.1.1"
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
 
 postcss-loader@7.3.2:
   version "7.3.2"
@@ -25518,12 +25488,12 @@ postcss-nested@^4.1.1:
     postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
 
-postcss-nested@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
-  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.1.1"
 
 postcss-scss@^3.0.2:
   version "3.0.5"
@@ -25532,7 +25502,7 @@ postcss-scss@^3.0.2:
   dependencies:
     postcss "^8.2.7"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -25567,14 +25537,14 @@ postcss@^7.0.11, postcss@^7.0.18, postcss@^7.0.32:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.2.14, postcss@^8.2.7, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.38:
-  version "8.4.38"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+postcss@^8.1.10, postcss@^8.2.14, postcss@^8.2.7, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.27, postcss@^8.4.38, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 postject@^1.0.0-alpha.6:
   version "1.0.0-alpha.6"
@@ -27131,7 +27101,7 @@ resolve@^0.6.3:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.6.3.tgz#dd957982e7e736debdf53b58a4dd91754575dd46"
   integrity sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.4.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.4.0:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -28681,10 +28651,10 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map-js@^0.6.2:
   version "0.6.2"
@@ -29455,14 +29425,14 @@ subscriptions-transport-ws@^0.9.18:
     symbol-observable "^1.0.4"
     ws "^5.2.0 || ^6.0.0 || ^7.0.0"
 
-sucrase@^3.32.0:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
-  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
     commander "^4.0.0"
-    glob "7.1.6"
+    glob "^10.3.10"
     lines-and-columns "^1.1.6"
     mz "^2.7.0"
     pirates "^4.0.1"
@@ -29681,6 +29651,11 @@ systemjs@^6.15.1:
   resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.15.1.tgz#74175b6810e27a79e1177d21db5f0e3057118cea"
   integrity sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==
 
+tailwindcss-hocus@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-hocus/-/tailwindcss-hocus-0.0.7.tgz#bd5801deec87765237ed66f676d632365b3c490c"
+  integrity sha512-KY3jLlppAoPkCLRhDqbe503c1Ryq//G1bLQqFCZz1pnB0JFzHa3VK0bXvjTa8n/dwCxgkhi5uJm1d6gp8OzPhw==
+
 tailwindcss@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.1.4.tgz#786bd5faaf485c9eddcb821dd55666c56baa814e"
@@ -29701,33 +29676,33 @@ tailwindcss@1.1.4:
     pretty-hrtime "^1.0.3"
     reduce-css-calc "^2.1.6"
 
-tailwindcss@^3.3.1, tailwindcss@^3.3.2, tailwindcss@^3.3.3, tailwindcss@^3.4.1:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"
-  integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
+tailwindcss@^3.3.1, tailwindcss@^3.4.3:
+  version "3.4.17"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
-    lilconfig "^2.1.0"
-    micromatch "^4.0.5"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
     postcss-import "^15.1.0"
     postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -32659,10 +32634,10 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.0.0, yaml@^2.1.1, yaml@^2.4.1:
-  version "2.5.1"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
-  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
+yaml@^2.0.0, yaml@^2.3.4, yaml@^2.4.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
 
 yargs-parser@13.1.1:
   version "13.1.1"

From bc66aecc6cddaba977ae238e6f49a3e131ea2362 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Thu, 19 Dec 2024 09:27:49 -0700
Subject: [PATCH 02/10] update changelog

---
 cli/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index ee9a11991dcb..1398f32b0156 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.17.1
+
+_Released 12/31/2024_
+
+**Misc:**
+
+- Updated to use Cypress design system browser icons. Addressed in [#30790](https://github.com/cypress-io/cypress/pull/30790).
+
 ## 13.17.0
 
 _Released 12/17/2024_

From b4699bb5ee6c468fb4ce4484794e5c0c63ec1911 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Thu, 19 Dec 2024 09:32:05 -0700
Subject: [PATCH 03/10] update changelog

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 1398f32b0156..17722b2a32bb 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,7 +1,7 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 ## 13.17.1
 
-_Released 12/31/2024_
+_Released 12/31/2024 (PENDING)_
 
 **Misc:**
 

From 37f29139357335279ee5368a9a5188bb83d4ced8 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Thu, 19 Dec 2024 09:47:12 -0700
Subject: [PATCH 04/10] updates

---
 packages/app/src/debug/LayeredBrowserIcons.vue                  | 2 +-
 packages/app/src/runner/SpecRunnerHeaderOpenMode.vue            | 2 +-
 packages/app/src/runner/SpecRunnerHeaderRunMode.vue             | 2 +-
 packages/app/src/runner/automation/AutomationMissing.vue        | 2 +-
 packages/frontend-shared/src/gql-components/topnav/TopNav.vue   | 2 +-
 .../src/gql-components/topnav/VerticalBrowserListItems.vue      | 2 +-
 packages/launchpad/src/setup/OpenBrowserList.vue                | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/debug/LayeredBrowserIcons.vue b/packages/app/src/debug/LayeredBrowserIcons.vue
index c14a181f6734..2e075ee48225 100644
--- a/packages/app/src/debug/LayeredBrowserIcons.vue
+++ b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -32,7 +32,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: browserType ? allBrowsersIcons[browserType.toLowerCase()] : allBrowsersIcons.generic,
+        icon: allBrowsersIcons[browserType?.toLowerCase()] || allBrowsersIcons.generic,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
index ca28e98562ef..df1435a01b8f 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -64,7 +64,7 @@
       >
         <template #heading>
           <component
-            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             class="min-w-[16px] w-[16px]"
             :alt="selectedBrowser.displayName"
           />
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
index e4a3a769fb90..ed2ba4781733 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -30,7 +30,7 @@
       >
         <template #heading>
           <component
-            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             v-if="selectedBrowser.displayName"
             class="min-w-[16px] w-[16px]"
             alt=""
diff --git a/packages/app/src/runner/automation/AutomationMissing.vue b/packages/app/src/runner/automation/AutomationMissing.vue
index 0d20af7b82f9..405669b4b6c4 100644
--- a/packages/app/src/runner/automation/AutomationMissing.vue
+++ b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -20,7 +20,7 @@
         >
           <template #heading>
             <component
-              :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+              :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
               class="min-w-[16px] w-[16px]"
             />
             {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index 42365b9323af..f83d9f43ce80 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -106,7 +106,7 @@
   >
     <template #heading="{ open }">
       <component
-        :is="props.gql.currentProject.activeBrowser.displayName ? allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+        :is="allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
         v-if="props.gql?.currentProject?.activeBrowser?.displayName"
         class="w-[16px] filter group-hocus:grayscale-0"
         data-cy="top-nav-active-browser-icon"
diff --git a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
index 372fbf32ab89..2fcbece2ba24 100644
--- a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
@@ -16,7 +16,7 @@
       @click="handleBrowserChoice(browser)"
     >
       <component
-        :is="browser.displayName ? allBrowsersIcons[browser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+        :is="allBrowsersIcons[browser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
         class="mr-[16px] min-w-[26px] w-[26px] min-h-[45px]"
         :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
         alt=""
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index 642fca90d95e..75ffd2fc1028 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/packages/launchpad/src/setup/OpenBrowserList.vue
@@ -49,7 +49,7 @@
           </Tooltip>
           <div class="text-center">
             <component
-              :is="browser.displayName ? allBrowsersIcons[browser.displayName.toLowerCase()] : allBrowsersIcons.generic"
+              :is="allBrowsersIcons[browser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
               alt=""
               class="h-[40px] w-[40px] inline"
               :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"

From cfac1e9421573d6ab1c6420385babbed8d38c14c Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 20 Dec 2024 11:29:36 -0700
Subject: [PATCH 05/10] fix display:none issue

---
 .../frontend-shared/src/gql-components/topnav/TopNavList.vue  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
index 22922aadf282..5f45c718e4d9 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
@@ -23,10 +23,12 @@
       </div>
     </PopoverButton>
     <TransitionQuickFade>
+      <!-- instead of using 'hidden' class, we use 'h-0 w-0 overflow-hidden' due to -->
+      <!-- https://github.com/cypress-io/cypress-design/issues/517 -->
       <PopoverPanel
         static
         class="bg-white rounded shadow-dropdown top-[36px] right-0 z-10 absolute"
-        :class="(forceOpenState === true) || open ? '' : 'hidden'"
+        :class="(forceOpenState === true) || open ? '' : 'h-0 w-0 overflow-hidden'"
       >
         <ul
           v-if="variant !== 'panel'"

From 3d0744c9d8919141ee46555ae6e2664b483aad3c Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 20 Dec 2024 15:43:36 -0700
Subject: [PATCH 06/10] updating tests

---
 .../cypress/component/support/ctSupport.ts    | 40 +++++++++++++++++++
 .../app/cypress/component/support/index.ts    | 16 --------
 .../runner/SpecRunnerHeaderOpenMode.cy.tsx    |  5 +--
 .../src/runner/SpecRunnerHeaderRunMode.cy.tsx |  6 +--
 .../automation/AutomationMissing.cy.tsx       |  4 +-
 .../specs/switcher/TestingTypeSwitcher.cy.tsx |  4 +-
 6 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
index 737d9a58e0d9..935ec5b9d5c3 100644
--- a/packages/app/cypress/component/support/ctSupport.ts
+++ b/packages/app/cypress/component/support/ctSupport.ts
@@ -2,6 +2,16 @@ import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
 import type { Socket } from '@packages/socket/lib/browser'
 
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      verifyBrowserIconSvg(
+        expectedSvgData: string
+      ): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
 export const StubWebsocket = new Proxy<Socket>(Object.create(null), {
   get: (obj, prop) => {
     throw Error(`Cannot access ${String(prop)} on StubWebsocket!`)
@@ -49,3 +59,33 @@ export const createTestAutIframe = (eventManager = createEventManager()) => {
     null, // CypressJQuery, shouldn't be using driver in component tests anyway
   )
 }
+
+function verifyBrowserIconSvg (
+  subject: JQuery<HTMLElement>,
+  expectedSvgData: string,
+) {
+  cy.then(() => {
+    let actualSvgData = ''
+
+    subject.each((_, el) => {
+      actualSvgData += el.outerHTML
+    })
+
+    const actualNormalizedSvgData = actualSvgData
+    .replaceAll('></path>', '/>')
+    .replaceAll('></circle>', '/>')
+    .replace(/<title>.*<\/title>/, '')
+
+    const expectedNormalizedSvgData = expectedSvgData.replace(/<defs>.*<\/defs>/, '')
+
+    expect(actualNormalizedSvgData).to.equal(expectedNormalizedSvgData)
+
+    return subject
+  })
+}
+
+Cypress.Commands.add(
+  'verifyBrowserIconSvg',
+  { prevSubject: true },
+  verifyBrowserIconSvg,
+)
diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
index 18d1ee68dad2..8b8fcfdda03a 100644
--- a/packages/app/cypress/component/support/index.ts
+++ b/packages/app/cypress/component/support/index.ts
@@ -1,22 +1,6 @@
 /// <reference path="../../../../frontend-shared/cypress/support/component.ts" />
 import '../../../../frontend-shared/cypress/support/component.ts'
 import { registerMountFn } from '@packages/frontend-shared/cypress/support/common'
-// ***********************************************************
-// This example support/index.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 
 import { createRouter } from '../../../src/router/router'
 import { createPinia } from '../../../src/store'
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
index be1bb84a1d39..727bfc7dc7fc 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -2,8 +2,8 @@ import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
 import { useAutStore } from '../store'
 import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { ExternalLink_OpenExternalDocument } from '@packages/frontend-shared/src/generated/graphql'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
   const eventManager = createEventManager()
@@ -227,8 +227,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
 
     cy.findByTestId('select-browser').contains('Fake Browser')
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
-
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.findByTestId('viewport').contains('500x500')
   })
 
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
index 283a8bbd09b8..7359c6a0e30a 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -1,6 +1,6 @@
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 import { useAutStore } from '../store'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
+import { cyGeneralGlobeX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const browser = {
   displayName: 'Chrome',
@@ -70,7 +70,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.chrome)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyBrowserChromeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
@@ -86,7 +86,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
diff --git a/packages/app/src/runner/automation/AutomationMissing.cy.tsx b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
index f2677d527f17..0b25d8299b1c 100644
--- a/packages/app/src/runner/automation/AutomationMissing.cy.tsx
+++ b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
@@ -1,6 +1,6 @@
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { AutomationMissingFragmentDoc, VerticalBrowserListItems_SetBrowserDocument } from '../../generated/graphql-test'
 import AutomationMissing from './AutomationMissing.vue'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 describe('AutomationMissing', () => {
   it('should render', () => {
@@ -50,7 +50,7 @@ describe('AutomationMissing', () => {
       },
     })
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.percySnapshot()
   })
 })
diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
index 87e871d9a203..4b8fbe2f5faa 100644
--- a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
+++ b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
@@ -37,7 +37,7 @@ describe('<TestingTypeSwitcher />', () => {
     />)
 
     cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
-    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 
   it('selects current testing type when it is component', () => {
@@ -50,7 +50,7 @@ describe('<TestingTypeSwitcher />', () => {
       onSelectTestingType={stub}
     />)
 
-    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 })

From 2057168f953358ccfef0b806cc19fcee6b98c3d2 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 20 Dec 2024 16:12:52 -0700
Subject: [PATCH 07/10] test updates

---
 .../cypress/component/support/ctSupport.ts    | 41 +------------------
 .../e2e/support/browserIconCommands.ts        | 41 +++++++++++++++++++
 .../app/cypress/e2e/support/e2eSupport.ts     |  5 ++-
 packages/app/cypress/e2e/top-nav.cy.ts        | 12 +++---
 4 files changed, 52 insertions(+), 47 deletions(-)
 create mode 100644 packages/app/cypress/e2e/support/browserIconCommands.ts

diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
index 935ec5b9d5c3..c11655d1c99e 100644
--- a/packages/app/cypress/component/support/ctSupport.ts
+++ b/packages/app/cypress/component/support/ctSupport.ts
@@ -1,17 +1,8 @@
 import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
+import '../../e2e/support/browserIconCommands'
 import type { Socket } from '@packages/socket/lib/browser'
 
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      verifyBrowserIconSvg(
-        expectedSvgData: string
-      ): Chainable<JQuery<HTMLElement>>
-    }
-  }
-}
-
 export const StubWebsocket = new Proxy<Socket>(Object.create(null), {
   get: (obj, prop) => {
     throw Error(`Cannot access ${String(prop)} on StubWebsocket!`)
@@ -59,33 +50,3 @@ export const createTestAutIframe = (eventManager = createEventManager()) => {
     null, // CypressJQuery, shouldn't be using driver in component tests anyway
   )
 }
-
-function verifyBrowserIconSvg (
-  subject: JQuery<HTMLElement>,
-  expectedSvgData: string,
-) {
-  cy.then(() => {
-    let actualSvgData = ''
-
-    subject.each((_, el) => {
-      actualSvgData += el.outerHTML
-    })
-
-    const actualNormalizedSvgData = actualSvgData
-    .replaceAll('></path>', '/>')
-    .replaceAll('></circle>', '/>')
-    .replace(/<title>.*<\/title>/, '')
-
-    const expectedNormalizedSvgData = expectedSvgData.replace(/<defs>.*<\/defs>/, '')
-
-    expect(actualNormalizedSvgData).to.equal(expectedNormalizedSvgData)
-
-    return subject
-  })
-}
-
-Cypress.Commands.add(
-  'verifyBrowserIconSvg',
-  { prevSubject: true },
-  verifyBrowserIconSvg,
-)
diff --git a/packages/app/cypress/e2e/support/browserIconCommands.ts b/packages/app/cypress/e2e/support/browserIconCommands.ts
new file mode 100644
index 000000000000..3f189e362396
--- /dev/null
+++ b/packages/app/cypress/e2e/support/browserIconCommands.ts
@@ -0,0 +1,41 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      verifyBrowserIconSvg(
+        expectedSvgData: string
+      ): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+function verifyBrowserIconSvg (
+  subject: JQuery<HTMLElement>,
+  expectedSvgData: string,
+) {
+  cy.then(() => {
+    let actualSvgData = ''
+
+    subject.each((_, el) => {
+      actualSvgData += el.outerHTML
+    })
+
+    const actualNormalizedSvgData = actualSvgData
+    .replaceAll('></path>', '/>')
+    .replaceAll('></circle>', '/>')
+    .replace(/<title>.*<\/title>/, '')
+
+    const expectedNormalizedSvgData = expectedSvgData.replace(/<defs>.*<\/defs>/, '')
+
+    expect(actualNormalizedSvgData).to.equal(expectedNormalizedSvgData)
+
+    return subject
+  })
+}
+
+Cypress.Commands.add(
+  'verifyBrowserIconSvg',
+  { prevSubject: true },
+  verifyBrowserIconSvg,
+)
+
+export {}
diff --git a/packages/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
index 97620266165a..7a8825a7b954 100644
--- a/packages/app/cypress/e2e/support/e2eSupport.ts
+++ b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -1,4 +1,5 @@
 import '@packages/frontend-shared/cypress/support/e2e'
+import './browserIconCommands'
 import 'cypress-real-events/support'
 import './execute-spec'
 
@@ -20,7 +21,7 @@ beforeEach(() => {
 function e2eTestingTypeIsSelected () {
   cy.findByTestId('specs-testing-type-header').within(() => {
     cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
-    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 }
 
@@ -28,7 +29,7 @@ Cypress.Commands.add('verifyE2ESelected', e2eTestingTypeIsSelected)
 
 function ctTestingTypeIsSelected () {
   cy.findByTestId('specs-testing-type-header').within(() => {
-    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 }
diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
index 52ec9e8d7b03..24d0d60b4a6b 100644
--- a/packages/app/cypress/e2e/top-nav.cy.ts
+++ b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -3,6 +3,7 @@ import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { CYPRESS_REMOTE_MANIFEST_URL, NPM_CYPRESS_REGISTRY_URL } from '@packages/types'
 import type Sinon from 'sinon'
 import { dayjs } from '../../src/runs/utils/day'
+import { cyBrowserMozillaFirefoxX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const pkg = require('@packages/root')
 
@@ -40,9 +41,9 @@ describe('App Top Nav Workflows', () => {
         cy.visitApp()
         cy.specsPageIsVisible()
 
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
-        .and('contain', 'firefox')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserMozillaFirefoxX16.data)
+        .get('title').should('contain', 'Firefox')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 6')
       })
@@ -63,8 +64,9 @@ describe('App Top Nav Workflows', () => {
       })
 
       it('shows the current browser in the top nav browser list button', () => {
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserChromeX16.data)
+        .get('title').should('contain', 'Chrome')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Chrome 1')
       })

From 56a578a5bb401478696020c9cd7ff936f1d20de6 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 20 Dec 2024 16:15:27 -0700
Subject: [PATCH 08/10] updates

---
 packages/app/src/debug/LayeredBrowserIcons.cy.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
index 410812b46532..c1d9e2e5af04 100644
--- a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
+++ b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
@@ -1,8 +1,7 @@
 import LayeredBrowserIcons from './LayeredBrowserIcons.vue'
-import type { BrowserType } from './LayeredBrowserIcons.vue'
 
 describe('<LayeredBrowserIcons/>', () => {
-  const browsers: BrowserType[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
+  const browsers: string[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
 
   it('mounts correctly for single browser', () => {
     browsers.forEach((ele) => {

From a7bf68d301b88082ab8275a25891c92c5fd129e7 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Mon, 6 Jan 2025 09:25:44 -0700
Subject: [PATCH 09/10] moving verify icons custom command

---
 packages/app/cypress/component/support/ctSupport.ts            | 1 -
 packages/app/cypress/e2e/support/e2eSupport.ts                 | 1 -
 .../cypress}/support/browserIconCommands.ts                    | 0
 packages/frontend-shared/cypress/support/component.ts          | 1 +
 packages/frontend-shared/cypress/support/e2e.ts                | 1 +
 packages/launchpad/src/setup/OpenBrowserList.cy.tsx            | 3 ++-
 6 files changed, 4 insertions(+), 3 deletions(-)
 rename packages/{app/cypress/e2e => frontend-shared/cypress}/support/browserIconCommands.ts (100%)

diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
index c11655d1c99e..737d9a58e0d9 100644
--- a/packages/app/cypress/component/support/ctSupport.ts
+++ b/packages/app/cypress/component/support/ctSupport.ts
@@ -1,6 +1,5 @@
 import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
-import '../../e2e/support/browserIconCommands'
 import type { Socket } from '@packages/socket/lib/browser'
 
 export const StubWebsocket = new Proxy<Socket>(Object.create(null), {
diff --git a/packages/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
index 7a8825a7b954..77f63d49f18c 100644
--- a/packages/app/cypress/e2e/support/e2eSupport.ts
+++ b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -1,5 +1,4 @@
 import '@packages/frontend-shared/cypress/support/e2e'
-import './browserIconCommands'
 import 'cypress-real-events/support'
 import './execute-spec'
 
diff --git a/packages/app/cypress/e2e/support/browserIconCommands.ts b/packages/frontend-shared/cypress/support/browserIconCommands.ts
similarity index 100%
rename from packages/app/cypress/e2e/support/browserIconCommands.ts
rename to packages/frontend-shared/cypress/support/browserIconCommands.ts
diff --git a/packages/frontend-shared/cypress/support/component.ts b/packages/frontend-shared/cypress/support/component.ts
index 0f802fec8231..1743aaeccbb8 100644
--- a/packages/frontend-shared/cypress/support/component.ts
+++ b/packages/frontend-shared/cypress/support/component.ts
@@ -3,6 +3,7 @@ import { registerMountFn, addVueCommand } from './common'
 import '../../src/styles/shared.scss'
 import 'tailwindcss/tailwind.css'
 import 'cypress-real-events/support'
+import './browserIconCommands'
 import { installCustomPercyCommand } from './customPercyCommand'
 import { addNetworkCommands } from './onlineNetwork'
 import { GQLStubRegistry } from './mock-graphql/stubgql-Registry'
diff --git a/packages/frontend-shared/cypress/support/e2e.ts b/packages/frontend-shared/cypress/support/e2e.ts
index 260661b4e90d..2b365631743c 100644
--- a/packages/frontend-shared/cypress/support/e2e.ts
+++ b/packages/frontend-shared/cypress/support/e2e.ts
@@ -19,6 +19,7 @@ import i18n from '../../src/locales/en-US.json'
 import { addNetworkCommands } from './onlineNetwork'
 import { logInternal } from './utils'
 import { tabUntil } from './tab-until'
+import './browserIconCommands'
 
 configure({ testIdAttribute: 'data-cy' })
 
diff --git a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
index 864b62b5be1a..aa48e3221673 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
+++ b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
@@ -2,6 +2,7 @@ import { OpenBrowserListFragmentDoc } from '../generated/graphql-test'
 import OpenBrowserList from './OpenBrowserList.vue'
 import { longBrowsersList } from '@packages/frontend-shared/cypress/support/mock-graphql/longBrowsersList'
 import { defaultMessages } from '@cy/i18n'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 // Testing Note: because state for this component is maintained on the server and updated via gql mutations,
 // this component test can't do interactions that change the chosen browser at the moment. Interactions and states
@@ -31,7 +32,7 @@ describe('<OpenBrowserList />', () => {
 
     // Renders a default logo if we don't provide one
     cy.get('[data-cy-browser="fake"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[data-cy-browser="fake"] img').should('have.attr', 'src').should('include', 'generic-browser')
+    cy.get('[data-cy-browser="fake"] svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
 
     cy.percySnapshot()
   })

From af8e1e3c78dbaca946f0a05bdf70d10a83ae7c13 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Mon, 6 Jan 2025 11:42:39 -0700
Subject: [PATCH 10/10] use invisible class

---
 .../frontend-shared/src/gql-components/topnav/TopNavList.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
index 5f45c718e4d9..dc6c4835415d 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
@@ -23,12 +23,12 @@
       </div>
     </PopoverButton>
     <TransitionQuickFade>
-      <!-- instead of using 'hidden' class, we use 'h-0 w-0 overflow-hidden' due to -->
+      <!-- instead of using 'hidden' class, we use 'invisible' due to -->
       <!-- https://github.com/cypress-io/cypress-design/issues/517 -->
       <PopoverPanel
         static
         class="bg-white rounded shadow-dropdown top-[36px] right-0 z-10 absolute"
-        :class="(forceOpenState === true) || open ? '' : 'h-0 w-0 overflow-hidden'"
+        :class="(forceOpenState === true) || open ? '' : 'invisible'"
       >
         <ul
           v-if="variant !== 'panel'"