update styling

rshewitt · Apr 22, 2024 · 68fe977 · 68fe977
1 parent 2c33fa3
commit 68fe977
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git a/src/app/components/Home.tsx b/src/app/components/Home.tsx
@@ -17,7 +17,10 @@ const Home = () => {
             />
             <div className="w-full absolute top-0 left-0 text-center mt-10">
                 <div className="mb-1">
-                    <h4 className="text-center font-squiggly font-head text-3xl-wel sm:pt-2 text-white">
+                    <h4
+                        id="home_intro_us"
+                        className="text-center font-squiggly font-head text-3xl-wel sm:pt-2 text-white"
+                    >
                         Brittany & Reid
                     </h4>
                     <div className="text-center font-normal text-xl-wel">

diff --git a/src/app/components/LocationMap.tsx b/src/app/components/LocationMap.tsx
@@ -15,8 +15,8 @@ const LocationMap = () => {
                 </div>
             </div>
 
-            <div className="md:w-1/2 w-full px-4 mb-6 md:mb-0 pt-10">
-                <div className="top-8 text-center md:text-left pt-10">
+            <div className="md:w-1/2 w-full px-4 mb-6 md:mb-0">
+                <div className="top-8 text-center md:text-left">
                     <h3 className="text-3xl-wel lg:text-5xl-wel font-squiggly mb-3 text-gray-700">
                         Wedding Location
                     </h3>

diff --git a/src/app/components/Lodging.tsx b/src/app/components/Lodging.tsx
@@ -2,10 +2,10 @@ const Logging = () => {
     return (
         <div id="lodging_div" className="max-w-3xl mx-auto text-center">
             <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
-                <h4 className="mb-1">Lodging</h4>
+                <h4>Lodging</h4>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-10">
                         More information at a later date...

diff --git a/src/app/components/RegistryModal.tsx b/src/app/components/RegistryModal.tsx
@@ -9,7 +9,7 @@ const RegistryModal = () => {
         setOpen(!open);
     };
     return (
-        <div className="fixed bottom-0 right-0 mr-3 mb-3">
+        <div id="registry_button" className="fixed bottom-0 right-0 mr-3 mb-3">
             <button
                 onClick={handleClick}
                 className="px-4 py-4 transition-all text-lg font-normal w-full rounded-lg bg-[#354834] outline-contrast-3 text-white outline-4 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
@@ -39,6 +39,7 @@ const RegistryModal = () => {
                 </div>
                 <div className="text-center py-4">
                     <a
+                        id="registry2_button"
                         className="mb-3 px-4 py-4 text-white text-lg font-normal rounded-lg bg-[#354834]"
                         href="https://www.zola.com/registry/brittanyandreid2025"
                         target="_blank"

diff --git a/src/app/components/ThingsToDo.tsx b/src/app/components/ThingsToDo.tsx
@@ -4,7 +4,7 @@ const ThingsToDo = () => {
             <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
                 <h4 className="mb-1">Things To Do</h4>
             </div>
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4">
                         <a
@@ -26,7 +26,7 @@ const ThingsToDo = () => {
                 </div>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4 pt-10">
                         <a
@@ -47,7 +47,7 @@ const ThingsToDo = () => {
                 </div>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4 pt-10">
                         <a
@@ -67,7 +67,7 @@ const ThingsToDo = () => {
                 </div>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4 pt-10">
                         <a
@@ -86,7 +86,7 @@ const ThingsToDo = () => {
                 </div>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4 pt-10">
                         <a
@@ -107,7 +107,7 @@ const ThingsToDo = () => {
                 </div>
             </div>
 
-            <div className="w-full md:w-1/2 px-4">
+            <div className="w-full text-center px-4">
                 <div className="flex flex-col items-center sm:px-8 lg:p-20 text-center">
                     <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold pb-4 pt-10">
                         <a
@@ -120,7 +120,7 @@ const ThingsToDo = () => {
                     </div>
                     <p className="text-gray-500 font-normal leading-6">
                         Whether you want to experience rich history, or a white
-                        alligator at the Audubonon Zoo, this list is for you!
+                        alligator at the Audubon Zoo, this list is for you!
                     </p>
                 </div>
             </div>

diff --git a/src/app/components/WelcomeModal.tsx b/src/app/components/WelcomeModal.tsx
@@ -19,7 +19,6 @@ export default function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
                         src={welcomeImage}
                         alt="home_img"
                         fill
-                        // objectFit="cover"
                         priority
                         style={{ objectFit: "cover" }}
                     />
@@ -29,6 +28,7 @@ export default function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
                         </h4>
                         <button
                             type="button"
+                            id="welcome_button"
                             className="px-5 transition-all font-normal py-3 font-sans font-medium rounded-md outline outline-white outline-1 outline-contrast-3 text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
                             onClick={onClose}
                         >