improvement: display role descriptions in invite user/add project member modals

frontend/src/components/roles/RoleOption.tsx

@@ -0,0 +1,29 @@
+import { components, OptionProps } from "react-select";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const RoleOption = ({
+  isSelected,
+  children,
+  ...props
+}: OptionProps<{ name: string; slug: string; description?: string | undefined }>) => {
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        <div>
+          <p className="truncate">{children}</p>
+          {props.data.description ? (
+            <p className="truncate text-xs leading-4 text-mineshaft-400">
+              {props.data.description}
+            </p>
+          ) : (
+            <p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
+          )}
+        </div>
+        {isSelected && (
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        )}
+      </div>
+    </components.Option>
+  );
+};

frontend/src/components/roles/index.tsx

@@ -0,0 +1 @@
+export * from "./RoleOption";