Skip to content

Commit

Permalink
Merge pull request #164 from open-austin/color-sections
Browse files Browse the repository at this point in the history 
Color sections
  • Loading branch information
@lazarus1331
lazarus1331 authored Apr 14, 2021
2 parents 40608e3 + b6a446b commit 6f5c943
Show file tree
Hide file tree
Showing 9 changed files with 344 additions and 141 deletions.
2 changes: 2 additions & 0 deletions src/docker-compose.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ services:
- POSTGRES_DB=influencetx
volumes:
- data:/var/lib/postgres
ports:
- "5432:5432"

web:
container_name: web
Expand Down
106 changes: 72 additions & 34 deletions src/frontend/src/Routes.js
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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') ||
Expand All @@ -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"
Expand All @@ -43,6 +64,7 @@ function Nav() {
<PersonOutlineRounded /> Legislators
</>
}
color={legTheme.palette.primary}
value="legislators"
onClick={() => history.push('/legislators')}
/>
Expand All @@ -53,6 +75,7 @@ function Nav() {
</>
}
value="bills"
className={classes.billsTab}
onClick={() => history.push('/bills')}
/>
<Tab
Expand All @@ -62,6 +85,7 @@ function Nav() {
</>
}
value="donors"
className={classes.donorTab}
onClick={() => history.push('/donors')}
/>
</Tabs>
Expand All @@ -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>
Expand All @@ -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>
)
}
48 changes: 29 additions & 19 deletions src/frontend/src/components/About.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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
Expand Down Expand Up @@ -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 />
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/components/BillDetailPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ function BillDetailPage() {
label: `Sponsors (${
loading ? 'loading' : fullBillData.sponsors.totalCount
})`,
className: 'leg-theme',
content: (
<div className="detail-page">
<LegislatorsList
Expand Down
7 changes: 3 additions & 4 deletions src/frontend/src/components/DonorDetailPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ 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`
query Donor($id: Int!) {
Expand All @@ -32,6 +32,7 @@ const GET_DONOR = gql`
`

function DonorDetailPage() {
const { palette } = useTheme()
const { id } = useParams()
const { data, loading, error } = useQuery(GET_DONOR, {
variables: { id },
Expand Down Expand Up @@ -84,9 +85,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' }}>
Expand Down
7 changes: 4 additions & 3 deletions src/frontend/src/components/DonutChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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`
.large {
Expand Down Expand Up @@ -41,14 +41,15 @@ function DonutChart({
paddingAngle: 2,
dataKey: 'value',
}
const { palette } = useTheme()
return (
<Wrapper>
<PieChart width={CHART_WIDTH} height={CHART_WIDTH}>
<Pie
{...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 (
Expand All @@ -63,7 +64,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">
Expand Down
Loading

0 comments on commit 6f5c943

Please sign in to comment.