Merge pull request #44 from developmentseed/style/table-labels

Color code stat table labels

Author: vgeorge

packages/web/src/app/stats.tsx

@@ -45,9 +45,9 @@ export function Stats(props: StatsProps) {
             <thead>
               <tr>
                 <th>Feature</th>
-                <th>Added</th>
-                <th>Modified</th>
-                <th>Deleted</th>
+                <th><span class="feature--label feature--label__add">Added</span></th>
+                <th><span class="feature--label feature--label__mod">Modified</span></th>
+                <th><span class="feature--label feature--label__del">Deleted</span></th>
               </tr>
             </thead>
             <tbody>
@@ -145,19 +145,19 @@ export function Stats(props: StatsProps) {
             <span class="bar-chart__bar--label">Buildings</span>
             <div class="bar-chart__bar--value">
               <span
-                class="bar-chart__bar--val1"
+                class="bar-chart__bar--add"
                 style={`flex-basis: ${
                   (stats.buildingsAdded / stats.buildings) * 100
                 }%`}
               />
               <span
-                class="bar-chart__bar--val2"
+                class="bar-chart__bar--mod"
                 style={`flex-basis: ${
                   (stats.buildingsModified / stats.buildings) * 100
                 }%`}
               />
               <span
-                class="bar-chart__bar--val3"
+                class="bar-chart__bar--del"
                 style={`flex-basis: ${
                   (stats.buildingsDeleted / stats.buildings) * 100
                 }%`}
@@ -168,19 +168,19 @@ export function Stats(props: StatsProps) {
             <span class="bar-chart__bar--label">Highways</span>
             <div class="bar-chart__bar--value">
               <span
-                class="bar-chart__bar--val1"
+                class="bar-chart__bar--add"
                 style={`flex-basis: ${
                   (stats.highwaysAdded / stats.highways) * 100
                 }%`}
               />
               <span
-                class="bar-chart__bar--val2"
+                class="bar-chart__bar--mod"
                 style={`flex-basis: ${
                   (stats.highwaysModified / stats.highways) * 100
                 }%`}
               />
               <span
-                class="bar-chart__bar--val3"
+                class="bar-chart__bar--del"
                 style={`flex-basis: ${
                   (stats.highwaysDeleted / stats.highways) * 100
                 }%`}
@@ -191,17 +191,17 @@ export function Stats(props: StatsProps) {
             <span class="bar-chart__bar--label">Other</span>
             <div class="bar-chart__bar--value">
               <span
-                class="bar-chart__bar--val1"
+                class="bar-chart__bar--add"
                 style={`flex-basis: ${(stats.otherAdded / stats.other) * 100}%`}
               />
               <span
-                class="bar-chart__bar--val2"
+                class="bar-chart__bar--mod"
                 style={`flex-basis: ${
                   (stats.otherModified / stats.other) * 100
                 }%`}
               />
               <span
-                class="bar-chart__bar--val3"
+                class="bar-chart__bar--del"
                 style={`flex-basis: ${
                   (stats.otherDeleted / stats.other) * 100
                 }%`}
@@ -213,9 +213,9 @@ export function Stats(props: StatsProps) {
           <thead>
             <tr>
               <th>Feature</th>
-              <th>Added</th>
-              <th>Modified</th>
-              <th>Deleted</th>
+              <th><span class="feature--label feature--label__add">Added</span></th>
+              <th><span class="feature--label feature--label__mod">Modified</span></th>
+              <th><span class="feature--label feature--label__del">Deleted</span></th>
             </tr>
           </thead>
           <tbody>

packages/web/src/index.css

@@ -36,6 +36,10 @@ p, h1, h2, h3, h4, h5, h6 {
   --base-light: #f4f4f4;
   --bg-dark: #051730;
   --bg-light: #eae9ee;
+
+  --color-success: #8CF8A3;
+  --color-info: #619EFF;
+  --color-danger: #FF7A7A;
   --font-family: 'DM Sans', Helvetica, Arial, sans-serif;
 }
 
@@ -232,14 +236,14 @@ li.bar-chart__bar {
   width: 100%;
   box-shadow: inset 0 0 1px 1px rgba(222,222,222,0.25)
 }
-.bar-chart__bar--val1 {
-  background: #8CF8A3;
+.bar-chart__bar--add {
+  background: var(--color-success);
 }
-.bar-chart__bar--val2 {
-  background: #619EFF;
+.bar-chart__bar--mod {
+  background: var(--color-info)
 }
-.bar-chart__bar--val3 {
-  background:#FF7A7A;
+.bar-chart__bar--del {
+  background: var(--color-danger);
 }
 .stats table th {
   text-transform: uppercase;
@@ -248,6 +252,15 @@ li.bar-chart__bar {
   text-align: left;
   border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
+.feature--label__add{
+  color: var(--color-success);
+}
+.feature--label__mod{
+  color: var(--color-info);
+}
+.feature--label__del{
+  color: var(--color-danger);
+}
 
 .stats table th:not(:first-child),
 .stats table td:not(:first-child) {