december refinements (#25)

* smaller body copy

* purple footer

* wider max w ch

* variables typo

* footer link updates

* remove utilities

* header spacing

* rm small class

* more header tweaking

* rm newsletter footer

* feature(QuickSearchForm): add component

* test(QuickSearchForm): add component test
Coverage currently 0% functions, 80% lines,
TODO: Coverage for handleSubmit function.

* doc(QuickSearchForm): add documentation

* remove quicksearch copy

* Update PdapButton.vue

* npm version patch

* chore(package): bump version -> 2.0.3

---------

Co-authored-by: Joshua Graber <joshua.d.graber@gmail.com>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pdap-design-system",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "Global styles for PDAP apps",
 	"author": "Police Data Accessibility Project, Inc.",
 	"license": "ISC",

src/components/Button/PdapButton.vue

@@ -35,7 +35,11 @@ const classes = reactive({
 	}
 
 	.pdap-button-primary {
-		@apply pdap-button bg-brand-gold text-neutral-950;
+		@apply pdap-button bg-brand-gold text-white;
+	}
+
+	.pdap-button-primary[type='submit'] {
+		@apply bg-brand-gold;
 	}
 
 	.pdap-button-primary[type='submit'] {

src/components/Footer/PdapFooter.vue

@@ -87,7 +87,7 @@ const links = inject<PdapFooterSocialLinks[]>('footerLinks', [
 		text: 'Github',
 	},
 	{
-		href: 'ttps://discord.gg/wMqex8nKZJ',
+		href: 'https://discord.gg/wMqex8nKZJ',
 		text: 'Discord',
 	},
 	{
@@ -108,7 +108,7 @@ const navLogoLinkIsPath = props.logoImageAnchorPath.startsWith('/');
 
 @layer components {
 	.pdap-footer {
-		@apply bg-neutral-300 mt-auto mx-auto px-2 pt-2 pb-0 relative text-center text-[rgba(255,251,250)] text-lg;
+		@apply bg-brand-wine mt-auto mx-auto px-2 pt-2 pb-0 relative text-center text-[rgba(255,251,250)] text-lg;
 		@apply md:py-8 md:px-2;
 	}
 

src/components/QuickSearchForm/QuickSearchForm.vue

@@ -4,10 +4,6 @@
 		component="div"
 		class="pdap-quick-search-form"
 	>
-		<p class="quick-search-description">
-			We maintain a catalog of public records about police, court, and jail
-			systems across the United States.
-		</p>
 		<Form
 			id="quick-search-form"
 			class="small"

src/styles/base.css

@@ -16,7 +16,7 @@
 
 	body {
 		@apply bg-neutral-50 font-light font-sans leading-normal text-xl text-neutral-950 m-0 min-h-full;
-		@apply lg:text-3xl;
+		@apply lg:text-2xl;
 	}
 
 	/* Images */
@@ -45,6 +45,28 @@
 		@apply mb-[.625rem] mt-[.625rem];
 	}
 
+	h1:first-child {
+		@apply mt-0;
+	}
+
+	h1.pdap-grid-item,
+	h2.pdap-grid-item,
+	h3.pdap-grid-item,
+	h4.pdap-grid-item,
+	h5.pdap-grid-item,
+	h6.pdap-grid-item {
+		@apply my-0 /* The grid adds the spacing, these end up being too much */
+	}
+
+	h1:first-child,
+	h2:first-child,
+	h3:first-child,
+	h4:first-child,
+	h5:first-child,
+	h6:first-child {
+		@apply mt-0; /* Alternatively, we could some vertical padding off containers by default. */
+	}
+
 	h1 {
 		@apply font-medium mt-12 mb-4 text-[2.625rem];
 	}
@@ -84,13 +106,7 @@
 
 	p,
 	li {
-		@apply max-w-[43ch];
-	}
-
-	.small p,
-	p.small,
-	.small li {
-		@apply text-lg;
+		@apply max-w-[45ch];
 	}
 
 	strong {

src/styles/utilities.css

@@ -6,19 +6,4 @@
 	.lock-scroll {
 		@apply overflow-hidden;
 	}
-
-	/* Text */
-	.citation {
-		@apply italic mb-0;
-	}
-
-	.shout {
-		@apply font-medium leading-tight max-w-[30ch] mt-0 text-4xl;
-		@apply md:text-6xl;
-	}
-
-	/* Layout */
-	.boxed {
-		@apply p-4 my-4 mx-0 border-2 border-solid border-brand-wine border-opacity-20;
-	}
 }

src/styles/variables.css

@@ -18,7 +18,7 @@
 		--color-neutral-600: 97 97 97;
 		--color-neutral-700: 51 51 51;
 		--color-neutral-800: 34 34 34;
-		--color-neutral-800: 26 26 26;
+		--color-neutral-900: 26 26 26;
 		--color-neutral-950: 0 0 0;
 
 		/* Brand */