feat: improve create project modal (#5646)

packages/web/app/src/components/layouts/organization.tsx

@@ -35,6 +35,7 @@ import {
 import { getIsStripeEnabled } from '@/lib/billing/stripe-public-key';
 import { useToggle } from '@/lib/hooks';
 import { useLastVisitedOrganizationWriter } from '@/lib/last-visited-org';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Slot } from '@radix-ui/react-slot';
 import { Link, useRouter } from '@tanstack/react-router';
@@ -226,6 +227,8 @@ export function OrganizationLayout({
                 organizationId={props.organizationId}
                 isOpen={isModalOpen}
                 toggleModalOpen={toggleModalOpen}
+                // reset the form every time it is closed
+                key={String(isModalOpen)}
               />
             </>
           ) : null}
@@ -382,20 +385,20 @@ export function CreateProjectModalContent(props: {
     <Dialog open={props.isOpen} onOpenChange={props.toggleModalOpen}>
       <DialogContent className="container w-4/5 max-w-[600px] md:w-3/5">
         <Form {...props.form}>
-          <form className="space-y-8" onSubmit={props.form.handleSubmit(props.onSubmit)}>
-            <DialogHeader>
+          <form onSubmit={props.form.handleSubmit(props.onSubmit)}>
+            <DialogHeader className="mb-8">
               <DialogTitle>Create a project</DialogTitle>
               <DialogDescription>
                 A Hive <b>project</b> represents a <b>GraphQL API</b> running a GraphQL schema.
               </DialogDescription>
             </DialogHeader>
-            <div className="space-y-8">
+            <div>
               <FormField
                 control={props.form.control}
                 name="projectName"
                 render={({ field }) => {
                   return (
-                    <FormItem>
+                    <FormItem className="mt-0">
                       <FormLabel>Name of your project</FormLabel>
                       <FormControl>
                         <Input placeholder="My GraphQL API" autoComplete="off" {...field} />
@@ -410,29 +413,38 @@ export function CreateProjectModalContent(props: {
                 name="projectType"
                 render={({ field }) => {
                   return (
-                    <FormItem>
-                      <RadioGroup
-                        onValueChange={field.onChange}
-                        defaultValue={field.value}
-                        className="pt-2"
-                      >
+                    <FormItem className="mt-2">
+                      <FormLabel>Project Type</FormLabel>
+                      <RadioGroup onValueChange={field.onChange} defaultValue={field.value}>
                         <ProjectTypeCard
                           type={ProjectType.Single}
-                          title="Single"
-                          description="Monolithic GraphQL schema developed as a standalone"
-                          icon={<BoxIcon />}
+                          title="Monolith"
+                          description="Single GraphQL schema developed as a monolith"
+                          icon={
+                            <BoxIcon
+                              className={cn(field.value === ProjectType.Single && 'text-white')}
+                            />
+                          }
                         />
                         <ProjectTypeCard
                           type={ProjectType.Federation}
                           title="Federation"
                           description="Project developed according to Apollo Federation specification"
-                          icon={<BlocksIcon />}
+                          icon={
+                            <BlocksIcon
+                              className={cn(field.value === ProjectType.Federation && 'text-white')}
+                            />
+                          }
                         />
                         <ProjectTypeCard
                           type={ProjectType.Stitching}
                           title="Stitching"
                           description="Project that stitches together multiple GraphQL APIs"
-                          icon={<FoldVerticalIcon />}
+                          icon={
+                            <FoldVerticalIcon
+                              className={cn(field.value === ProjectType.Stitching && 'text-white')}
+                            />
+                          }
                         />
                       </RadioGroup>
                     </FormItem>
@@ -440,7 +452,7 @@ export function CreateProjectModalContent(props: {
                 }}
               />
             </div>
-            <DialogFooter>
+            <DialogFooter className="mt-8">
               <Button
                 className="w-full"
                 type="submit"

packages/web/app/src/components/ui/form.tsx

@@ -82,16 +82,9 @@ const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
+  const { formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && 'text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+  return <Label ref={ref} className={className} htmlFor={formItemId} {...props} />;
 });
 FormLabel.displayName = 'FormLabel';
 
@@ -107,6 +100,7 @@ const FormControl = React.forwardRef<
       id={formItemId}
       aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
       aria-invalid={!!error}
+      className={cn(error && 'border-destructive')}
       {...props}
     />
   );
@@ -137,15 +131,11 @@ const FormMessage = React.forwardRef<
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
-
   return (
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-destructive text-sm font-medium', className)}
+      className={cn('text-destructive min-h-[1.25rem] text-sm font-medium', className)}
       {...props}
     >
       {body}

packages/web/app/src/index.css

@@ -30,7 +30,7 @@
     --accent: 0 0% 9.02%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
+    --destructive: 255 0 0;
     --destructive-foreground: 210 40% 98%;
 
     --ring: 215 20.2% 65.1%;
@@ -70,7 +70,7 @@
     --accent: 230 14% 8%;
     --accent-foreground: 210 40% 98%; /* 220, 21.43%, 5.49% */
 
-    --destructive: 0 63% 31%;
+    --destructive: 220 38 38;
     --destructive-foreground: 210 40% 98%; /* 220, 21.43%, 5.49% */
 
     --ring: 216 34% 17%;

packages/web/app/tailwind.config.cjs

@@ -106,7 +106,7 @@ module.exports = {
           foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: 'rgb(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {