From 49dd641d082b082750017a941e8af29878a91dc3 Mon Sep 17 00:00:00 2001
From: Tracy <tracykmullen@gmail.com>
Date: Sat, 13 Mar 2021 17:43:40 -0600
Subject: [PATCH 1/3] color

---
 src/frontend/src/Routes.js                    | 106 ++++++++++++------
 src/frontend/src/components/BillDetailPage.js |   1 +
 .../src/components/DonorDetailPage.js         |   6 +-
 src/frontend/src/components/DonutChart.js     |   6 +-
 .../src/components/LegislatorDetailPage.js    |  54 +++++----
 src/frontend/src/components/SimpleTabs.js     |  21 +++-
 6 files changed, 131 insertions(+), 63 deletions(-)

diff --git a/src/frontend/src/Routes.js b/src/frontend/src/Routes.js
index b5b9ae3..fe50585 100644
--- a/src/frontend/src/Routes.js
+++ b/src/frontend/src/Routes.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Tabs, Tab } from '@material-ui/core'
+import { Tabs, Tab, makeStyles } from '@material-ui/core'
 import { Route, useHistory, Switch } from 'react-router-dom'
 import LegislatorsPage from 'components/LegislatorsPage'
 import Logo from 'components/Logo'
@@ -18,8 +18,29 @@ import MonetizationOnRounded from '@material-ui/icons/MonetizationOnRounded'
 import SearchAll, { SearchResults } from 'components/SearchAll'
 import { TabWrapper } from 'components/SimpleTabs'
 import CustomLink from 'components/CustomLink'
