From a68b2093e4455e37422180c14b080e7d1f330151 Mon Sep 17 00:00:00 2001
From: Dexter Edwards <dexter.edwards93@gmail.com>
Date: Mon, 17 Jul 2023 11:59:22 +0100
Subject: [PATCH] fix(ui-toolkit): toolkit bugs (#4329)

---
 libs/ui-toolkit/src/components/button/button.tsx           | 4 ++--
 .../src/components/checkbox/checkbox.stories.tsx           | 7 +++++++
 libs/ui-toolkit/src/components/checkbox/checkbox.tsx       | 4 ++--
 libs/ui-toolkit/src/utils/shared.ts                        | 5 +++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index 73c410a4d..ebc865cd4 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@@ -30,14 +30,14 @@ const primary = [
   'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
 ];
 const secondary = [
-  'text-white dark:text-black',
+  'text-white',
   'border-vega-pink',
   'dark:bg-vega-pink bg-vega-pink-550',
   'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
   'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
 ];
 const ternary = [
-  'text-white dark:text-black',
+  'text-black',
   'border-vega-green',
   'dark:bg-vega-green bg-vega-green-550',
   'enabled:hover:bg-vega-green enabled:hover:border-vega-green',
diff --git a/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx b/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
index 713960942..0bb14fb65 100644
--- a/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
+++ b/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
@@ -15,6 +15,13 @@ Default.args = {
   label: 'Regular checkbox',
 };
 
+export const Overflow = Template.bind({});
+Overflow.args = {
+  name: 'overflow',
+  label:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
diff --git a/libs/ui-toolkit/src/components/checkbox/checkbox.tsx b/libs/ui-toolkit/src/components/checkbox/checkbox.tsx
index f22e99333..a5f13155c 100644
--- a/libs/ui-toolkit/src/components/checkbox/checkbox.tsx
+++ b/libs/ui-toolkit/src/components/checkbox/checkbox.tsx
@@ -20,7 +20,7 @@ export const Checkbox = ({
   disabled = false,
 }: CheckboxProps) => {
   const rootClasses = classNames(
-    'relative flex justify-center items-center w-[15px] h-[15px]',
+    'relative flex justify-center items-center w-[15px] h-[15px] mt-1',
     'border rounded-sm overflow-hidden',
     {
       'opacity-40 cursor-default': disabled,
@@ -30,7 +30,7 @@ export const Checkbox = ({
   );
 
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex gap-1">
       <CheckboxPrimitive.Root
         name={name}
         id={name}
diff --git a/libs/ui-toolkit/src/utils/shared.ts b/libs/ui-toolkit/src/utils/shared.ts
index f607f12ee..92ce3d03d 100644
--- a/libs/ui-toolkit/src/utils/shared.ts
+++ b/libs/ui-toolkit/src/utils/shared.ts
@@ -8,10 +8,11 @@ export const defaultFormElement = (hasError?: boolean) =>
     'flex items-center w-full text-sm',
     'p-2 border-2 rounded',
     'bg-transparent',
-    'border border-vega-light-200 dark:border-vega-dark-200',
+    'border',
     'focus:border-vega-light-300 dark:focus:border-vega-dark-300',
     'disabled:opacity-60',
     {
-      'border-vega-pink': hasError,
+      'border-vega-pink text-vega-pink': hasError,
+      'border-vega-light-200 dark:border-vega-dark-200': !hasError,
     }
   );