From 3c878200e4fb012de5a4ac0b93377a6643e33027 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Tue, 12 Mar 2024 19:47:28 -0700
Subject: Fix home style

---
 src/components/Home.tsx     | 78 +++++++++++++++++++++------------------------
 src/components/RsvpForm.tsx |  4 +--
 src/components/active.css   |  3 +-
 3 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index da9eb6b..4d4428a 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -28,48 +28,44 @@ function Home() {
   };
 
   return (
-    <>
-      <div style={{ margin: 'auto', overflow: 'hidden' }}>
-        <div
-          style={{
-            whiteSpace: 'nowrap',
-            transform: `translate3d(${-index * 100}%, 0, 0)`,
-            transition: 'ease 1000ms',
-          }}
-        >
-          {colors.map((backgroundColor, colorIndex) => (
-            <div
-              key={colorIndex}
-              style={{
-                display: 'inline-block',
-                backgroundColor,
-                height: '80vh',
-                width: '100%',
-              }}
-            />
-          ))}
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          {colors.map((_, colorIndex) => (
-            <div
-              key={colorIndex}
-              style={{
-                display: 'inline-block',
-                height: '0.8rem',
-                width: '0.8rem',
-                borderRadius: '50%',
-                cursor: 'pointer',
-                margin: '0.7rem 0.7rem 0.7rem',
-              }}
-              className={colorIndex === index ? 'active' : 'inactive'}
-              onClick={() => {
-                setIndex(colorIndex);
-              }}
-            />
-          ))}
-        </div>
+    <div style={{ margin: 'auto', overflow: 'hidden' }}>
+      <div
+        style={{
+          whiteSpace: 'nowrap',
+          transform: `translateX(${-index * 100}%)`,
+          transition: 'ease 1000ms',
+        }}
+      >
+        {colors.map((backgroundColor, colorIndex) => (
+          <div
+            key={colorIndex}
+            style={{
+              display: 'inline-block',
+              backgroundColor,
+              height: '80vh',
+              width: '100%',
+            }}
+          />
+        ))}
       </div>
-    </>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        {colors.map((_, colorIndex) => (
+          <div
+            key={colorIndex}
+            style={{
+              height: '0.75rem',
+              width: '0.75rem',
+              borderRadius: '50%',
+              margin: '0.75rem',
+            }}
+            className={colorIndex === index ? 'active' : 'inactive'}
+            onClick={() => {
+              setIndex(colorIndex);
+            }}
+          />
+        ))}
+      </div>
+    </div>
   );
 }
 
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 090987b..56d8c62 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -49,8 +49,8 @@ function RsvpForm() {
         <Grid item xs={12}>
           <p>
             Please RSVP for the wedding by March 10, 2025. The ceremony will
-            commence at 3 pm on April 26 in ... The reception will follow at 5
-            pm in A Venue on the Ridge.
+            commence at 3 pm on April 26 in Divine Shepherd. The reception will
+            follow at 5 pm in A Venue on the Ridge.
           </p>
         </Grid>
         <Grid item xs={12}>
diff --git a/src/components/active.css b/src/components/active.css
index 60feeea..b3841d1 100644
--- a/src/components/active.css
+++ b/src/components/active.css
@@ -1,6 +1,7 @@
 .active {
   background-color: #1976d2;
 }
+
 .inactive {
   background-color: #c4c4c4;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3