public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed the mechanism by which we center the dialog

pull/409/head
Alex van Andel 2021-08-03 22:17:12 +00:00
parent 972a8dcb76
commit 4225016829
2 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Dialog.tsx
View File

@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
export function Dialog({ children, ...props }) { export function Dialog({ children, ...props }) {
return ( return (
<DialogPrimitive.Root {...props} className="fixed z-10 inset-0 overflow-y-auto"> <DialogPrimitive.Root {...props}>
<DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> <DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
{children} {children}
</DialogPrimitive.Root> </DialogPrimitive.Root>
@ -13,11 +13,9 @@ export function Dialog({ children, ...props }) {
export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => ( export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Content <DialogPrimitive.Content
{...props} {...props}
ref={forwardedRef} className="fixed bg-white rounded top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-left overflow-hidden shadow-xl sm:align-middle sm:max-w-lg sm:w-full p-6"
className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> ref={forwardedRef}>
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
{children} {children}
</div>
</DialogPrimitive.Content> </DialogPrimitive.Content>
)); ));

6
pages/event-types/index.tsx
View File

@ -148,16 +148,14 @@ export default function Availability({ user, types }) {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Create Continue
</button> </button>
<DialogClose as="button" className="btn btn-white ml-2"> <DialogClose as="button" className="btn btn-white mx-2">
Cancel Cancel
</DialogClose> </DialogClose>
</div> </div>
</div>
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>