From 40a9b5e519800f605dee40cf017853b1ab50a253 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Thu, 7 Sep 2023 01:50:43 -0400
Subject: [PATCH] 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 | 18 ++++++++++--------
 www/js/metrics/MetricsTab.tsx  |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/www/js/components/Carousel.tsx b/www/js/components/Carousel.tsx
index a8f958bfa..28a31ff6a 100644
--- a/www/js/components/Carousel.tsx
+++ b/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',
diff --git a/www/js/metrics/MetricsTab.tsx b/www/js/metrics/MetricsTab.tsx
index 01b1bddce..424336f1e 100644
--- a/www/js/metrics/MetricsTab.tsx
+++ b/www/js/metrics/MetricsTab.tsx
@@ -121,7 +121,7 @@ const MetricsTab = () => {
   </>);
 }
 
-export const cardMargin = 8;
+export const cardMargin = 10;
 
 export const cardStyles: any = {
   card: {