Refactor collection creation UI (#6485)

* Iteration, before functional component

* Use react-hook-form, shared form for new and edit

* Avoid negative margin on input prefix

* Centered now default for modals

app/components/Popover.tsx

@@ -62,7 +62,7 @@ const Popover: React.FC<Props> = ({
   }
 
   return (
-    <ReakitPopover {...rest} hideOnEsc={false} hideOnClickOutside>
+    <StyledPopover {...rest} hideOnEsc={false} hideOnClickOutside>
       <Contents
         $shrink={shrink}
         $width={width}
@@ -71,7 +71,7 @@ const Popover: React.FC<Props> = ({
       >
         {children}
       </Contents>
-    </ReakitPopover>
+    </StyledPopover>
   );
 };
 
@@ -83,6 +83,10 @@ type ContentsProps = {
   $mobilePosition?: "top" | "bottom";
 };
 
+const StyledPopover = styled(ReakitPopover)`
+  z-index: ${depths.modal};
+`;
+
 const Contents = styled.div<ContentsProps>`
   display: ${(props) => (props.$flex ? "flex" : "block")};
   animation: ${fadeAndScaleIn} 200ms ease;