From e8de349e702d16ba7ca110c1e89356b9de2c21e3 Mon Sep 17 00:00:00 2001
From: Jason <mrloureed@gmail.com>
Date: Mon, 24 Jul 2023 19:37:23 -0400
Subject: [PATCH] bugfix: colors and layout (#278)

---
 package.json                      |  2 +-
 src/elements/button/button.svelte | 10 +++++-----
 src/elements/icon/icon.svelte     | 26 ++++++++++++++------------
 src/elements/select/select.svelte |  9 +--------
 tests/context-menu.spec.ts        |  2 +-
 tests/select.spec.ts              |  4 ++--
 6 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 543217fdf..3532d271e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
diff --git a/src/elements/button/button.svelte b/src/elements/button/button.svelte
index c889d6ad8..7cb8b5aca 100644
--- a/src/elements/button/button.svelte
+++ b/src/elements/button/button.svelte
@@ -47,14 +47,14 @@ const handleParentClick = (event: PointerEvent) => {
   event.stopImmediatePropagation();
 };
 
-let fill = 'danger';
+let fill = 'black';
 
 $: {
   switch (variant) {
     case 'inverse-primary':
     case 'danger':
     case 'success': {
-      fill = 'reversed';
+      fill = 'white';
       break;
     }
     case 'outline-danger':
@@ -86,10 +86,10 @@ $: {
     {title}
     class={cx('whitespace-nowrap', {
       'h-[30px] w-[30px]': variant === 'icon' || variant === 'icon-danger',
-      'px-3': !icon && variant !== 'icon',
-      'pl-2 pr-3': icon && variant !== 'icon',
+      'px-3': !icon && variant !== 'icon' && variant !== 'icon-danger',
+      'pl-2 pr-3': icon && variant !== 'icon' && variant !== 'icon-danger',
       'inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs border':
-        variant !== 'icon',
+        variant !== 'icon' && variant !== 'icon-danger',
       'bg-light border-light hover:bg-medium hover:border-medium active:bg-gray-2':
         variant === 'primary',
       'bg-gray-9 border-gray-9 text-white hover:bg-black hover:border-black active:bg-[#000]':
diff --git a/src/elements/icon/icon.svelte b/src/elements/icon/icon.svelte
index df4d1da57..aee2ebcb4 100644
--- a/src/elements/icon/icon.svelte
+++ b/src/elements/icon/icon.svelte
@@ -27,15 +27,17 @@ export let size: Size = 'base';
 const hasNameProperty = Object.hasOwn(paths, name);
 </script>
 
-<svg
-  class={cx(`leading ${sizes[size]}`, {
-    'inline-block': hasNameProperty,
-    hidden: !hasNameProperty,
-  })}
-  viewBox="0 0 24 24"
-  aria-labelledby="name"
-  role="img"
->
-  <title id={name}>{`${name} icon`}</title>
-  <path d={paths[name]} fill={fillColor[fill]} />
-</svg>
+<p class="leading-3">
+  <svg
+    class={cx(`${sizes[size]}`, {
+      'inline-block': hasNameProperty,
+      hidden: !hasNameProperty,
+    })}
+    viewBox="0 0 24 24"
+    aria-labelledby="name"
+    role="img"
+  >
+    <title id={name}>{`${name} icon`}</title>
+    <path d={paths[name]} fill={fillColor[fill]} />
+  </svg>
+</p>
diff --git a/src/elements/select/select.svelte b/src/elements/select/select.svelte
index 7264389f1..afb20debf 100644
--- a/src/elements/select/select.svelte
+++ b/src/elements/select/select.svelte
@@ -275,14 +275,7 @@ $: {
 
     {#if tooltip}
       <v-tooltip text={tooltip}>
-        <div
-          class={cx({
-            'text-warning-bright': state === 'warn',
-            'text-danger-dark': state === 'error',
-          })}
-        >
-          <v-icon {fill} name={icon} />
-        </div>
+        <v-icon {fill} name={icon} />
       </v-tooltip>
     {/if}
   </div>
diff --git a/tests/context-menu.spec.ts b/tests/context-menu.spec.ts
index 06c84c26d..800ad4a62 100644
--- a/tests/context-menu.spec.ts
+++ b/tests/context-menu.spec.ts
@@ -30,7 +30,7 @@ test('Renders style variants', async ({ page }) => {
 
   // variant=danger
   await expect(
-    contextMenu.getByRole('menuitem', { name: 'danger' }).locator('p')
+    contextMenu.getByRole('menuitem', { name: 'danger' }).locator('p').first()
   ).toHaveClass(/text-danger-dark/u);
   await expect(contextMenu.getByText('danger')).toHaveClass(
     /text-danger-dark/u
diff --git a/tests/select.spec.ts b/tests/select.spec.ts
index 5689fe298..09c12ad31 100644
--- a/tests/select.spec.ts
+++ b/tests/select.spec.ts
@@ -151,7 +151,7 @@ test('Given warn state and tooltip value, there should be a warn tooltip next to
 }) => {
   const select = page.getByTestId('select-warn-tooltip');
   const tooltip = select.locator('label > div > v-tooltip').first();
-  await expect(tooltip.locator('.text-warning-bright')).toBeVisible();
+  await expect(tooltip).toBeVisible();
 
   // text is not visible
   await expect(tooltip.getByText('warn tip').first()).not.toBeVisible();
@@ -165,7 +165,7 @@ test('Given error state and tooltip value, there should be an error tooltip next
 }) => {
   const select = page.getByTestId('select-error-tooltip');
   const tooltip = select.locator('label > div > v-tooltip').first();
-  await expect(tooltip.locator('.text-danger-dark')).toBeVisible();
+  await expect(tooltip).toBeVisible();
 
   // text is not visible
   await expect(tooltip.getByText('error tip').first()).not.toBeVisible();