From e791fb675cc7a04fb1150469381d013a17d908d0 Mon Sep 17 00:00:00 2001
From: Dan Schultz <slifty@gmail.com>
Date: Tue, 26 Mar 2019 21:11:14 -0400
Subject: [PATCH] Add detail description

This is just static text, but it gives some basic context around what
these percentages mean.

Issue #61
---
 .../Sidebar/DetailPane/FlagChart.js           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/client/components/Sidebar/DetailPane/FlagChart.js b/src/client/components/Sidebar/DetailPane/FlagChart.js
index ebc9d12..cce19c8 100644
--- a/src/client/components/Sidebar/DetailPane/FlagChart.js
+++ b/src/client/components/Sidebar/DetailPane/FlagChart.js
@@ -11,6 +11,21 @@ const Wrapper = styled.div`
 
 `
 
+const UsageDistributionHeader = styled.div`
+  font-family: Roboto;
+  font-size: 18px;
+  line-height: 24px;
+  margin-top: 30px;
+`
+
+const UsageDistributionDescription = styled.div`
+  font-family: Roboto;
+  font-size: 14px;
+  line-height: 19px;
+  margin-top: 10px;
+
+`
+
 const PercentageRow = styled.div`
   margin-top: 30px;
   display: flex;
@@ -80,6 +95,12 @@ class FlagChart extends React.Component {
     return (
       <>
         <Wrapper>
+          <UsageDistributionHeader>
+            Usage Distribution
+          </UsageDistributionHeader>
+          <UsageDistributionDescription>
+            Here's the party breakdown for the instances this phrase appeared in analyzed sections of the congressional record.
+          </UsageDistributionDescription>
           <PercentageRow>
             <PercentageBox>
               <RawPercentage>