Merge pull request #1331 from hanboyu/Adjust-desktop-add-edit-testimony

Adjust desktop add edit testimony

components/publish/KeepNote.tsx

@@ -0,0 +1,100 @@
+import styled from "styled-components"
+import { Image } from "../bootstrap"
+import { Step } from "./redux"
+
+export const KeepNote = (props: { currentStep: Step }) => {
+  return (
+    <NoteContainer>
+      <HeaderContainer>Keep Note</HeaderContainer>
+      {props.currentStep == "selectLegislators" ||
+      props.currentStep == "write" ? (
+        <NoteContentForWrite />
+      ) : (
+        <NoteContentForSend />
+      )}
+    </NoteContainer>
+  )
+}
+
+export const NoteContentForWrite = () => {
+  return (
+    <NoteContent>
+      <div className="text-center">
+        <Image
+          className="px-5"
+          alt=""
+          src="/mailbox.svg"
+          style={{ transform: "scaleY(0.85)" }}
+        />
+      </div>
+      <NoteSubtitle>Please keep in mind...</NoteSubtitle>
+      <ul>
+        <NoteItem>
+          <u>We do not send an email for you.</u> This is a preview of what your
+          email to legislators will look like. On the next page, you will be
+          asked to “send email” which will open your email client (e.g.,
+          Outlook) and populate an email with your testimony.
+        </NoteItem>
+        <NoteItem>
+          Your testimony needs to be shared with the right legislators. Your
+          email “To:” box will be populated with the legislators you add here.
+          We've pre-populated this with the most relevant legislators: 1) the
+          Chairs of the Committee reviewing this bill; and 2) your own
+          legislators.
+        </NoteItem>
+        <NoteItem>
+          When you send this email, you are submitting formal public testimony!
+          As fellow constituents, we thank you for your sharing your voice.
+        </NoteItem>
+      </ul>
+    </NoteContent>
+  )
+}
+
+export const NoteContentForSend = () => {
+  return (
+    <NoteContent>
+      <div className="text-center">
+        <Image className="mx-auto" alt="" src="/computertextblob.svg" />
+      </div>
+      <NoteSubtitle>Rules for Testimony on MAPLE:</NoteSubtitle>
+      <ul style={{ color: "var(--bs-blue)" }}>
+        <NoteItem>
+          You can edit your testimony up to 5 times but the previous versions
+          will remain available.
+        </NoteItem>
+        <NoteItem>
+          Since MAPLE is an archive you cannot remove your testimony from the
+          site.
+        </NoteItem>
+        <NoteItem>Don't forget to send the email to your legislator.</NoteItem>
+      </ul>
+    </NoteContent>
+  )
+}
+
+const NoteContainer = styled.div`
+    background: var(--bs-body-bg);
+    display: flex;
+    flex-direction: column;
+    padding: 0rem 0rem 1rem 0rem;
+    height: 100%;
+  `,
+  HeaderContainer = styled.h4`
+    background: var(--bs-orange);
+    color: var(--bs-white);
+    padding: 1rem 0rem 1rem 0rem;
+    text-align: center;
+  `,
+  NoteSubtitle = styled.p`
+    color: var(--bs-blue);
+    font-weight: 700;
+    padding: 10px;
+  `,
+  NoteContent = styled.div`
+    line-height: normal;
+  `,
+  NoteItem = styled.li`
+    margin-top: 20px;
+    font-weight: 500;
+  `

components/publish/PublishTestimony.tsx

@@ -73,6 +73,12 @@ export const PublishTestimony = styled(({ ...rest }) => {
         left={<nav.Previous />}
         right={<PublishAndSend publish={publish} />}
       />
+      <p>
+        After clicking “publish” please click “Send Email” to open your email
+        client (e.g., Outlook) and send the email populated with your testimony!
+        Or, click the “copy” buttons to manually copy the testimony and
+        recipients of your email.
+      </p>
     </div>
   )
 })``

components/publish/StepChip.tsx

@@ -10,13 +10,17 @@ export const StepChip = styled<{
   return <div {...rest} />
 })`
   background-color: var(
-    ${({ active = false }) => (active ? "--bs-green" : "--bs-blue")}
+    ${({ active = false }) => (active ? "--bs-green" : "--bs-white")}
   );
   font-size: ${({ scale = 1 }) => scale * 1.25}rem;
   width: ${({ scale = 1 }) => scale * chipHeight}rem;
   height: ${({ scale = 1 }) => scale * chipHeight}rem;
   font-style: bold;
-  color: white;
+  color: var(${({ active = false }) => (active ? "--bs-white" : "--bs-blue")});
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${({ active = false }) =>
+    active ? "transparent" : "var(--bs-blue)"};
   border-radius: 50%;
   display: flex;
   align-items: center;

components/publish/SubmitTestimonyForm.tsx

@@ -13,6 +13,7 @@ import { Step } from "./redux"
 import { SelectLegislatorsCta } from "./SelectLegislatorsCta"
 import { ShareTestimony } from "./ShareTestimony"
 import { WriteTestimony } from "./WriteTestimony"
+import { KeepNote } from "./KeepNote"
 
 const Background = styled.div`
   background: linear-gradient(to right, white 50%, var(--bs-body-bg) 50%);
@@ -33,10 +34,10 @@ export const SubmitTestimonyForm = () => {
             <Form step={form.step} bill={form.bill} synced={form.synced} />
           </Col>
           <Col xs={3}>
-            {["publish", "share"].includes(form.step) ? (
-              <PublishInfo />
-            ) : (
+            {form.step == "position" ? (
               <QuickInfo bill={form.bill} profile={form.profile} />
+            ) : (
+              <KeepNote currentStep={form.step} />
             )}
           </Col>
         </Row>
@@ -94,12 +95,13 @@ const Form = ({
 const Overview = ({ className }: { className: string }) => (
   <div className={clsx("d-flex", className)}>
     <div>
-      <h1>Write your Testimony</h1>
+      <h1>Write, Publish, and Send Your Testimony!</h1>
       <Divider className="me-5" />
-      <div className="mt-2">
-        Let your voice be heard! MAPLE gives users the ability to send their
-        unfiltered feedback on bills to legislators, committees, and other
-        relevant parties. <b>Writing testimony is as easy as 1-2-3!</b>
+      <div className="mt-2" style={{ fontWeight: "bolder" }}>
+        Your voice matters. And it's important that you share it. MAPLE helps
+        you 1) write testimony, 2) publish it to our community, and 3) send it
+        to the right legislators so it can be formally considered. It's easy as
+        1-2-3!
       </div>
     </div>
     <div>