ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix overflow problems and other styling issues

Browse Source
This commit is contained in:
Valtteri Karesto
2022-03-22 17:08:38 +02:00
parent ff697b96ea
commit b301a860bf
3 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/Dialog.tsx
View File

@@ -6,21 +6,28 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
import { styled } from "../stitches.config"; import { styled } from "../stitches.config";
const overlayShow = keyframes({ const overlayShow = keyframes({
"0%": { opacity: 0 }, "0%": { opacity: 0.01 },
"100%": { opacity: 1 }, "100%": { opacity: 1 },
}); });
const contentShow = keyframes({ const contentShow = keyframes({
"0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" }, "0%": { opacity: 0.01 },
"100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }, "100%": { opacity: 1 },
}); });
const StyledOverlay = styled(DialogPrimitive.Overlay, { const StyledOverlay = styled(DialogPrimitive.Overlay, {
zIndex: 1000, zIndex: 9999,
backgroundColor: blackA.blackA9, backgroundColor: blackA.blackA9,
position: "fixed", position: "fixed",
inset: 0, // inset: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
display: "grid",
placeItems: "center",
overflowY: "auto",
"@media (prefers-reduced-motion: no-preference)": { "@media (prefers-reduced-motion: no-preference)": {
animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`,
}, },
".dark &": { ".dark &": {
backgroundColor: blackA.blackA11, backgroundColor: blackA.blackA11,
@@ -32,22 +39,19 @@ const StyledContent = styled(DialogPrimitive.Content, {
backgroundColor: "$mauve2", backgroundColor: "$mauve2",
color: "$mauve12", color: "$mauve12",
borderRadius: "$md", borderRadius: "$md",
position: "relative",
boxShadow: boxShadow:
"0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)", "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "90vw", width: "90vw",
maxWidth: "450px", maxWidth: "450px",
maxHeight: "85vh", // maxHeight: "85vh",
padding: 25, padding: 25,
"@media (prefers-reduced-motion: no-preference)": { "@media (prefers-reduced-motion: no-preference)": {
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
}, },
"&:focus": { outline: "none" }, "&:focus": { outline: "none" },
".dark &": { ".dark &": {
backgroundColor: "$mauve5", backgroundColor: "$mauve3",
boxShadow: boxShadow:
"0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)", "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
}, },
@@ -55,10 +59,11 @@ const StyledContent = styled(DialogPrimitive.Content, {
const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => { const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
return ( return (
<div style={{ overflowY: "auto" }}> <>
<StyledOverlay /> <StyledOverlay>
<StyledContent css={css}>{children}</StyledContent> <StyledContent>{children}</StyledContent>
</div> </StyledOverlay>
</>
); );
}; };
@@ -77,9 +82,10 @@ const StyledDescription = styled(DialogPrimitive.Description, {
}); });
// Exports // Exports
export const Dialog = styled(DialogPrimitive.Root, { overflowY: "auto" }); export const Dialog = styled(DialogPrimitive.Root);
export const DialogTrigger = DialogPrimitive.Trigger; export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogContent = Content; export const DialogContent = Content;
export const DialogTitle = StyledTitle; export const DialogTitle = StyledTitle;
export const DialogDescription = StyledDescription; export const DialogDescription = StyledDescription;
export const DialogClose = DialogPrimitive.Close; export const DialogClose = DialogPrimitive.Close;
export const DialogPortal = DialogPrimitive.Portal;

1
components/Select.tsx
View File

@@ -38,6 +38,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
container: (provided) => { container: (provided) => {
return { return {
...provided, ...provided,
position: "relative",
}; };
}, },
singleValue: (provided) => ({ singleValue: (provided) => ({

6
components/SetHookDialog.tsx
View File

@@ -98,8 +98,8 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
Set Hook Set Hook
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<DialogContent css={{ overflowY: "auto" }}>
<DialogTitle>Deploy configuration</DialogTitle> <DialogTitle>Deploy configuration</DialogTitle>
<DialogDescription as="div"> <DialogDescription as="div">
<Stack css={{ width: "100%", flex: 1 }}> <Stack css={{ width: "100%", flex: 1 }}>
@@ -116,7 +116,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
{...field} {...field}
closeMenuOnSelect={false} closeMenuOnSelect={false}
isMulti isMulti
menuPosition="absolute" menuPosition="fixed"
options={transactionOptions} options={transactionOptions}
/> />
)} )}
@@ -237,8 +237,8 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
<X size="20px" /> <X size="20px" />
</Box> </Box>
</DialogClose> </DialogClose>
</DialogContent>
</form> </form>
</DialogContent>
</Dialog> </Dialog>
); );
}; };