Progress check-in.

components/pages/settings/teams/TeamDeleteForm.js

@@ -1,22 +1,12 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useIntl } from 'react-intl';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+import { useIntl, FormattedMessage } from 'react-intl';
 import { labels, messages } from 'components/messages';
 import useApi from 'hooks/useApi';
 
-const CONFIRM_VALUE = 'DELETE';
-
-export default function TeamDeleteForm({ teamId, onSave, onClose }) {
+export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage } = useIntl();
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => del(`/teams/${teamId}`, data));
+  const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -29,14 +19,13 @@ export default function TeamDeleteForm({ teamId, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <p>{formatMessage(messages.deleteTeam, { confirmation: CONFIRM_VALUE })}</p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
+      <p>
+        <FormattedMessage {...messages.deleteTeamWarning} values={{ name: <b>{teamName}</b> }} />
+      </p>
       <FormButtons flex>
-        <SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
+        <SubmitButton variant="danger" disabled={isLoading}>
+          {formatMessage(labels.delete)}
+        </SubmitButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>

components/pages/settings/teams/TeamsTable.js

@@ -52,9 +52,9 @@ export default function TeamsTable({ data = [], onDelete }) {
                   <a>
                     <Button>
                       <Icon>
-                        <Icons.ArrowRight />
+                        <Icons.Edit />
                       </Icon>
-                      <Text>{formatMessage(labels.settings)}</Text>
+                      <Text>{formatMessage(labels.edit)}</Text>
                     </Button>
                   </a>
                 </Link>
@@ -66,7 +66,14 @@ export default function TeamsTable({ data = [], onDelete }) {
                     <Text>{formatMessage(labels.delete)}</Text>
                   </Button>
                   <Modal title={formatMessage(labels.deleteTeam)}>
-                    {close => <TeamDeleteForm teamId={row.id} onSave={onDelete} onClose={close} />}
+                    {close => (
+                      <TeamDeleteForm
+                        teamId={row.id}
+                        teamName={row.name}
+                        onSave={onDelete}
+                        onClose={close}
+                      />
+                    )}
                   </Modal>
                 </ModalTrigger>
               </Flexbox>

components/pages/settings/websites/WebsitesTable.js

@@ -45,9 +45,9 @@ export default function WebsitesTable({ data = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <Icons.ArrowRight />
+                      <Icons.Edit />
                     </Icon>
-                    <Text>Settings</Text>
+                    <Text>{formatMessage(labels.edit)}</Text>
                   </Button>
                 </a>
               </Link>
@@ -57,7 +57,7 @@ export default function WebsitesTable({ data = [] }) {
                     <Icon>
                       <Icons.External />
                     </Icon>
-                    <Text>View</Text>
+                    <Text>{formatMessage(labels.view)}</Text>
                   </Button>
                 </a>
               </Link>