remove beta banner

Integration of new features

public/index.html

@@ -57,7 +57,7 @@
           <a class="smaller" href="https://www.atlanticcouncil.org/programs/digital-forensic-research-lab/"><img src="images/logos/dfrlab.svg" alt="Digital Forensic Research Lab Logo" /></a>
         </div>
         <h1>Interference 2020</h1>
-        <h2>Foreign Interference Attribution Tracker <span class="info-card">beta</span></h2>
+        <h2>Foreign Interference Attribution Tracker</h2>
         <div class="separator thicker"></div>
         <p class="center"><em>A Project of the Digital Forensic Research Lab (DFRLab) of the Atlantic Council</em></p>
       </section>

src/components/CheckboxPanel.svelte

@@ -41,6 +41,7 @@
             showHandleLabels={false}
             barOpacity={0.7}
             startColor={$polarizationScale(polarizationDef[0])}
+            middleColor={$polarizationScale(0)}
             stopColor={$polarizationScale(polarizationDef[1])}
             showBorder={false}
             on:changed={(e) => $polarizationFilter = e.detail} />

src/components/CibTable.svelte

@@ -48,7 +48,7 @@
   </table>
   <div class="budget-and-events">
     {#if (data.budgetTotalUsd && data.budgetTotalUsd > 0)}
-      <p>Facebook advertising expenditures: <strong>$ {commaFormat(data.budgetTotalUsd)}</strong>.</p>
+      <p>Facebook advertising expenditures: $ {commaFormat(data.budgetTotalUsd)}.</p>
     {/if}
   </div>
 </div>
@@ -57,21 +57,28 @@
   .cib-table-wrapper {
     display: flex;
     width: 100%;
+    margin-top: 0.3rem;
   }
 
   table {
     flex: 1;
+    max-width: 60%;
     font-size: 0.8rem;
     color: var(--text-black);
+    border-collapse: collapse;
   }
 
   thead {
     font-size: 0.7rem;
   }
 
+  thead td {
+    border-bottom: 1px solid gray;
+  }
+
   td {
     min-width: 30px;
-    padding: 0 0.2rem;
+    padding: 0.1rem 0.2rem;
     vertical-align: middle;
   }
 

src/components/Slider.svelte

@@ -12,6 +12,7 @@
   export let value = [0, 10];
   export let showHandleLabels = true;
   export let startColor = 'white';
+  export let middleColor = null;
   export let stopColor = 'red';
   export let barOpacity = 1;
   export let showBorder = true;
@@ -53,6 +54,8 @@
 
   $: pos.left = scale(value[0]) || 0;
   $: pos.right = scale(value[1]) || 0;
+
+  $: background = `linear-gradient(90deg, ${startColor}, ${middleColor ? middleColor + ', ' : ''}${stopColor})`;
 </script>
 
 <div class="slider"
@@ -68,7 +71,7 @@
          style="width: {sliderWidth - 2 * handleWidth}px;
                 margin-left: {1 * handleWidth}px;
                 opacity: {barOpacity};
-                background: linear-gradient(90deg, {startColor}, {stopColor});"></div>
+                background: {background};"></div>
     <div class="slider-handle"
          class:no-label={!showHandleLabels}
          style="left: {(Math.abs(value[0] - value[1]) < 0.1) ? pos.left - 5 : pos.left}px;"