adjust SelectRecipients

components/publish/SelectRecipients.tsx

@@ -6,7 +6,7 @@ import { cloneDeep, fromPairs, isString, last, sortBy } from "lodash"
 import { useEffect } from "react"
 import { components, GroupBase, MultiValueGenericProps } from "react-select"
 import styled from "styled-components"
-import { Button } from "../bootstrap"
+import { Button, Col, Row } from "../bootstrap"
 import { CopyButton } from "../buttons"
 import { useMemberSearch } from "../db"
 import { useProfileState } from "../db/profile/redux"
@@ -25,14 +25,34 @@ import {
 
 export const SelectRecipients = styled(props => {
  useEmailRecipients()
+ const email = useTestimonyEmail()
 
  return (
  <div {...props}>
- <div className="d-flex justify-content-between">
- <div className="fs-4">Email Recipients</div>
- <RecipientControls />
- </div>
- <SelectLegislatorEmails className="mt-2" />
+ <Row className="d-flex">
+ <Col className="fs-4" md={9} xs={12}>
+ Email Recipients
+ </Col>
+ <Col md={3} xs={12}>
+ <RecipientControls />
+ </Col>
+ </Row>
+ <SelectLegislatorEmails className="my-2" />
+ <Row className="d-flex">
+ <Col md={3}>
+ {email.to ? (
+ <CopyButton
+ key="copy"
+ variant="outline-secondary"
+ text={email.to}
+ className="copy py-1 px-2"
+ format="text/plain"
+ >
+ <FontAwesomeIcon icon={faCopy} /> Copy Email Recipients
+ </CopyButton>
+ ) : null}
+ </Col>
+ </Row>
  </div>
  )
 })`
@@ -103,19 +123,6 @@ const RecipientControls = styled(({ className }) => {
  </Button>
  )
 
- if (email.to)
- buttons.push(
- <CopyButton
- key="copy"
- variant="outline-secondary"
- text={email.to}
- className="copy"
- format="text/plain"
- >
- <FontAwesomeIcon icon={faCopy} /> Copy Email Recipients
- </CopyButton>
- )
-
  return <div className={clsx("d-flex gap-4", className)}>{buttons}</div>
 })`
  flex-wrap: wrap;

components/publish/SubmitTestimonyForm.tsx

@@ -1,30 +1,21 @@
 import clsx from "clsx"
+import { useState } from "react"
 import styled from "styled-components"
-import {
- Col,
- Container,
- Image,
- Row,
- Spinner,
- Button,
- Collapse,
- Modal
-} from "../bootstrap"
+import { useMediaQuery } from "usehooks-ts"
+
+import { Col, Image, Row, Spinner, Collapse } from "../bootstrap"
 import { Bill, Profile } from "../db"
 import * as links from "../links"
 import { ChooseStance } from "./ChooseStance"
 import { useFormInfo } from "./hooks"
-import { useState } from "react"
-import { useMediaQuery } from "usehooks-ts"
+import { KeepNote, KeepNoteMobile } from "./KeepNote"
 import { ProgressBar } from "./ProgressBar"
-import { PublishInfo } from "./PublishInfo"
 import { PublishTestimony } from "./PublishTestimony"
 import { QuickInfo } from "./QuickInfo"
 import { Step } from "./redux"
 import { SelectLegislatorsCta } from "./SelectLegislatorsCta"
 import { ShareTestimony } from "./ShareTestimony"
 import { WriteTestimony } from "./WriteTestimony"
-import { KeepNote, KeepNoteMobile } from "./KeepNote"
 
 const Background = styled.div`
  background: var(--bs-white);
@@ -56,7 +47,6 @@ export const SubmitTestimonyForm = () => {
  )}
  </Col>
  </Row>
- {/* </StyledContainer> */}
  </Background>
  ) : (
  <Spinner animation="border" />