Clean up the meter code

src/components/record-modal/meter.css

+.green {
+    fill: rgb(171, 220, 170);
+    stroke: rgb(174, 211, 168);
+}
+
+.yellow {
+    fill: rgb(251, 219, 130);
+    stroke: rgb(239, 212, 134);
+}
+
+.red {
+    fill: rgb(251, 194, 142);
+    stroke: rgb(235, 189, 142);
+}
+
+.container {
+    overflow: visible;
+}

src/components/record-modal/meter.jsx

 const React = require('react');
 const PropTypes = require('prop-types');
+const styles = require('./meter.css');
 
 const Meter = props => {
-    const level = Math.min(1, Math.max(0, props.level || 0));
     const {
         width,
         height
     } = props;
+    
+    const level = Math.min(1, Math.max(0, props.level || 0));
 
     const nGreen = 11;
     const nYellow = 5;
@@ -19,61 +21,34 @@ const Meter = props => {
     const barHeight = (height + barSpacing / 2 - barSpacing * nBars) / nBars;
     const barWidth = width;
 
-    const greenFill = 'rgb(171, 220, 170)';
-    const yellowFill = 'rgb(251, 219, 130)';
-    const redFill = 'rgb(251, 194, 142)';
-
-    const indexToFill = index => {
-        if (index < nGreen) return greenFill;
-        if (index < nGreen + nYellow) return yellowFill;
-        return redFill;
-    };
-
-    const greenStroke = 'rgb(174, 211, 168)';
-    const yellowStroke = 'rgb(239, 212, 134)';
-    const redStroke = 'rgb(235, 189, 142)';
-
-    const indexToStroke = index => {
-        if (index < nGreen) return greenStroke;
-        if (index < nGreen + nYellow) return yellowStroke;
-        return redStroke;
-    };
-
-    const bars = Array(nBars).fill(0)
-        .map((value, index) => (
-            <rect
-                fill={indexToFill(index)}
-                height={barHeight}
-                key={index}
-                rx={barRounding}
-                ry={barRounding}
-                stroke={indexToStroke(index)}
-                width={barWidth}
-                x={0}
-                y={height - barHeight - index * (barHeight + barSpacing)}
-            />
-        ));
-
-    const maskHeight = Math.floor(nBars * (1 - level)) * (barHeight + barSpacing);
-    const mask = (
-        <rect
-            fill="white"
-            height={maskHeight + 2}
-            opacity="0.75"
-            width={width + 4}
-            x={-2}
-            y={-2}
-        />
-    );
-
     return (
         <svg
+            className={styles.container}
             height={height}
-            style={{overflow: 'visible'}}
             width={width}
         >
-            {bars}
-            {mask}
+            {Array(nBars).fill(0)
+                .map((value, index) => (
+                    <rect
+                        className={index < nGreen ? styles.green :
+                            (index < nGreen + nYellow ? styles.yellow : styles.red)}
+                        height={barHeight}
+                        key={index}
+                        rx={barRounding}
+                        ry={barRounding}
+                        width={barWidth}
+                        x={0}
+                        y={height - barHeight - index * (barHeight + barSpacing)}
+                    />
+                ))}
+            <rect
+                fill="white"
+                height={Math.floor(nBars * (1 - level)) * (barHeight + barSpacing) + 2}
+                opacity="0.75"
+                width={width + 4}
+                x={-2}
+                y={-2}
+            />
         </svg>
     );
 };