+import { MuiThemeProvider } from '@material-ui/core/styles'
+import { billTheme, legTheme, donorTheme } from 'theme'
+
+const useStyles = makeStyles({
+  billsTab: {
+    '&.MuiTab-textColorPrimary.Mui-selected': {
+      color: billTheme.palette.primary.main,
+    },
+  },
+  donorTab: {
+    '&.MuiTab-textColorPrimary.Mui-selected': {
+      color: donorTheme.palette.primary.main,
+    },
+  },
+  wrapper: {
+    '& .MuiTabs-indicator': {
+      backgroundColor: legTheme.palette.grey[600],
+    },
+  },
+})
 
 function Nav() {
+  const classes = useStyles()
   const history = useHistory()
   if (
     history.location.pathname.includes('searchAll') ||
@@ -30,7 +51,7 @@ function Nav() {
   }
   return (
     <TabWrapper>
-      <nav style={{ margin: '1em 0' }}>
+      <nav style={{ margin: '1em 0' }} className={classes.wrapper}>
         <Tabs
           variant="fullWidth"
           indicatorColor="primary"
@@ -43,6 +64,7 @@ function Nav() {
                 <PersonOutlineRounded /> Legislators
               </>
             }
+            color={legTheme.palette.primary}
             value="legislators"
             onClick={() => history.push('/legislators')}
           />
@@ -53,6 +75,7 @@ function Nav() {
               </>
             }
             value="bills"
+            className={classes.billsTab}
             onClick={() => history.push('/bills')}
           />
           <Tab
@@ -62,6 +85,7 @@ function Nav() {
               </>
             }
             value="donors"
+            className={classes.donorTab}
             onClick={() => history.push('/donors')}
           />
         </Tabs>
@@ -70,6 +94,18 @@ function Nav() {
   )
 }
 
+function ThemedBody({ children }) {
+  const { location } = useHistory()
+  let theme = legTheme
+  if (location.pathname.includes('/bills')) {
+    theme = billTheme
+  }
+  if (location.pathname.includes('/donors')) {
+    theme = donorTheme
+  }
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+}
+
 export default function Routes() {
   return (
     <div>
@@ -86,39 +122,41 @@ export default function Routes() {
       <SearchAll />
       <Nav />
 
-      <Switch>
-        <Route path="/searchAll/:searchQuery">
-          <SearchResults />
-        </Route>
-        <Route path="/findReps">
-          <FindReps />
-        </Route>
-        <Route path="/about">
-          <About />
-        </Route>
-        <Route path="/bills/bill/:id">
-          <BillDetailPage />
-        </Route>
-        <Route path="/bills">
-          <BillsPage />
-        </Route>
-        <Route path="/donors/donor/:id">
-          <DonorDetailPage />
-        </Route>
-        <Route path="/donors">
-          <DonorsPage />
-        </Route>
-        <Route path="/policy-areas">
-          <PolicyAreasPage />
-        </Route>
-        <Route path="/legislators/legislator/:id">
-          <LegislatorDetailPage />
-        </Route>
-        <Route path="/legislators">
+      <ThemedBody>
+        <Switch>
+          <Route path="/searchAll/:searchQuery">
+            <SearchResults />
+          </Route>
+          <Route path="/findReps">
+            <FindReps />
+          </Route>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/bills/bill/:id">
+            <BillDetailPage />
+          </Route>
+          <Route path="/bills">
+            <BillsPage />
+          </Route>
+          <Route path="/donors/donor/:id">
+            <DonorDetailPage />
+          </Route>
+          <Route path="/donors">
+            <DonorsPage />
+          </Route>
+          <Route path="/policy-areas">
+            <PolicyAreasPage />
+          </Route>
+          <Route path="/legislators/legislator/:id">
+            <LegislatorDetailPage />
+          </Route>
+          <Route path="/legislators">
+            <LegislatorsPage />
+          </Route>
           <LegislatorsPage />
-        </Route>
-        <LegislatorsPage />
-      </Switch>
+        </Switch>
+      </ThemedBody>
     </div>
   )
 }
diff --git a/src/frontend/src/components/BillDetailPage.js b/src/frontend/src/components/BillDetailPage.js
index 785fb69..76b86b6 100644
--- a/src/frontend/src/components/BillDetailPage.js
+++ b/src/frontend/src/components/BillDetailPage.js
@@ -165,6 +165,7 @@ function BillDetailPage() {
             label: `Sponsors (${
               loading ? 'loading' : fullBillData.sponsors.totalCount
             })`,
+            className: 'leg-theme',
             content: (
               <div className="detail-page">
                 <LegislatorsList
diff --git a/src/frontend/src/components/DonorDetailPage.js b/src/frontend/src/components/DonorDetailPage.js
index 9682b06..9bffbb2 100644
--- a/src/frontend/src/components/DonorDetailPage.js
+++ b/src/frontend/src/components/DonorDetailPage.js
@@ -9,6 +9,7 @@ import CustomLink from 'components/CustomLink'
 import { BlankLoadingLine } from 'styles'
 import { RoundSquare } from 'styles'
 import { legTheme } from 'theme'
+import { useTheme } from '@material-ui/core'
 
 const GET_DONOR = gql`
   query Donor($id: Int!) {
@@ -32,6 +33,7 @@ const GET_DONOR = gql`
 `
 
 function DonorDetailPage() {
+  const { palette } = useTheme()
   const { id } = useParams()
   const { data, loading, error } = useQuery(GET_DONOR, {
     variables: { id },
@@ -84,9 +86,7 @@ function DonorDetailPage() {
                     marginTop: 10,
                     width: 20,
                     height: 20,
-                    background: rowData.legId
-                      ? legTheme.palette.primary.main
-                      : '#bbb',
+                    background: rowData.legId ? palette.primary.main : '#bbb',
                   }}
                 />
                 <div style={{ margin: '0 1em' }}>
diff --git a/src/frontend/src/components/DonutChart.js b/src/frontend/src/components/DonutChart.js
index f235f37..46507bd 100644
--- a/src/frontend/src/components/DonutChart.js
+++ b/src/frontend/src/components/DonutChart.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { PieChart, Pie, Tooltip, Cell } from 'recharts'
 import { numberWithCommas } from 'utils'
 import { legTheme } from 'theme'
+import { useTheme } from '@material-ui/core'
 
 const Wrapper = styled.div`
   .large {
@@ -41,6 +42,7 @@ function DonutChart({
     paddingAngle: 2,
     dataKey: 'value',
   }
+  const { palette } = useTheme()
   return (
     <Wrapper>
       <PieChart width={CHART_WIDTH} height={CHART_WIDTH}>
@@ -48,7 +50,7 @@ function DonutChart({
           {...props}
           innerRadius={CHART_WIDTH / 2 - 30}
           outerRadius={CHART_WIDTH / 2 - 10}
-          fill={legTheme.palette.primary.main}
+          fill={palette.primary.main}
         >
           {data.map((entry, index) => {
             return (
@@ -63,7 +65,7 @@ function DonutChart({
           {...props}
           innerRadius={CHART_WIDTH / 2 - 30}
           outerRadius={CHART_WIDTH / 2 - 10}
-          fill={loading ? '#ccc' : legTheme.palette.primary.main}
+          fill={loading ? '#ccc' : palette.primary.main}
         ></Pie>
 
         <text x={CHART_WIDTH / 2} y={CHART_WIDTH / 2 + 20} textAnchor="middle">
diff --git a/src/frontend/src/components/LegislatorDetailPage.js b/src/frontend/src/components/LegislatorDetailPage.js
index 177d41e..203fc58 100644
--- a/src/frontend/src/components/LegislatorDetailPage.js
+++ b/src/frontend/src/components/LegislatorDetailPage.js
@@ -22,6 +22,8 @@ import {
   MANY_SPONSORS_FILTER,
   PARTY_FILTERS,
 } from './BillsPage'
+import { MuiThemeProvider } from '@material-ui/core/styles'
+import { billTheme } from 'theme'
 
 const GET_LEG = gql`
   query Legislator($id: Int!) {
@@ -286,6 +288,7 @@ function LegislatorDetailPage() {
             label: `Top Donors (${
               loading ? 'loading' : fullLegData.contributions.edges.length
             })`,
+            className: 'donor-theme',
             content: (
               <div>
                 <PaginatedList
@@ -349,30 +352,35 @@ function LegislatorDetailPage() {
             label: `Bills Sponsored (${
               loading ? 'loading' : fullLegData.billsSponsored.totalCount
             })`,
+            className: 'bill-theme',
             content: (
-              <BillsWrapper>
-                <BillList
-                  gqlQuery={BILLS_SPONSORED}
-                  gqlVariables={{ sponsorId: id }}
-                  rowsPerPage={100}
-                  title={
-                    <>
-                      <FilterSection
-                        hr={false}
-                        style={{ width: '100%' }}
-                        title={
-                          <Typography variant="h6">Bills Sponsored</Typography>
-                        }
-                        tags={{
-                          party: PARTY_FILTERS,
-                          multipleSponsors: MANY_SPONSORS_FILTER,
-                          classification: CLASSIFICATION_FILTERS,
-                        }}
-                      />
-                    </>
-                  }
-                />
-              </BillsWrapper>
+              <MuiThemeProvider theme={billTheme}>
+                <BillsWrapper>
+                  <BillList
+                    gqlQuery={BILLS_SPONSORED}
+                    gqlVariables={{ sponsorId: id }}
+                    rowsPerPage={100}
+                    title={
+                      <>
+                        <FilterSection
+                          hr={false}
+                          style={{ width: '100%' }}
+                          title={
+                            <Typography variant="h6">
+                              Bills Sponsored
+                            </Typography>
+                          }
+                          tags={{
+                            party: PARTY_FILTERS,
+                            multipleSponsors: MANY_SPONSORS_FILTER,
+                            classification: CLASSIFICATION_FILTERS,
+                          }}
+                        />
+                      </>
+                    }
+                  />
+                </BillsWrapper>
+              </MuiThemeProvider>
             ),
           },
           {
diff --git a/src/frontend/src/components/SimpleTabs.js b/src/frontend/src/components/SimpleTabs.js
index c2e5a7d..7351be2 100644
--- a/src/frontend/src/components/SimpleTabs.js
+++ b/src/frontend/src/components/SimpleTabs.js
@@ -6,12 +6,26 @@ import Box from '@material-ui/core/Box'
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom'
 import { getQueryString, setQueryString } from 'utils'
+import { donorTheme, legTheme, billTheme } from 'theme'
 
 export const TabWrapper = styled.div`
   button {
     border-bottom: solid !important;
     border-bottom-style: inset !important;
   }
+  span[class^='MuiTabs-indicator'],
+  span[class*=' MuiTabs-indicator'] {
+    background-color: ${legTheme.palette.grey[600]};
+  }
+  .leg-theme.Mui-selected {
+    color: ${legTheme.palette.primary.main};
+  }
+  .donor-theme.Mui-selected {
+    color: ${donorTheme.palette.primary.main};
+  }
+  .bill-theme.Mui-selected {
+    color: ${billTheme.palette.primary.main};
+  }
 `
 
 function TabPanel(props) {
@@ -71,7 +85,12 @@ export default function SimpleTabs({ tabs = [], startTabIdx = 0, saveToUrl }) {
           onChange={handleChange}
         >
           {tabs.map((t, i) => (
-            <Tab key={t.label} label={t.label} {...a11yProps(i)} />
+            <Tab
+              key={t.label}
+              label={t.label}
+              className={t.className}
+              {...a11yProps(i)}
+            />
           ))}
         </Tabs>
       </div>

From 13869854d64fe6e37e5accc4c071cb6c66d8dc75 Mon Sep 17 00:00:00 2001
From: Tracy <tracykmullen@gmail.com>
Date: Thu, 25 Mar 2021 21:29:19 -0500
Subject: [PATCH 2/3] better UX on disclosures

---
 src/docker-compose.yml                        |   2 +
 .../src/components/DonorDetailPage.js         |   1 -
 src/frontend/src/components/DonutChart.js     |   1 -
 .../src/components/LegislatorDetailPage.js    | 150 +++++++++++-------
 src/frontend/src/components/PaginatedList.js  |  87 +++++++++-
 5 files changed, 182 insertions(+), 59 deletions(-)

diff --git a/src/docker-compose.yml b/src/docker-compose.yml
index 4ceee40..8cc3098 100644
--- a/src/docker-compose.yml
+++ b/src/docker-compose.yml
@@ -10,6 +10,8 @@ services:
       - POSTGRES_DB=influencetx
     volumes:
       - data:/var/lib/postgres
+    ports:
+      - "5432:5432"
 
   web:
     container_name: web
diff --git a/src/frontend/src/components/DonorDetailPage.js b/src/frontend/src/components/DonorDetailPage.js
index 9bffbb2..6f280c2 100644
--- a/src/frontend/src/components/DonorDetailPage.js
+++ b/src/frontend/src/components/DonorDetailPage.js
@@ -8,7 +8,6 @@ import { formatMoney, getDebugQuery } from 'utils'
 import CustomLink from 'components/CustomLink'
 import { BlankLoadingLine } from 'styles'
 import { RoundSquare } from 'styles'
-import { legTheme } from 'theme'
 import { useTheme } from '@material-ui/core'
 
 const GET_DONOR = gql`
diff --git a/src/frontend/src/components/DonutChart.js b/src/frontend/src/components/DonutChart.js
index 46507bd..addb769 100644
--- a/src/frontend/src/components/DonutChart.js
+++ b/src/frontend/src/components/DonutChart.js
@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import { PieChart, Pie, Tooltip, Cell } from 'recharts'
 import { numberWithCommas } from 'utils'
-import { legTheme } from 'theme'
 import { useTheme } from '@material-ui/core'
 
 const Wrapper = styled.div`
diff --git a/src/frontend/src/components/LegislatorDetailPage.js b/src/frontend/src/components/LegislatorDetailPage.js
index 203fc58..5f1707f 100644
--- a/src/frontend/src/components/LegislatorDetailPage.js
+++ b/src/frontend/src/components/LegislatorDetailPage.js
@@ -2,13 +2,20 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/react-hooks'
 import { gql } from 'apollo-boost'
-import { Typography, Button } from '@material-ui/core'
+import {
+  Typography,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@material-ui/core'
 
 import OpenInNewIcon from '@material-ui/icons/OpenInNew'
 import SimpleTabs from 'components/SimpleTabs'
 import PaginatedList, {
   LoadingListItem,
-  SimpleList,
+  ShowMoreList,
 } from 'components/PaginatedList'
 import BillList from 'components/BillList'
 import TexasDistrictMap from 'components/TexasDistrictMap'
@@ -140,14 +147,20 @@ export const BillsWrapper = styled.div`
   }
 `
 
-function HeldByRow(rowData) {
+function HeldByDiv({ heldBy }) {
   return (
-    <div style={{ float: 'right' }}>
-      {rowData.heldBy === 'FILER' ? '' : rowData.heldBy}
-    </div>
+    HeldByName[heldBy] && (
+      <span style={{ opacity: 0.5 }}> ({HeldByName[heldBy]})</span>
+    )
   )
 }
 
+const HeldByName = {
+  FILER: '',
+  SPOUSE: 'Spouse',
+  DEPENDENT: 'Dependent',
+}
+
 function heldByOrder(a, b) {
   return a.heldBy === 'FILER' ? -1 : 1
 }
@@ -156,82 +169,108 @@ function FinancialDisclosure({ disclosure, loading }) {
   if (!disclosure) return null
   return (
     <div>
-      <div style={{ margin: '1rem', opacity: 0.8 }}>{disclosure.year}</div>
-      <SimpleList
+      <ShowMoreList
         title="Employers"
         rows={disclosure.jobs.sort(heldByOrder) || []}
         totalCount={!loading && disclosure.jobs.length}
-        columns={[
-          {
-            render: (rowData) => (
-              <LabelDetail label={rowData.employer} detail={rowData.position} />
-            ),
-          },
-          { render: HeldByRow },
-        ]}
+        render={(rowData) => (
+          <LabelDetail
+            label={
+              <span>
+                {rowData.employer} <HeldByDiv {...rowData} />
+              </span>
+            }
+            detail={rowData.position}
+          />
+        )}
         collapsable
       />
       <div style={{ margin: '3rem' }} />
-      <SimpleList
+      <ShowMoreList
         hideIfNoResults
         title="Boards"
         rows={disclosure.boards.sort(heldByOrder) || []}
         totalCount={!loading && disclosure.boards.length}
-        columns={[
-          {
-            render: (rowData) => (
-              <LabelDetail label={rowData.name} detail={rowData.position} />
-            ),
-          },
-          { render: HeldByRow },
-        ]}
+        render={(rowData) => (
+          <LabelDetail
+            label={
+              <span>
+                {rowData.name} <HeldByDiv {...rowData} />
+              </span>
+            }
+            detail={rowData.position}
+          />
+        )}
         collapsable
       />
       <div style={{ margin: '3rem' }} />
-      <SimpleList
+      <ShowMoreList
         hideIfNoResults
         title="Stocks"
         rows={disclosure.stocks.sort(heldByOrder)}
         totalCount={!loading && disclosure.stocks.length}
-        columns={[
-          {
-            render: (rowData) => (
-              <LabelDetail label={rowData.name} detail={rowData.numShares} />
-            ),
-          },
-          {
-            render: HeldByRow,
-          },
-        ]}
+        render={(rowData) => (
+          <LabelDetail
+            label={
+              <span>
+                {rowData.name} <HeldByDiv {...rowData} />
+              </span>
+            }
+            detail={rowData.numShares}
+          />
+        )}
         collapsable
         defaultOpen={disclosure.stocks.length < 10}
       />
       <div style={{ margin: '3rem' }} />
 
-      <SimpleList
+      <ShowMoreList
         hideIfNoResults
         title="Gifts"
         rows={disclosure.gifts}
         totalCount={!loading && disclosure.gifts.length}
-        columns={[
-          {
-            render: (rowData) => (
-              <LabelDetail label={rowData.donor} detail={rowData.description} />
-            ),
-          },
-          {
-            render: (rowData) => (
-              <div style={{ float: 'right' }}>
-                {rowData.heldBy === 'FILER' ? '' : rowData.heldBy}
-              </div>
-            ),
-          },
-        ]}
+        render={(rowData) => (
+          <LabelDetail
+            label={
+              <span>
+                {rowData.donor} <HeldByDiv {...rowData} />
+              </span>
+            }
+            detail={rowData.description}
+          />
+        )}
       />
     </div>
   )
 }
 
+function FinancialDisclosureSection({ disclosures = [], loading }) {
+  const [disclosureIdx, setDisclosureIdx] = React.useState(0)
+
+  return (
+    <div>
+      <div style={{ padding: '1em', textAlign: 'center' }}>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">Year</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={disclosureIdx}
+            onChange={(e) => setDisclosureIdx(e.target.value)}
+          >
+            {disclosures.map((d, i) => (
+              <MenuItem value={i}> {d.year} </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </div>
+      <FinancialDisclosure
+        disclosure={disclosures[disclosureIdx]}
+        loading={loading}
+      />
+    </div>
+  )
+}
 function LabelDetail({ label, detail }) {
   return (
     <div>
@@ -341,11 +380,10 @@ function LegislatorDetailPage() {
               loading ? 'loading' : fullLegData.financialDisclosures?.length
             })`,
             content: (
-              <div>
-                {fullLegData.financialDisclosures?.map((disclosure) => (
-                  <FinancialDisclosure disclosure={disclosure} />
-                ))}
-              </div>
+              <FinancialDisclosureSection
+                disclosures={fullLegData.financialDisclosures}
+                loading={loading}
+              />
             ),
           },
           {
diff --git a/src/frontend/src/components/PaginatedList.js b/src/frontend/src/components/PaginatedList.js
index e77e938..2d5a982 100644
--- a/src/frontend/src/components/PaginatedList.js
+++ b/src/frontend/src/components/PaginatedList.js
@@ -4,7 +4,12 @@ import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
-import { IconButton, Typography, Collapse } from '@material-ui/core'
+import {
+  IconButton,
+  Typography,
+  Collapse,
+  Link as MaterialLink,
+} from '@material-ui/core'
 import ChevronLeft from '@material-ui/icons/ChevronLeft'
 import ChevronRight from '@material-ui/icons/ChevronRight'
 import styled from 'styled-components'
@@ -288,3 +293,83 @@ export function SimpleList({
     </StyleWrapper>
   )
 }
+
+export function ShowMoreList({
+  totalCount,
+  rows = [],
+  title,
+  render,
+  rowsToShow = 6,
+  loadingListBody = LoadingListBody,
+  loading = false,
+  hideIfNoResults = false,
+}) {
+  const [open, setOpen] = React.useState(false)
+  if (hideIfNoResults && rows.length === 0) {
+    return null
+  }
+  return (
+    <StyleWrapper>
+      <TableContainer
+        style={{
+          overflowX: 'initial',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            margin: '0 1em',
+          }}
+        >
+          <Typography variant="h6" style={{ width: '100%' }}>
+            {title}
+            <span
+              variant="subtitle2"
+              style={{ fontSize: '.75em', opacity: 0.5, margin: '1em' }}
+            >
+              {loading ? 'loading' : `${totalCount} Results`}
+            </span>
+          </Typography>
+        </div>
+        <Table aria-label="simple table">
+          {loading ? (
+            loadingListBody
+          ) : (
+            <TableBody>
+              {rows.slice(0, rowsToShow).map((row, i) => (
+                <TableRow key={i}>
+                  <TableCell>{render(row)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          )}
+        </Table>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <Table aria-label="simple table">
+            <TableBody>
+              {rows.slice(rowsToShow).map((row, i) => (
+                <TableRow key={i}>
+                  <TableCell>{render(row)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Collapse>
+        {!open && rows.length > rowsToShow && (
+          <MaterialLink
+            style={{
+              justifyContent: 'center',
+              padding: '1em',
+              cursor: 'pointer',
+            }}
+            onClick={() => setOpen(!open)}
+            color="primary"
+          >
+            Show {rows.length - rowsToShow} More <ExpandMore />
+          </MaterialLink>
+        )}
+      </TableContainer>
+    </StyleWrapper>
+  )
+}

From b6a446bb384e03ae9412d481f306b60d0443e638 Mon Sep 17 00:00:00 2001
From: Tracy <tracykmullen@gmail.com>
Date: Thu, 25 Mar 2021 21:32:54 -0500
Subject: [PATCH 3/3] update about page

---
 src/frontend/src/components/About.js          | 48 +++++++++++--------
 .../src/components/LegislatorDetailPage.js    |  4 +-
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/components/About.js b/src/frontend/src/components/About.js
index c584efe..89cb0f6 100644
--- a/src/frontend/src/components/About.js
+++ b/src/frontend/src/components/About.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Link, Typography } from '@material-ui/core'
 
 export default function About() {
   return (
@@ -11,73 +11,83 @@ export default function About() {
           Are you passionate about government transparency? Please sign up for
           our mailing list to stay up to date on our progress and give us
           feedback on features you would like to see.
-          <a
+          <Link
             href="https://www.influencetexas.com/sign-up/"
             target="_blank"
             rel="noopener noreferrer"
           >
             {' '}
             Sign up here!
-          </a>
+          </Link>
         </p>
         <p>
           This nonpartisan open-source project creates access to campaign
           finance information and bill information for Texas state politicians
           from the most recent (86th) legislative session. The project began at{' '}
-          <a
+          <Link
             href="http://atxhackforchange.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             ATX Hack for Change
-          </a>{' '}
+          </Link>{' '}
           in 2017, and is supported by{' '}
-          <a
+          <Link
             href="https://www.open-austin.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             Open Austin
-          </a>{' '}
+          </Link>{' '}
           and{' '}
-          <a
+          <Link
             href="https://influencetexas.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             Influence Texas P.B.C.
-          </a>
+          </Link>
         </p>
         <h4>About Our Data</h4>
+        <p>
+          Lawmakers’ <b>Personal Financial Statement</b> records were obtained{' '}
+          byInfluence Texas via an open records request to the Texas{' '}
+          EthicsCommission. Lawmakers and state officials are required to{' '}
+          disclose business entities that have ownership in, as well as stocks{' '}
+          and other financial interests. The state’s annual filing deadline is{' '}
+          April. Thus, the data in the current Influence Texas app represents
+          the January 2019 throughDecember 2019 calendar year. The date for the
+          2020 calendar year will not be available until April 2021.
+        </p>
         <p>
           <b>Legislature, Bill, and Voting</b> records are provided by{' '}
-          <a
+          <Link
             href="https://openstates.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             Open States
-          </a>
+          </Link>
           , a project supported by the nonprofit{' '}
-          <a
+          <Link
             href="http://openmediafoundation.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             Open Media Foundation
-          </a>{' '}
+          </Link>{' '}
           that scrapes data from the Texas House and Senate journals. This app
           features records from the most recent legislative session.
         </p>
         <p>
           <b>Campaign finance</b> records are supplied by the nonprofit{' '}
-          <a
+          <Link
             href="http://www.tpj.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             Texans for Public Justice
-          </a>
+          </Link>
           , which obtains <i>Contribution and Expenditure</i> data dutifully
           filed with the Texas Ethics Commission by all candidates, political
           committees, and political parties from the campaign cycle just prior
@@ -105,21 +115,21 @@ export default function About() {
         </p>
         <h4>TOS and Privacy</h4>
         Please read our{' '}
-        <a
+        <Link
           href="https://influencetexas.com/os-tos"
           target="_blank"
           rel="noopener noreferrer"
         >
           TOS
-        </a>{' '}
+        </Link>{' '}
         and{' '}
-        <a
+        <Link
           href="https://influencetexas.com/os-privacy"
           target="_blank"
           rel="noopener noreferrer"
         >
           Privacy Policy
-        </a>
+        </Link>
         .
         <br />
         <br />
diff --git a/src/frontend/src/components/LegislatorDetailPage.js b/src/frontend/src/components/LegislatorDetailPage.js
index 5f1707f..2562801 100644
--- a/src/frontend/src/components/LegislatorDetailPage.js
+++ b/src/frontend/src/components/LegislatorDetailPage.js
@@ -244,8 +244,10 @@ function FinancialDisclosure({ disclosure, loading }) {
   )
 }
 
-function FinancialDisclosureSection({ disclosures = [], loading }) {
+function FinancialDisclosureSection({ disclosures, loading }) {
   const [disclosureIdx, setDisclosureIdx] = React.useState(0)
+  if (!disclosures) return null
+  if (disclosures.length === 0) return 'No disclosures found.'
 
   return (
     <div>