Merge branch 'unified-desktop-gui', remote-tracking branch 'origin' i…

…nto fix/icon-colors-and-shared-plugins

npm/vite-dev-server/src/startServer.ts

@@ -1,5 +1,5 @@
 import Debug from 'debug'
-import { createServer, ViteDevServer, InlineConfig, UserConfig } from 'vite'
+import { createServer, ViteDevServer, InlineConfig } from 'vite'
 import { dirname, resolve } from 'path'
 import getPort from 'get-port'
 import { makeCypressPlugin } from './makeCypressPlugin'
@@ -17,7 +17,7 @@ export interface StartDevServerOptions {
    * to override some options, you can do so using this.
    * @optional
    */
-  viteConfig?: Omit<UserConfig, 'base' | 'root'>
+  viteConfig?: Omit<InlineConfig, 'base' | 'root'>
 }
 
 const resolveServerConfig = async ({ viteConfig, options }: StartDevServerOptions): Promise<InlineConfig> => {

packages/graphql/src/constants/wizardConstants.ts

@@ -124,7 +124,7 @@ export const WizardStepEnum = enumType({
 })
 
 export const WIZARD_TITLES: Record<WizardStep, string | null> = {
-  welcome: 'Welcome to Cypress',
+  welcome: 'Welcome to Cypress!',
   selectFramework: 'Project Setup',
   initializePlugins: 'Initializing Config...',
   installDependencies: 'Install Dev Dependencies',

packages/launchpad/README.md

@@ -67,3 +67,12 @@ E2E tests:
 ## from repo root
 yarn workspace @packages/launchpad cypress:open
 ```
+
+## Utility class usage
+
+Windi CSS can create an awesome interactive summary showing our usage of utility classes and design tokens. Running this command will generate this report and serve it on localhost.
+
+```bash
+## from launchpad directory
+yarn windi
+```

packages/launchpad/package.json

@@ -8,6 +8,7 @@
     "clean": "rimraf dist && rimraf ./node_modules/.vite && echo 'cleaned'",
     "clean-deps": "rimraf node_modules",
     "test": "yarn cypress:run && yarn types",
+    "windi": "yarn windicss-analysis",
     "cypress:launch": "cross-env TZ=America/New_York node ../../scripts/cypress open --project ${PWD}",
     "cypress:open": "cross-env TZ=America/New_York node ../../scripts/cypress open-ct --project ${PWD}",
     "cypress:run": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
@@ -57,6 +58,7 @@
     "vue-tsc": "^0.3.0",
     "vue3-file-selector": "^1.0.1",
     "windicss": "3.1.4",
+    "windicss-analysis": "^0.3.4",
     "wonka": "^4.0.15"
   },
   "files": [

packages/launchpad/src/design/colors.ts

@@ -0,0 +1,189 @@
+const colors = {
+  jade: {
+    50: '#E0F6FA',
+    100: '#C2F1DE',
+    200: '#A3E7CB',
+    300: '#69D3A7',
+    400: '#1FA971',
+    500: '#00814D',
+    600: '#005F39',
+    700: '#00442A',
+    800: '#003220',
+    900: '#00291B',
+    1000: '#00261A',
+  },
+  red: {
+    50: '#FBEFF1',
+    100: '#FAD9DF',
+    200: '#F8C4CD',
+    300: '#F59AA9',
+    400: '#E45770',
+    500: '#C62B49',
+    600: '#9F1331',
+    700: '#7A0723',
+    800: '#5E021B',
+    900: '#4F0018',
+    1000: '#490018',
+  },
+  orange: {
+    50: '#F5F4D7',
+    100: '#F3ECB3',
+    200: '#F1E08F',
+    300: '#EDBB4A',
+    400: '#DB7903',
+    500: '#BD5800',
+    600: '#963F00',
+    700: '#702C00',
+    800: '#521F00',
+    900: '#411800',
+    1000: '#391500',
+  },
+  indigo: {
+    50: '#F0F1FF',
+    100: '#DADDFE',
+    200: '#C5C9FD',
+    300: '#9AA2FC',
+    400: '#6470F3',
+    500: '#4956E3',
+    600: '#3A46CC',
+    700: '#2F3AB0',
+    800: '#252E8F',
+    900: '#1C236D',
+    1000: '#151A50',
+  },
+  gray: {
+    50: '#F3F4FA',
+    100: '#E1E3ED',
+    200: '#D0D2E0',
+    300: '#BFC2D4',
+    400: '#AFB3C7',
+    500: '#9095AD',
+    600: '#747994',
+    700: '#5A5F7A',
+    800: '#434861',
+    900: '#2E3247',
+    1000: '#1B1E2E',
+  },
+  teal: {
+    50: '#E0F6FA',
+    100: '#B7E7F0',
+    200: '#90D9E6',
+    300: '#4BBFD2',
+    400: '#0097A8',
+    500: '#007780',
+    600: '#00595D',
+    700: '#004143',
+    800: '#003131',
+    900: '#002828',
+    1000: '#002525',
+  },
+  purple: {
+    50: '#2F0C52',
+    100: '#320E58',
+    200: '#3B1268',
+    300: '#4B1A83',
+    400: '#632AA6',
+    500: '#7F43C9',
+    600: '#A06CE4',
+    700: '#C8A7F5',
+    800: '#DECBF8',
+    900: '#E9DDFA',
+    1000: '#F5F0FB',
+  },
+  yellow: {
+    50: '#F7F4D2',
+    100: '#ECE6A9',
+    200: '#E1D984',
+    300: '#CBBE41',
+    400: '#A18E00',
+    500: '#7E6A00',
+    600: '#644D00',
+    700: '#523800',
+    800: '#452900',
+    900: '#3D1E00',
+    1000: '#391800',
+  },
+  green: {
+    50: '#F5F5D0',
+    100: '#E7E8AB',
+    200: '#DADC89',
+    300: '#BDC44D',
+    400: '#849706',
+    500: '#5B7100',
+    600: '#405500',
+    700: '#2E4000',
+    800: '#233200',
+    900: '#1C2A00',
+    1000: '#192500',
+  },
+  fuchsia: {
+    50: '#FAEFFB',
+    100: '#F7DAF9',
+    200: '#F3C6F8',
+    300: '#ED9FF4',
+    400: '#D65FE3',
+    500: '#B735C7',
+    600: '#901CA2',
+    700: '#6C0F7E',
+    800: '#510862',
+    900: '#400651',
+    1000: '#39054A',
+  },
+  magenta: {
+    50: '#FCEEF5',
+    100: '#FADAEA',
+    200: '#F9C5DF',
+    300: '#F69ECA',
+    400: '#E45DA3',
+    500: '#C53282',
+    600: '#9C1964',
+    700: '#750C4D',
+    800: '#59063D',
+    900: '#490435',
+    1000: '#420333',
+  },
+}
+
+export const customColors = {
+  ...colors,
+  primary: {
+    ...colors.indigo,
+    DEFAULT: colors.indigo[500],
+  },
+  secondary: {
+    ...colors.indigo,
+    DEFAULT: colors.indigo[50],
+  },
+  error: {
+    ...colors.red,
+    DEFAULT: colors.red[400],
+  },
+  caution: {
+    ...colors.red,
+    DEFAULT: colors.red[500],
+  },
+  warning: {
+    ...colors.orange,
+    DEFAULT: colors.orange[500],
+  },
+  'warning-light': {
+    ...colors.orange,
+    DEFAULT: colors.orange[400],
+  },
+  success: {
+    ...colors.jade,
+    DEFAULT: colors.jade[400],
+  },
+  'success-light': {
+    ...colors.jade,
+    DEFAULT: colors.jade[300],
+  },
+  confirm: {
+    ...colors.jade,
+    DEFAULT: colors.jade[500],
+  },
+  'body-gray': {
+    ...colors.gray,
+    DEFAULT: colors.gray[600],
+  },
+}

packages/launchpad/src/global/GlobalEmpty.vue

@@ -1,30 +1,29 @@
 <template>
   <main class="text-center" ref="projectUpload">
-    <h1 class="text-2rem mb-2">{{ t('globalPage.empty.title') }}</h1>
-    <p class="text-lg font-light text-gray-600 mb-6">{{ t('globalPage.empty.helper') }}</p>
-    <FileSelector v-model="files" v-slot="{ openDialog }" allow-multiple >
+    <h1 class="mb-2 text-2rem">{{ t('globalPage.empty.title') }}</h1>
+    <p class="mb-6 text-lg font-light text-body-gray">{{ t('globalPage.empty.helper') }}</p>
+    <FileSelector v-model="files" v-slot="{ openDialog }" allow-multiple>
       <Dropzone v-slot="{ hovered }" @click="openDialog">
         <div
-          class="min-w-220px relative block w-full border-2 bg-gray-50 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 text-center"
+          class="relative block w-full p-12 text-center border-2 border-gray-300 border-dashed rounded-lg min-w-220px bg-gray-50 hover:border-gray-400"
           :class="{ 'border-blue-200': hovered }"
         >
           <IconPlaceholder
-            class="mx-auto max-w-65px h-full relative justify-center w-full text-indigo-600"
+            class="mx-auto max-w-65px h-full relative justify-center w-full text-primary"
           />
           <i18n-t keypath="globalPage.empty.dropText">
-            <button
-              class="text-indigo-600 hover:underline"
-            >
-            <!-- 
+            <button class="text-primary hover:underline">
+              <!-- 
               This button allows keyboard users to fire a click event with the Enter or Space keys, 
               which will be handled by the dropzone's existing click handler.
-             -->
-            {{ t('globalPage.empty.browseManually') }}</button>
+              -->
+              {{ t('globalPage.empty.browseManually') }}
+            </button>
           </i18n-t>
         </div>
       </Dropzone>
     </FileSelector>
-    <div data-testid="upload-name" class="hidden">{{uploadName}}</div>
+    <div data-testid="upload-name" class="hidden">{{ uploadName }}</div>
   </main>
 </template>
 
@@ -39,7 +38,7 @@ const files = ref<File[]>([])
 const uploadName = ref('')
 const projectUpload = ref<HTMLDivElement>()
 
-const selectProject = (file: File) => { uploadName.value = file.name}
+const selectProject = (file: File) => { uploadName.value = file.name }
 
 watch(files, (newVal) => {
   const uploadLength = newVal.length;

packages/launchpad/src/layouts/HeaderBar.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="bg-gray-100 flex items-center p-2 mb-8 justify-between">
-    <div class="flex items-center">
-      <img src="../images/cypress_s.png" class="p-2" />
-      Projects > {{ props.gql.app.activeProject?.title }}
+  <div class="flex items-center justify-between px-6 py-4 border-b">
+    <div class="flex items-center ">
+      <img class="mr-2 w-32px h-32px" src="../images/cypress-dark.png" />
+      <span class="text-primary">Projects</span> 
+      <i-oi-chevron-right class="text-gray-300 h-8px" />
+      <span class="text-body-gray-700">{{ props.gql.app.activeProject?.title }}</span>
     </div>
     <div>
       <Auth :gql="props.gql" />

packages/launchpad/src/setup/TestingTypeCard.vue

@@ -1,20 +1,23 @@
 <template>
-  <button
-    class="block h-45 border border-gray-200 m-5 p-2 rounded md:h-100 md:w-2/5 md:p-9 md:inline-block"
+  <div
+    class="flex flex-col w-full border border-gray-200 rounded p-30px text text-body-gray-500"
     :role="role"
   >
-    <component 
-      :is="icon" 
-      class="float-left m-5 md:mx-auto md:mb-10 md:float-none"
-    />
-    <p class="text-indigo-700 text-left mt-3 md:text-center">
-      {{ title }}
-    </p>
-    <p 
-      class="text-gray-400 text-sm text-left md:text-center" 
-      v-html="description" 
-    />
-  </button>
+    <div class="border h-152px">
+      <!-- temp wrapper for icon -->
+      <component :is="icon" class="mx-auto mt-4" />
+    </div>
+    <h2 class="mt-4 text-primary text-18px">{{ title }}</h2>
+    <p class="mt-3 text-sm" v-html="description + ' Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed.'" />
+    <div class="flex justify-between mt-4">
+      <span class="flex items-center px-3 py-1 border rounded-full">
+        <i-oi-clock class="mr-2 text-gray-300 w-14px h-14px" />8 min
+      </span>
+      <span class="border rounded-full pt-2px pl-4px text-body-gray-400 w-32px h-32px">
+        <i-akar-icons-triangle-right class="h-24px w-24px" />
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

packages/launchpad/src/setup/TestingTypeCards.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-4xl mx-5 mx-auto text-center">
+  <div class="flex justify-center mx-4 md:mx-auto mt-9 max-w-804px gap-24px">
     <TestingTypeCard
       :id="ct.id"
       :title="ct.title"

packages/launchpad/src/setup/WizardHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <h1 class="text-3xl pt-12 text-center">{{ props.gql.title }}</h1>
+  <h1 class="pt-12 font-medium text-center text-32px text-body-gray-900">{{ props.gql.title }}</h1>
   <p 
-    class="text-center text-gray-400 my-2 mx-10" 
+    class="mx-10 mt-3 mb-4 text-center text-body-gray-600 text-18px" 
     v-html="props.gql.description" 
   />
 </template>

packages/launchpad/windi.config.ts

@@ -1,8 +1,11 @@
 import { defineConfig } from 'windicss/helpers'
 import Colors from 'windicss/colors'
+import { customColors } from './src/design/colors'
 import { map, reduce, kebabCase } from 'lodash'
 
-const safelist = reduce(Colors, (acc, variants, colorName) => {
+const colors = Object.assign(Colors, customColors)
+
+const safelist = reduce(colors, (acc, variants, colorName) => {
   const name = kebabCase(colorName)
 
   return `${acc}
@@ -20,6 +23,7 @@ export default defineConfig({
       gridTemplateRows: {
         launchpad: '64px 1fr',
       },
+      colors,
     },
   },
   safelist,