Add dark mode

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console2/src/components/form/ControlledField.tsx

@@ -19,7 +19,15 @@ export function ControlledField({
       control={control}
       name={name}
       render={({ field }) => (
-        <Field {...props} {...field} onValueChange={field.onChange} />
+        <>
+          <Field
+            {...props}
+            {...field}
+            // TODO : Find a better way to handle this case (comparing number and string for select create issues)
+            value={field.value ? field.value.toString() : null}
+            onValueChange={field.onChange}
+          />
+        </>
       )}
     />
   );

apps/console2/src/components/form/PeopleSelect.tsx

@@ -72,10 +72,11 @@ function PeopleSelectWithQuery({
             variant="editor"
             placeholder={__("Select an owner")}
             onValueChange={field.onChange}
+            key={people?.length ?? 0}
             {...field}
           >
             {people?.map((p) => (
-              <Option key={p.id} value={p.id}>
+              <Option key={p.id} value={p.id} className="flex gap-2">
                 <Avatar name={p.fullName} />
                 {p.fullName}
               </Option>

apps/console2/src/components/risks/MeasureLinkDialog.tsx

@@ -144,7 +144,7 @@ function MeasureLinkDialogContent(props: Omit<Props, "trigger">) {
           ))}
         </Select>
       </div>
-      <div className="space-y-2 divide-y divide-border-low">
+      <div className="divide-y divide-border-low">
         {filteredMeasures.map((measure) => (
           <MeasureRow key={measure.id} measure={measure} {...props} />
         ))}
@@ -168,6 +168,9 @@ function MeasureRow(props: RowProps) {
   const isFetching = isFetchingAttach || isFetchingDetach;
 
   const onClick = () => {
+    if (isFetching) {
+      return;
+    }
     const action = isLinked ? detachMeasure : attachMeasure;
     action({
       variables: {
@@ -181,7 +184,10 @@ function MeasureRow(props: RowProps) {
   };
 
   return (
-    <div className="py-4 flex items-center gap-4 hover:bg-subtle">
+    <div
+      className="py-4 flex items-center gap-4 hover:bg-subtle cursor-pointer"
+      onClick={onClick}
+    >
       {props.measure.name}
       <Badge variant="neutral">{props.measure.category}</Badge>
       <Button
@@ -189,7 +195,6 @@ function MeasureRow(props: RowProps) {
         icon={isLinked ? IconTrashCan : IconPlusLarge}
         className="ml-auto"
         variant={isLinked ? "secondary" : "primary"}
-        onClick={onClick}
       >
         {isLinked ? __("Unlink") : __("Link")}
       </Button>