Merge pull request #507 from IntersectMBO/fix/change-position-of-vh-b…

…utton-and-add-new-member-button

fix: Fixed VH button and add new member button positon

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 <TOCLink {...props} callback={onTOCLinkClick} />;
       }
       return <a {...props} />;
-    }
+    },
   };
 
   return (
@@ -102,13 +107,27 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
                 bgcolor={customPalette.bgWhite}
               >
                 <Typography variant="headline4">{t("title")}</Typography>
+                <PermissionChecker
+                  permissions={userSession?.permissions}
+                  requiredPermission="add_constitution_version"
+                >
+                  <Button
+                    variant="contained"
+                    size="extraLarge"
+                    type="submit"
+                    onClick={uploadConstitution}
+                    data-testid="admin-top-nav-upload-constitution-button"
+                  >
+                    {t("drawer.uploadNewVersion")}
+                  </Button>
+                </PermissionChecker>
                 <IconButton
                   data-testid="open-constitution-drawer-button"
                   onClick={() => setIsOpen(true)}
                   sx={{
                     bgcolor: customPalette.arcticWhite,
                     display: { xxs: "flex", lg: "none" },
-                    justifyContent: "center"
+                    justifyContent: "center",
                   }}
                 >
                   <img src={IMAGES.docSearch} />

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,20 +151,20 @@ 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",
 
     "& 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 (
-    <Grid container direction="column" gap={1} p={2}>
-      <PermissionChecker
-        permissions={userSession?.permissions}
-        requiredPermission="add_constitution_version"
-      >
-        <Button
-          variant="contained"
-          size="extraLarge"
-          type="submit"
-          onClick={uploadConstitution}
-          data-testid="admin-top-nav-upload-constitution-button"
-        >
-          {t("drawer.uploadNewVersion")}
-        </Button>
-      </PermissionChecker>
 
+  return (
+    <Grid container direction="column" gap={1} p={2} marginTop="auto">
       <Link href={linkPath}>
         <Button fullWidth variant="outlined">
           <img src={buttonEndIcon} style={{ marginRight: 8 }} />
@@ -226,7 +208,7 @@ export const NavDrawerDesktop = ({
   children,
   left = 0,
   top = { xxs: 75, md: 90 },
-  dataTestId
+  dataTestId,
 }: {
   children: ReactNode;
   left: number;
@@ -247,17 +229,19 @@ export const NavDrawerDesktop = ({
         borderRadius: "16px",
         height: { xxs: "95vh", md: "calc(100vh - 118px)" },
         zIndex: 1,
-        ...TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS
+        display: "flex",
+        flexDirection: "column",
+        ...TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS,
       }}
     >
       <Box
         sx={{
-          height: { xxs: "90vh", md: "calc(100vh - 250px)" },
+          height: { xxs: "90vh", md: "calc(100vh - 150px)" },
           overflowY: "scroll",
           borderRadiusTop: "16px 16px 0 0",
           "&::-webkit-scrollbar": {
-            display: "none"
-          }
+            display: "none",
+          },
         }}
         data-testid="nav-drawer-collapse-container"
       >
@@ -275,7 +259,7 @@ export const NavCard = ({
   hash,
   url,
   isActive,
-  isLatest
+  isLatest,
 }) => {
   return (
     <Grid
@@ -335,7 +319,7 @@ export const NavCard = ({
           sx={{
             display: "flex",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
           }}
         >
           <Link
@@ -360,7 +344,7 @@ export const NavCard = ({
         sx={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center"
+          alignItems: "center",
         }}
       >
         {!isActive && !isLatest && (