♻️ refactor: WavyBorder component and update CreateProjectLayout

packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx

@@ -1,20 +1,19 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react';
 import { cn } from 'utils/classnames';
 
-type WavyBorderType = 'card' | 'layout';
+type WaveBorderVariant = 'card' | 'layout';
 
 export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {
-  type?: WavyBorderType;
+  variant?: WaveBorderVariant;
 }
 
 export const WavyBorder = ({
   className,
-  children,
+  variant = 'card',
-  type = 'card',
   ...props
 }: WavyBorderProps) => {
   const imageSrc = useMemo(() => {
-    switch (type) {
+    switch (variant) {
       case 'card':
         return '/wave-border-card.svg';
       case 'layout':
@@ -22,17 +21,15 @@ export const WavyBorder = ({
       default:
         return '/wave-border-card.svg';
     }
-  }, [type]);
+  }, [variant]);
 
   return (
     <div
       {...props}
-      className={cn('w-full h-1 bg-repeat-x bg-top bg-cover', className)}
+      className={cn('w-full bg-repeat-x h-1 bg-top bg-cover', className)}
       style={{
         backgroundImage: `url(${imageSrc})`,
       }}
-    >
+    />
-      {children}
-    </div>
   );
 };

packages/frontend/src/pages/org-slug/projects/create/layout.tsx

@@ -25,11 +25,11 @@ export const CreateProjectLayout = ({
           </Heading>
           <Link to={`/${orgSlug}`}>
             <Button iconOnly variant="tertiary">
-              <CrossIcon />
+              <CrossIcon size={18} />
             </Button>
           </Link>
         </div>
-        <WavyBorder type="layout" />
+        <WavyBorder variant="layout" />
       </div>
       <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
         <Outlet />