@rileybathurst/paddle 1.3.7 → 1.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.3.7",
+  "version": "1.3.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/paddle-purchase.tsx

@@ -22,6 +22,8 @@ interface BadgeTypes {
   demo: boolean;
   discount?: number;
 }
+
+// TODO: use the way I do specs for this
 // TODO: deal with multiple
 const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
   if (discount) {
@@ -67,8 +69,8 @@ type purchaseTypes = {
 export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
 
   return (
-    <article key={id} className="card">
-      <div className="card-collage">
+    <article key={id} className="purchase">
+      <div className="purchase-collage">
 
         <PaddleTextureBackgrounds
           baseOne={baseOne}
@@ -97,13 +99,13 @@ export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflat
           discount={discount}
         />
       </div>
-      <h4 className="card__title">
+      <h4 className="purchase__title">
         <Link to={`/retail/${sportSlug}/${brandSlug}/${slug}`}>{title}</Link>
       </h4>
       <hr />
       <p>{excerpt}</p>
       <hr />
-      <div className="card__details">
+      <div className="purchase__details">
         <h4>
           <PaddleInchesRemainder inches={length} />
           long by {width}" wide

package/src/styles/buttons.css

@@ -56,9 +56,9 @@ button:active {
 }
 
 .book-now {
-  margin-block-start: var(
-    --kosciuszko
-  ); /* why is this different than a regular button */
+  text-transform: uppercase;
+  /* ? why is this different than a regular button */
+  margin-block-start: var(--kosciuszko);
   background-color: var(--neutral-800);
   border-color: var(--neutral-700);
   color: var(--neutral-300);

package/src/styles/cards.css

@@ -236,8 +236,8 @@
 }
 
 .ticket {
-  /* display: flex; */
   width: 100%;
+  height: 100%;
   background-color: var(--neutral-200);
   border: 1px solid var(--neutral-300);
 

package/src/styles/layout.css

@@ -36,15 +36,15 @@ footer,
   flex-basis: var(--stork);
 }
 
-.condor,
-header,
 main,
+.condor,
 .location,
 .react-aria-Breadcrumbs.condor {
   max-width: min(var(--condor), calc(100vw - var(--denali)));
   flex-basis: var(--condor);
 }
 
+header,
 .pelican,
 .react-aria-Breadcrumbs.pelican {
   max-width: min(var(--pelican), calc(100vw - var(--denali)));