H/docs styles images (#568)

doc styles + images

Author: bastardlee

components/DocsLayout/DocsLayout.module.scss

@@ -362,6 +362,30 @@
   flex: 1;
   padding: 1.5rem;
   width: 100%;
+
+  ul {
+    margin-top: 0;
+    margin-bottom: 2rem;
+  }
+
+  li {
+    font-size: $text-lg;
+    line-height: 1.3em;
+    padding-left: 0.5rem;
+    font-weight: 300;
+  }
+
+  h3 {
+    font-size: $text-xl;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  h4 {
+    font-size: $text-md;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+  }
 }
 
 .contentWrapper {

pages/docs/content/ballots.mdx

@@ -6,6 +6,11 @@ import { getEmbedConfig } from "utils/constants";
 
 ## Serve up geographic ballot information from our database to better inform voters.
 
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/ballot.png"
+  width="600px"
+/>
+
 Populist Ballot embeds let audiences enter their address to view and research what's on their ballot. It works in conjunction with Candidate Guide and Politician embeds to show URLs of websites that have those content types embedded in them.
 
 export default function DocsPoll({ children }) {

pages/docs/content/candidate-guides.mdx

@@ -19,6 +19,11 @@ With Populist, organizations can streamline the process of creating candidate gu
 
 When you create a new candidate guide, you are actually creating a new group of candidate guides that all have the same questions. This allows you to create a bulk number of candidate guides with the same questions. We will refer to these groups as candidate guide groups, and the guides for each race in a group as candidate guides.
 
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-add-question.jpg"
+  width="600px"
+/>
+
 ### Create Your Questions
 
 Once you create a new candidate guide group, you can add questions that you want to ask candidates, with the following options.
@@ -35,6 +40,11 @@ Once you create a new candidate guide group, you can add questions that you want
 
 - Placeholder text is the copy that is shown in the input field when it is empty - this can be used to give additional context for candidates answering a question.
 
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-add-race.jpg"
+  width="600px"
+/>
+
 ### Selecting Races
 
 Next, add the races with the candidates that you want to ask questions to. Each added race creates a new candidate guide for that race. You can search and filter races in an election with the following options.
@@ -57,55 +67,10 @@ Next, add the races with the candidates that you want to ask questions to. Each
 
 If you're asking the same questions to candidates across multiple races, simply add each race to the candidate guide group and they will appear under Races.
 
-### Sending Questions
-
-Once questions and races are added to a candidate guide group, you can export out a spreadsheet of all the candidates in the guide group that includes the following columns:
-
-#### Race Title
-
-- The title of the race that the candidate is running in. The title includes information like the state, office, municipality, race type, and year.
-
-#### First Name
-
-- The first name of the candidate.
-
-#### Middle Name
-
-- The middle name of the candidate.
-
-#### Last Name
-
-- The last name of the candidate.
-
-#### Preferred Name
-
-- The preferred name of the candidate.
-
-#### Suffix
-
-- Any suffix in a candidate's name e.g. Jr, III, Esq.
-
-#### Full Name
-
-- The full name of the candidate that includes the first, middle, last, suffix, and preferred names.
-
-#### Email
-
-- The candidate's email.
-
-#### Form Link
-
-- The URL to the automatically generated form that the candidate can use to submit their responses.
-
-#### Was Candidate Emailed
-
-- Either a true or false value based on the "Email Sent" checkbox that is manually set by users to track whether an email was sent.
-
-#### Last Submission
-
-- The date and time of the last submission by the candidate.
-
-Use this exported spreadsheet with your preferred email list management software to send emails to each of the candidates. Using each column in the spreadsheet, you can personalize the emails to include the candidate's name and the link they will use to respond to the guide questions.
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-manage-races.jpg"
+  width="800px"
+/>
 
 ### Managing Guides
 
@@ -133,7 +98,12 @@ Under Races you'll see all the races that have been added to the candidate guide
 
 #### Emails Sent
 
-- A checkbox to help track whether an email was sent to the candidates in a race.
+- A checkbox to help you manually track whether an email was sent to the candidates in a race.
+
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-manage-guide.jpg"
+  width="800px"
+/>
 
 By clicking on a row in the Races table, you'll be able to access each race's candidate guide management page. On this page you'll find the following information:
 
@@ -161,6 +131,66 @@ By clicking on a row in the Races table, you'll be able to access each race's ca
 
 - URLs where the candidate guide has been embedded.
 
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-export.jpg"
+  width="800px"
+/>
+
+### Sending Questions
+
+Once questions and races are added to a candidate guide group, you can export out a spreadsheet of all the candidates in the guide group that includes the following columns:
+
+#### Race Title
+
+- The title of the race that the candidate is running in. The title includes information like the state, office, municipality, race type, and year.
+
+#### First Name
+
+- The first name of the candidate.
+
+#### Middle Name
+
+- The middle name of the candidate.
+
+#### Last Name
+
+- The last name of the candidate.
+
+#### Preferred Name
+
+- The preferred name of the candidate.
+
+#### Suffix
+
+- Any suffix in a candidate's name e.g. Jr, III, Esq.
+
+#### Full Name
+
+- The full name of the candidate that includes the first, middle, last, suffix, and preferred names.
+
+#### Email
+
+- The candidate's email.
+
+#### Form Link
+
+- The URL to the automatically generated form that the candidate can use to submit their responses.
+
+#### Was Candidate Emailed
+
+- Either a true or false value based on the "Email Sent" checkbox that is manually set by users to track whether an email was sent.
+
+#### Last Submission
+
+- The date and time of the last submission by the candidate.
+
+Use this exported spreadsheet with your preferred email list management software to send emails to each of the candidates. Using each column in the spreadsheet, you can personalize the emails to include the candidate's name and the link they will use to respond to the guide questions.
+
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/candidate-guide-submissions.jpg"
+  width="800px"
+/>
+
 ### Managing Submissions
 
 You can access each candidate's submissions by clicking on the Submissions tab at the top of the candidate guide management page. To see responses to each question, click on a question and the submissions will populate in the Responses table below. From this table you can add translations, editorial, and manage duplicate submissions for similar guides.

pages/docs/content/legislation.mdx

@@ -8,11 +8,9 @@ import { BillWidget } from "components/BillWidget/BillWidget";
 
 Legislation embeds give the latest information about bills as they move through the legislature. They help audiences easily understand what the legislation is about, who is involved, and where the bill is currently in the process of becoming law. Legislation embeds also capture engagement by allowing audiences to vote on whether they support, oppose, or are undecided on a bill.
 
-<BillWidget
-  embedId={getEmbedConfig()["legislation"].embedId}
-  billId={getEmbedConfig()["legislation"].billId}
-  origin={window.location.origin}
-  renderOptions={{}}
+<img
+  src="https://populist-platform.s3.us-east-2.amazonaws.com/web-assets/images/bill.jpg"
+  width="600px"
 />
 
 Below are the types of information on each legislation embed:

utils/constants.tsx

@@ -90,8 +90,8 @@ export const EMBED_CONTENT_IDS = {
   },
   production: {
     "candidate-guide": {
-      embedId: "6db3cbcd-4030-477b-80f1-6496a93d6e4d",
-      candidateGuideId: "71fafeab-69b0-4c5b-b676-1d479b1ae5fa",
+      embedId: "b2f081de-dc1a-459e-b78f-da24bab97ca5",
+      candidateGuideId: "5e9792f9-e811-43d9-85eb-f21d6a08833d",
     },
     "legislation-tracker": {
       embedId: "1234",