slim the Carousel card margins

The gap between cards should not be bigger than the gap before the first card / after the last card. To get this effect, the first and last card need full size margins, while the inner margins can be half that.
Overall this gives us slimmer margins that are uniform.

www/js/components/Carousel.tsx

@@ -7,15 +7,16 @@ type Props = {
   cardMargin: number,
 }
 const Carousel = ({ children, cardWidth, cardMargin }: Props) => {
+  const numCards = React.Children.count(children);
   return (
     <ScrollView horizontal={true}
       decelerationRate={0}
-      snapToInterval={cardWidth + cardMargin*2}
+      snapToInterval={cardWidth + cardMargin}
       snapToAlignment={"center"}
-      style={s.carouselScroll}
+      style={s.carouselScroll(cardMargin)}
       contentContainerStyle={{alignItems: 'flex-start'}}>
-      {React.Children.map(children, child => (
-        <View style={s.carouselCard(cardWidth, cardMargin)}>
+      {React.Children.map(children, (child, i) => (
+        <View style={s.carouselCard(cardWidth, cardMargin, (i == 0), (i == numCards-1))}>
           {child}
         </View>
       ))}
@@ -24,13 +25,14 @@ const Carousel = ({ children, cardWidth, cardMargin }: Props) => {
 };
 
 export const s = {
-  carouselScroll: {
+  carouselScroll: (cardMargin) => ({
     // @ts-ignore, RN doesn't recognize `scrollSnapType`, but it does work on RN Web
     scrollSnapType: 'x mandatory',
     paddingVertical: 10,
-  },
-  carouselCard: (cardWidth, cardMargin) => ({
-    margin: cardMargin,
+  }),
+  carouselCard: (cardWidth, cardMargin, isFirst, isLast) => ({
+    marginLeft: isFirst ? cardMargin : cardMargin/2,
+    marginRight: isLast ? cardMargin : cardMargin/2,
     width: cardWidth,
     scrollSnapAlign: 'center',
     scrollSnapStop: 'always',

www/js/metrics/MetricsTab.tsx

@@ -121,7 +121,7 @@ const MetricsTab = () => {
   </>);
 }
 
-export const cardMargin = 8;
+export const cardMargin = 10;
 
 export const cardStyles: any = {
   card: {