Update SegmentedControl component

* Add className and blended properties
* Segment gets flex-grow

components/common/Segment/index.scss

@@ -1,6 +1,7 @@
 .Segment {
   color: $grey-55;
   cursor: pointer;
+  flex-grow: 1;
   font-size: 1.4rem;
   font-weight: $normal;
   min-width: 100px;

components/common/SegmentedControl/index.scss

@@ -16,6 +16,15 @@
     background: var(--card-bg);
   }
 
+  &.Blended {
+    background: var(--input-bound-bg);
+    border-radius: $full-corner;
+
+    .Segment input:checked + label {
+      background: var(--card-bg);
+    }
+  }
+
   &.fire {
     .Segment input:checked + label {
       background: var(--fire-bg);

components/common/SegmentedControl/index.tsx

@@ -1,19 +1,36 @@
 import React from 'react'
-
+import classNames from 'classnames'
 import './index.scss'
 
 interface Props {
+  className?: string
   elementClass?: string
+  blended?: boolean
 }
 
-const SegmentedControl: React.FC<Props> = ({ elementClass, children }) => {
+const SegmentedControl: React.FC<Props> = ({
+  className,
+  elementClass,
+  blended,
+  children,
+}) => {
+  const classes = classNames(
+    {
+      SegmentedControl: true,
+      Blended: blended,
+    },
+    className,
+    elementClass
+  )
   return (
     <div className="SegmentedControlWrapper">
-      <div className={`SegmentedControl ${elementClass ? elementClass : ''}`}>
-        {children}
-      </div>
+      <div className={classes}>{children}</div>
     </div>
   )
 }
 
+SegmentedControl.defaultProps = {
+  blended: false,
+}
+
 export default SegmentedControl