EditRole: remove now unnecessary footer transition & back button on m…

…obile
guildxyz · Jul 8, 2024 · 604e9a3 · 604e9a3
1 parent 9275c33
commit 604e9a3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 56 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/[guild]/RoleCard/components/EditRole/EditRole.tsx b/src/components/[guild]/RoleCard/components/EditRole/EditRole.tsx
@@ -88,7 +88,7 @@ const EditRole = ({ roleId }: Props): JSX.Element => {
       >
         <DrawerOverlay />
         <DrawerContent>
-          <DrawerBody ref={drawerBodyRef} className="custom-scrollbar" pb={24}>
+          <DrawerBody ref={drawerBodyRef} className="custom-scrollbar" pb={28}>
             <FormProvider {...methods}>
               <ApiRequirementHandlerProvider roleId={roleId}>
                 <EditRoleHeader onClose={onCloseAndClear} roleId={roleId} />

diff --git a/src/components/[guild]/RoleCard/components/EditRole/components/EditRoleFooter.tsx b/src/components/[guild]/RoleCard/components/EditRole/components/EditRoleFooter.tsx
@@ -1,10 +1,5 @@
-import { DrawerFooter, Icon } from "@chakra-ui/react"
-import { Check } from "@phosphor-icons/react"
+import { DrawerFooter } from "@chakra-ui/react"
 import Button from "components/common/Button"
-import { AnimatePresence, motion } from "framer-motion"
-
-const MotionDrawerFooter = motion(DrawerFooter)
-const FOOTER_OFFSET = 76 // Footer is 76px high
 
 const EditRoleFooter = ({
   onClose,
@@ -19,40 +14,28 @@ const EditRoleFooter = ({
   loadingText: string
   isDirty: boolean
 }) => (
-  <AnimatePresence>
-    <MotionDrawerFooter
-      initial={{ y: FOOTER_OFFSET, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      exit={{ y: FOOTER_OFFSET, opacity: 0 }}
-      transition={{ duration: 0.3 }}
-      position="absolute"
-      w="full"
-      zIndex={1}
-      bottom="0"
-    >
-      {isDirty ? (
-        <>
-          <Button variant="outline" mr={3} onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            isLoading={isLoading}
-            colorScheme="green"
-            loadingText={loadingText}
-            onClick={onSubmit}
-            leftIcon={<Icon as={Check} />}
-            data-test="save-role-button"
-          >
-            Save
-          </Button>
-        </>
-      ) : (
-        <Button colorScheme="green" onClick={onClose} leftIcon={<Icon as={Check} />}>
-          Done
+  <DrawerFooter position="absolute" bottom="0" left="0" right="0" zIndex={1}>
+    {isDirty ? (
+      <>
+        <Button variant="outline" mr={3} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          isLoading={isLoading}
+          colorScheme="green"
+          loadingText={loadingText}
+          onClick={onSubmit}
+          data-test="save-role-button"
+        >
+          Save
         </Button>
-      )}
-    </MotionDrawerFooter>
-  </AnimatePresence>
+      </>
+    ) : (
+      <Button colorScheme="green" onClick={onClose}>
+        Done
+      </Button>
+    )}
+  </DrawerFooter>
 )
 
 export default EditRoleFooter
diff --git a/src/components/[guild]/RoleCard/components/EditRole/components/EditRoleHeader.tsx b/src/components/[guild]/RoleCard/components/EditRole/components/EditRoleHeader.tsx
@@ -1,5 +1,4 @@
-import { HStack, Icon, IconButton } from "@chakra-ui/react"
-import { ArrowLeft } from "@phosphor-icons/react"
+import { HStack } from "@chakra-ui/react"
 import SetVisibility, { SetVisibilityForm } from "components/[guild]/SetVisibility"
 import useVisibilityModalProps from "components/[guild]/SetVisibility/hooks/useVisibilityModalProps"
 import useGuild from "components/[guild]/hooks/useGuild"
@@ -43,20 +42,6 @@ const EditRoleHeader = ({
       spacing={1}
       alignItems="center"
       w="full"
-      leftElement={
-        <IconButton
-          aria-label="Back"
-          icon={<Icon as={ArrowLeft} weight="bold" />}
-          variant="ghost"
-          display={{ base: "flex", md: "none" }}
-          borderRadius="full"
-          maxW={10}
-          maxH={10}
-          onClick={onClose}
-        >
-          Cancel
-        </IconButton>
-      }
     >
       <HStack justifyContent={"space-between"} flexGrow={1} w={"fit-content"}>
         <SetVisibility