LumeWeb
/
sdk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: positioning error

This commit is contained in:
Juan Di Toro 2023-10-20 12:41:14 +02:00
parent 2aa2a5ff30
commit 88e08d13e2
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/lume/LumeIdentity/LumeIdentity.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, type FC } from "react"; import React, { useState, type FC, useRef, useEffect } from "react";
import { Button } from "../../ui/button"; import { Button } from "../../ui/button";
import { import {
SwitchableComponent, SwitchableComponent,
@ -111,6 +111,7 @@ export const LumeIdentityTrigger = Dialog.Trigger;
LumeIdentityTrigger.displayName = "LumeIdentityTrigger"; LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
export default function Wrapped({ children }: React.PropsWithChildren) { export default function Wrapped({ children }: React.PropsWithChildren) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const dialogContentEl = useRef<HTMLElement>();
const DefaultTrigger = () => ( const DefaultTrigger = () => (
<LumeIdentityTrigger asChild> <LumeIdentityTrigger asChild>
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md"> <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
@ -135,8 +136,8 @@ export default function Wrapped({ children }: React.PropsWithChildren) {
<Trigger /> <Trigger />
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
{/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */} {/* @ditorodev: `left-[calc(50%-192px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
<Dialog.Content className="absolute left-[calc(50%-192px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center"> <Dialog.Content className="absolute left-[calc(50%-192px)] top-12 mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center" >
<SwitchableComponentProvider> <SwitchableComponentProvider>
<LumeIdentityContext.Provider value={{open, setOpen}}> <LumeIdentityContext.Provider value={{open, setOpen}}>
<LumeIdentity /> <LumeIdentity />