web/src/components/PartProfile/PartProfile.js

@@ -130,6 +130,23 @@ const PartProfile = ({
               >
                 {isEditable ? 'Save Details' : 'Edit Details'}
               </Button>
+              {isEditable && (
+                <Button
+                  className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20 w-full justify-end"
+                  shouldAnimateHover
+                  iconName="x"
+                  onClick={() =>
+                    navigate(
+                      routes.part({
+                        userName: userPart.userName,
+                        partTitle: part?.title,
+                      })
+                    )
+                  }
+                >
+                  Cancel
+                </Button>
+              )}
               <Button
                 className="mt-4 ml-auto shadow-md hover:shadow-lg bg-red-200 relative z-20 w-full justify-end"
                 shouldAnimateHover

web/src/components/Svg/Svg.js

@@ -322,6 +322,21 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    x: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    ),
   }
 
   return <div className={className2 || 'h-10 w-10'}>{svgs[name]}</div>