refine cancel button

components/bounty-form.js

@@ -5,9 +5,10 @@ import TextareaAutosize from 'react-textarea-autosize'
 import Countdown from './countdown'
 import AdvPostForm, { AdvPostInitial } from './adv-post-form'
 import FeeButton, { EditFeeButton } from './fee-button'
-import { InputGroup, Button } from 'react-bootstrap'
+import { InputGroup } from 'react-bootstrap'
 import { bountySchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
+import CancelButton from './cancel-button'
 
 export function BountyForm ({
   item,
@@ -116,7 +117,7 @@ export function BountyForm ({
         {item
           ? (
             <div className='d-flex'>
-              <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+              <CancelButton />
               <EditFeeButton
                 paidSats={item.meSats}
                 parentId={null}

components/cancel-button.js

@@ -0,0 +1,9 @@
+import { useRouter } from 'next/router'
+import { Button } from 'react-bootstrap'
+
+export default function CancelButton ({ onClick }) {
+  const router = useRouter()
+  return (
+    <Button className='mr-3 text-muted nav-link font-weight-bold' variant='link' onClick={onClick || (() => router.back())}>cancel</Button>
+  )
+}

components/discussion-form.js

@@ -12,6 +12,7 @@ import Delete from './delete'
 import { Button } from 'react-bootstrap'
 import { discussionSchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
+import CancelButton from './cancel-button'
 
 export function DiscussionForm ({
   item, sub, editThreshold, titleLabel = 'title',
@@ -107,7 +108,7 @@ export function DiscussionForm ({
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
               <div className='d-flex'>
-                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <CancelButton />
                 <EditFeeButton
                   paidSats={item.meSats}
                   parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'

components/job-form.js

@@ -1,6 +1,6 @@
 import { Checkbox, Form, Input, MarkdownInput, SubmitButton } from './form'
 import TextareaAutosize from 'react-textarea-autosize'
-import { InputGroup, Form as BForm, Col, Image, Button } from 'react-bootstrap'
+import { InputGroup, Form as BForm, Col, Image } from 'react-bootstrap'
 import { useEffect, useState } from 'react'
 import Info from './info'
 import AccordianItem from './accordian-item'
@@ -14,6 +14,7 @@ import BootstrapForm from 'react-bootstrap/Form'
 import Alert from 'react-bootstrap/Alert'
 import ActionTooltip from './action-tooltip'
 import { jobSchema } from '../lib/validate'
+import CancelButton from './cancel-button'
 
 function satsMin2Mo (minute) {
   return minute * 30 * 24 * 60
@@ -144,11 +145,11 @@ export default function JobForm ({ item, sub }) {
         />
         <PromoteJob item={item} sub={sub} storageKeyPrefix={storageKeyPrefix} />
         {item && <StatusControl item={item} />}
-        <div className='d-flex align-items-center mt-3'>
+        <div className='d-flex align-items-center justify-content-end mt-3'>
           {item
             ? (
               <div className='d-flex'>
-                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <CancelButton />
                 <SubmitButton variant='secondary'>save</SubmitButton>
               </div>
               )

components/link-form.js

@@ -13,6 +13,7 @@ import { Button } from 'react-bootstrap'
 import { linkSchema } from '../lib/validate'
 import Moon from '../svgs/moon-fill.svg'
 import { SubSelectInitial } from './sub-select-form'
+import CancelButton from './cancel-button'
 
 export function LinkForm ({ item, sub, editThreshold, children }) {
   const router = useRouter()
@@ -178,7 +179,7 @@ export function LinkForm ({ item, sub, editThreshold, children }) {
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
               <div className='d-flex'>
-                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <CancelButton />
                 <EditFeeButton
                   paidSats={item.meSats}
                   parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'

components/poll-form.js

@@ -10,6 +10,7 @@ import Delete from './delete'
 import { Button } from 'react-bootstrap'
 import { pollSchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
+import CancelButton from './cancel-button'
 
 export function PollForm ({ item, sub, editThreshold, children }) {
   const router = useRouter()
@@ -95,7 +96,7 @@ export function PollForm ({ item, sub, editThreshold, children }) {
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
               <div className='d-flex'>
-                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <CancelButton />
                 <EditFeeButton
                   paidSats={item.meSats}
                   parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'

pages/[name]/index.js

@@ -14,6 +14,7 @@ import { ITEM_FIELDS } from '../../fragments/items'
 import { getGetServerSideProps } from '../../api/ssrApollo'
 import FeeButton, { EditFeeButton } from '../../components/fee-button'
 import { bioSchema } from '../../lib/validate'
+import CancelButton from '../../components/cancel-button'
 
 export const getServerSideProps = getGetServerSideProps(USER_FULL, null,
   data => !data.user)
@@ -65,11 +66,8 @@ export function BioForm ({ handleDone, bio }) {
           as={TextareaAutosize}
           minRows={6}
         />
-        <div className='d-flex mt-3'>
+        <div className='d-flex mt-3 justify-content-end'>
-          <Button
+          <CancelButton onClick={handleDone} />
-            className='mr-2' variant='grey-medium' type='button' onClick={handleDone}
-          >cancel
-          </Button>
           {bio?.text
             ? <EditFeeButton
                 paidSats={bio?.meSats}

styles/user.module.css

@@ -14,4 +14,5 @@
 .createFormContainer {
     width: 100%;
     max-width: 740px;
+    margin-top: 1rem;
 }