From f0ec42245574362e93a323f2df6cdcdd621ef25b Mon Sep 17 00:00:00 2001 From: MGukic Date: Wed, 18 Dec 2024 15:59:15 +0100 Subject: [PATCH] fix: Fixed VH button and add new member button positon --- .../organisms/Constitution/Constitution.tsx | 27 +++++-- .../organisms/Constitution/MDXComponents.tsx | 72 ++++++++----------- 2 files changed, 51 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx index dbc38796..cfbfa539 100644 --- a/frontend/src/components/organisms/Constitution/Constitution.tsx +++ b/frontend/src/components/organisms/Constitution/Constitution.tsx @@ -1,6 +1,6 @@ "use client"; -import { ContentWrapper, Typography } from "@/components/atoms"; +import { Button, ContentWrapper, Typography } from "@/components/atoms"; import { customPalette, IMAGES } from "@consts"; import { useScreenDimension } from "@hooks"; import { Box, Grid, IconButton } from "@mui/material"; @@ -20,16 +20,21 @@ import { ListItem, NavDrawerDesktop, Paragraph, - TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS + TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS, } from "./MDXComponents"; import { TocAccordion } from "./TOCAccordion"; import TOCLink from "./TOCLink"; +import PermissionChecker from "../PermissionChecker"; +import { useAppContext, useModal } from "@/context"; export function Constitution({ constitution, metadata }: ConstitutionProps) { const { screenWidth } = useScreenDimension(); const [isOpen, setIsOpen] = useState(false); const isMobile = screenWidth < 1025; const t = useTranslations("Constitution"); + const { userSession } = useAppContext(); + const { openModal } = useModal(); + const uploadConstitution = () => openModal({ type: "uploadConstitution" }); const onTOCLinkClick = () => { if (isMobile) { @@ -72,7 +77,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) { return ; } return ; - } + }, }; return ( @@ -102,13 +107,27 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) { bgcolor={customPalette.bgWhite} > {t("title")} + + + setIsOpen(true)} sx={{ bgcolor: customPalette.arcticWhite, display: { xxs: "flex", lg: "none" }, - justifyContent: "center" + justifyContent: "center", }} > diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx index 3c087002..644e8a47 100644 --- a/frontend/src/components/organisms/Constitution/MDXComponents.tsx +++ b/frontend/src/components/organisms/Constitution/MDXComponents.tsx @@ -8,7 +8,6 @@ import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { ReactNode } from "react"; -import PermissionChecker from "../PermissionChecker"; const Anchor = ({ id, offset = "-20vh " }) => { return ( @@ -18,7 +17,7 @@ const Anchor = ({ id, offset = "-20vh " }) => { display: "block", position: "relative", top: offset, - visibility: "hidden" + visibility: "hidden", }} /> ); @@ -38,7 +37,7 @@ export const Heading1 = ({ children, id }) => ( marginTop: "24px", marginBottom: "16px", lineHeight: "1.25em", - fontSize: { xxs: 20, md: 32 } + fontSize: { xxs: 20, md: 32 }, }} variant="headline4" > @@ -57,7 +56,7 @@ export const Heading2 = ({ children, id }) => ( fontWeight: 600, fontSize: { xxs: 16, md: 20 }, - lineHeight: "1.25em" + lineHeight: "1.25em", }} > {children} @@ -74,7 +73,7 @@ export const Heading3 = ({ children, id }) => ( marginBottom: "16px", fontWeight: 600, fontSize: { xxs: 14, md: 18 }, - lineHeight: "1.25em" + lineHeight: "1.25em", }} > {children} @@ -91,7 +90,7 @@ export const Heading5 = ({ children }) => ( fontWeight: 800, fontSize: { xxs: 12, md: 14 }, lineHeight: "1em", - overflowWrap: "break-word" + overflowWrap: "break-word", }} > {children} @@ -105,7 +104,7 @@ export const Paragraph = ({ children, id }) => ( lineHeight: "1.5", marginBottom: "16px", fontSize: "14px", - color: customPalette.textGray + color: customPalette.textGray, }} variant="caption" > @@ -124,7 +123,7 @@ export const ListItem = ({ children, id }) => ( flexDirection: "column", alignItems: "flex-start", justifyContent: "center", - wordBreak: "break-all" + wordBreak: "break-all", }} > {children} @@ -140,7 +139,7 @@ export const Code = ({ children }) => ( margin: 0, whiteSpace: "break-spaces", backgroundColor: "#afb8c133", - borderRadius: "6px" + borderRadius: "6px", }} > {children} @@ -152,7 +151,7 @@ export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = { borderRadius: "16px", padding: "12px", "& ol.toc-level": { - margin: 0 + margin: 0, }, "& ol.toc-level-1": { paddingInlineStart: "20px", @@ -160,12 +159,12 @@ export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = { "& li": { listStyle: "outside !important", "& a.toc-link-h1": { - fontWeight: 600 - } - } + fontWeight: 600, + }, + }, }, "& ol.toc-level-2": { - margin: "10px 0px 10px 0px" + margin: "10px 0px 10px 0px", }, "& li": { width: "100%", @@ -176,9 +175,9 @@ export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = { fontSize: "1rem", fontWeight: 400, lineHeight: "56px", - color: customPalette.textBlack - } - } + color: customPalette.textBlack, + }, + }, }; export const DrawerNav = () => { const t = useTranslations("Constitution"); @@ -193,26 +192,9 @@ export const DrawerNav = () => { const buttonEndIcon = pathname.includes(PATHS.versionHistory) ? ICONS.arrowLeft : ICONS.documentSearch; - const { openModal } = useModal(); - const { userSession } = useAppContext(); - const uploadConstitution = () => openModal({ type: "uploadConstitution" }); - return ( - - - - + return ( +