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>

apps/console2/src/index.css

@@ -4,3 +4,9 @@
 @import "tw-animate-css";
 @source "../../../packages/ui/src";
 @source "../../../packages/helpers/src";
+
+*:focus-visible {
+  box-shadow: var(--shadow-focus);
+  outline: none;
+  border-radius: 0.25rem;
+}

apps/console2/src/pages/organizations/risks/FormRiskDialog.tsx

@@ -138,7 +138,7 @@ export default function FormRiskDialog({
   });
 
   const [showNote, toggleNote] = useToggle(false);
-  const [isOpen, setOpen] = useState(open);
+  const [isOpen, setOpen] = useState(!!open);
 
   return (
     <Dialog
@@ -362,6 +362,7 @@ function TemplateSelector({
           ))}
         </ControlledSelect>
         <Select
+          key={selectedCategory}
           variant={templates?.length === 0 ? "dashed" : "default"}
           placeholder={__("Select template")}
           onValueChange={onTemplateChange}

apps/console2/src/pages/organizations/risks/RisksPage.tsx

@@ -111,7 +111,7 @@ export default function RisksPage(props: Props) {
               <Td>
                 <SeverityBadge score={risk.residualRiskScore} />
               </Td>
-              <Td noLink>
+              <Td noLink className="text-end">
                 <ActionDropdown>
                   <DropdownItem
                     icon={IconPencil}