message: Cleans up DeleteChannel
diff: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  -import styled from 'styled-components';
  import { graphql } from 'react-apollo';
  -import OptionLink, { optionLinkPadding } from 'react/components/UI/OptionLink';
  +import Box from 'react/components/UI/Box';
  +import Text from 'react/components/UI/Text';
  import GenericButton from 'react/components/UI/GenericButton';
  import deleteChannelMutation from 'react/components/ManageChannel/components/DeleteChannel/mutations/deleteChannel';
  -const Alert = styled.div`
  - color: ${x => x.theme.colors.state.alert};
  -`;
  -
  -const Message = styled.div`
  - padding: ${optionLinkPadding};
  - font-size: ${x => x.theme.fontSizesIndexed.s};
  - text-align: left;
  -`;
  -
  -const Options = styled.div`
  - margin: 0.5em 0;
  - padding: ${optionLinkPadding};
  -`;
  -
  -const Option = styled(GenericButton).attrs({
  - minWidth: '6em',
  - f: 1,
  - color: 'state.alert',
  -})`
  -`;
  -
  class DeleteChannel extends Component {
  static propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  @@ -75,44 +53,56 @@ class DeleteChannel extends Component {
  return (
  <div>
  - <OptionLink f={1} onClick={this.pendDeleteChannel}>
  + <Text f={2} fontWeight="bold" color="state.alert">
  + <a role="button" tabIndex={0} onClick={this.pendDeleteChannel}>
  Delete channel
  - </OptionLink>
  + </a>
  + </Text>
  + {mode !== 'resting' &&
  + <Box my={3}>
  {mode === 'error' &&
  - <Alert>
  - <Message>
  + <Text mb={6} f={2} color="state.alert">
  An error has occurred. Try again.
  - </Message>
  - </Alert>
  + </Text>
  }
  {mode === 'deleting' &&
  - <Alert>
  - <Message>
  + <Text mb={6} f={2} color="state.alert">
  Deleting...
  - </Message>
  - </Alert>
  + </Text>
  }
  {mode === 'pending' &&
  - <Alert>
  - <Message>
  + <div>
  + <Text mb={6} f={2} color="state.alert">
  Are you sure? This action cannot be undone.
  - </Message>
  + </Text>
  - <Options>
  - <Option onClick={this.deleteChannel}>
  + <div>
  + <GenericButton
  + f={2}
  + minWidth="6em"
  + color="state.alert"
  + onClick={this.deleteChannel}
  + >
  Delete
  - </Option>
  + </GenericButton>
  {' '}
  - <Option onClick={this.cancelDeleteChannel}>
  + <GenericButton
  + f={2}
  + minWidth="6em"
  + color="state.alert"
  + onClick={this.cancelDeleteChannel}
  + >
  Cancel
  - </Option>
  - </Options>
  - </Alert>
  + </GenericButton>
  + </div>
  + </div>
  + }
  + </Box>
  }
  </div>
  );
  