refactor: update base styles with css grid and gaps and remove defaul…

…t margin to make room for custom fields (#187)

Co-authored-by: Jon Waldstein <[email protected]>

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_sections.scss

@@ -1,5 +1,5 @@
 .givewp-layouts-section {
-    padding-block: clamp(1.75rem, -0.916667rem + 8.33333vw, 3.375rem);
+    padding-block: clamp(1.75rem, -0.916667rem + 8.33333vw, 2.375rem);
     padding-inline: clamp(1rem, -4.53846rem + 17.3077vw, 4.375rem);
     margin-bottom: 0;
 

src/NextGen/DonationForm/resources/app/form/MultiStepForm/components/NextButton.tsx

@@ -25,6 +25,7 @@ export default function NextButton() {
         !isLastStep && (
             <div>
                 <button
+                    className="givewp-donation-form__steps-button-next"
                     type="button"
                     disabled={isValidating}
                     aria-busy={isValidating}

src/NextGen/DonationForm/resources/styles/_base-overrides.scss

@@ -31,6 +31,10 @@ input[aria-invalid="false"] {
   }
 }
 
+input, select, textarea {
+  margin-bottom: 0;
+}
+
 h1, h2, h3, h4, h5, h6 {
   --typography-spacing-vertical: 1rem;
 }

src/NextGen/DonationForm/resources/styles/base.scss

@@ -16,6 +16,7 @@
   @import "elements/header";
   @import "elements/form";
   @import "elements/sections";
+  @import "elements/groups";
   @import "elements/multi-step-form";
 }
 

src/NextGen/DonationForm/resources/styles/elements/_form.scss

@@ -3,5 +3,7 @@
 
   form {
     margin: 0;
+    display: grid;
+    gap: 1rem;
   }
 }

src/NextGen/DonationForm/resources/styles/elements/_groups.scss

@@ -0,0 +1,4 @@
+.givewp-groups {
+  display: grid;
+  gap: 1rem;
+}

src/NextGen/DonationForm/resources/styles/elements/_sections.scss

@@ -8,4 +8,9 @@
   button:focus {
     box-shadow: none;
   }
+}
+
+.givewp-section-nodes {
+  display: grid;
+  gap: 1rem;
 }