change(ui) - segment selection

frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx

@@ -15,17 +15,16 @@ function MetricViewHeader() {
     <div>
       <div className="flex items-center mb-4 justify-between px-6">
         <div className="flex items-baseline mr-3">
-          <PageTitle title="Metrics" className="" />
+          <PageTitle title="Cards" className="" />
         </div>
         <div className="ml-auto flex items-center">
-          {/* <Link to={'/metrics/create'}>
-            <Button variant="primary">Create</Button>
-          </Link> */}
+          <Link to={'/metrics/create'}>
+            <Button variant="primary">New Card</Button>
+          </Link>
           <SegmentSelection
               name="viewType"
-              className="my-3"
-              primary
-              icons={true}
+              className="mx-3"
+              primary              
               onSelect={ () => metricStore.updateKey('listView', !listView) }
               value={{ value: listView ? 'list' : 'grid' }}
               list={ [

frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx

@@ -45,7 +45,7 @@ function WidgetPreview(props: Props) {
                                 name="viewType"
                                 className="my-3"
                                 primary
-                                icons={true}
+                                size="small"
                                 onSelect={ changeViewType }
                                 value={{ value: metric.viewType }}
                                 list={ [
@@ -63,7 +63,7 @@ function WidgetPreview(props: Props) {
                                 name="viewType"
                                 className="my-3"
                                 primary={true}
-                                icons={true}
+                                size="small"
                                 onSelect={ changeViewType }
                                 value={{ value: metric.viewType }}
                                 list={[

frontend/app/components/ui/SegmentSelection/SegmentSelection.js

@@ -48,7 +48,7 @@ class SegmentSelection extends React.Component {
               {item.icon && (
                 <Icon
                   name={item.icon}
-                  size={size === 'extraSmall' || icons ? 14 : 20}
+                  size={size === 'extraSmall' || size === 'small'  || icons  ? 14 : 20}
                   marginRight={item.name ? '6' : ''}
                 />
               )}

frontend/app/components/ui/SegmentSelection/segmentSelection.module.css

@@ -10,7 +10,8 @@
   & .item {
     color: $gray-medium;
     font-weight: medium;
-    padding: 10px;
+    padding: 0 6px;
+    height: 33px;
     flex: 1;
     text-align: center;
     cursor: pointer;
@@ -70,6 +71,7 @@
 
 .small .item {
   padding: 4px 8px;
+  height: 26px;
 }
 
 .extraSmall .item {