Merge pull request #172 from WebDevStudios/fix/spacing-issues

Greg Rickaby · web-flow · commit ae6062e2f049 · 2021-02-02T15:27:44.000-06:00
Fix/spacing issues
diff --git a/components/atoms/RichText/RichText.module.css b/components/atoms/RichText/RichText.module.css
@@ -10,7 +10,7 @@
   &.ol,
   & p,
   &.p {
-    @apply mb-20;
+    @apply mb-8;
   }
 
   & ul,
@@ -62,26 +62,26 @@
   /* Heading Styles */
   & h1,
   &.h1 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h2,
   &.h2 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h3,
   &.h3 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h4,
   &.h4 {
-    @apply mb-12;
+    @apply mb-10;
   }
 
   & h5,
   &.h5 {
-    @apply mb-12;
+    @apply mb-10;
   }
 }
diff --git a/components/molecules/ButtonGroup/ButtonGroup.module.css b/components/molecules/ButtonGroup/ButtonGroup.module.css
@@ -1,5 +1,5 @@
 .buttonGroup {
-  @apply mb-40;
+  @apply mb-12;
 
   &.horizontal {
     @apply flex;
diff --git a/components/molecules/Navigation/Navigation.module.css b/components/molecules/Navigation/Navigation.module.css
@@ -1,6 +1,4 @@
 .navigation {
-  @apply pt-8;
-
   & > ul {
     @apply flex;
 
diff --git a/components/organisms/Footer/Footer.module.css b/components/organisms/Footer/Footer.module.css
@@ -1,5 +1,5 @@
 .footer {
-  @apply py-40 border-t;
+  @apply py-8 border-t;
 
   & .footerMenu {
     & > ul {
diff --git a/components/organisms/Header/Header.js b/components/organisms/Header/Header.js
@@ -18,16 +18,14 @@ export default function Header() {
   const {menus} = useContext(MenuContext)
   return (
     <header className={styles.header}>
-      <div className="container flex items-center justify-end">
-        <div className="relative pb-16">
-          <AlgoliaSearch
-            useHistory={true}
-            usePlaceholder={true}
-            className="ml-auto"
-          />
-        </div>
+      <div className={styles.search}>
+        <AlgoliaSearch
+          useHistory={true}
+          usePlaceholder={true}
+          className="ml-auto"
+        />
       </div>
-      <div className="container px-4 lg:px-0 flex items-center justify-between">
+      <div className={styles.navigation}>
         <Logo />
         <Navigation
           menu={menus?.primary_menu}
diff --git a/components/organisms/Header/Header.module.css b/components/organisms/Header/Header.module.css
@@ -1,5 +1,11 @@
 .header {
-  @apply sticky top-0 py-20 transition-all z-50 border-b shadow;
+  @apply sticky top-0 py-4 transition-all z-50 border-b shadow bg-gray-100;
 
-  background-color: #f7f7f7;
+  & .search {
+    @apply container mb-8;
+  }
+
+  & .navigation {
+    @apply container px-4 lg:px-0 flex items-center justify-between;
+  }
 }
diff --git a/components/organisms/Hero/Hero.js b/components/organisms/Hero/Hero.js
@@ -31,7 +31,7 @@ export default function Hero({
       className={cn(styles.hero, className)}
       style={{
         // These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
-        '--image-url': `url(${backgroundImage})`,
+        '--image-url': `url(${backgroundImage.url})`,
         '--image-tint-color': `#00000020`,
         '--image-fallback-color': `#000`
       }}
@@ -56,7 +56,7 @@ export default function Hero({
 }
 
 Hero.propTypes = {
-  backgroundImage: PropTypes.string,
+  backgroundImage: PropTypes.object,
   body: PropTypes.string,
   className: PropTypes.string,
   ctaText: PropTypes.string,
diff --git a/components/organisms/Hero/Hero.module.css b/components/organisms/Hero/Hero.module.css
@@ -1,5 +1,5 @@
 .hero {
-  @apply container px-32 rounded;
+  @apply mb-12 container px-32 rounded;
 
   padding-top: 9.125rem;
   padding-bottom: 9.5rem;
@@ -10,12 +10,17 @@
   background-size: cover;
 
   & .content {
-    /* & .subtitle {
+    & .subtitle {
+      @apply text-sm opacity-80 mb-2 text-white;
     }
+
     & .title {
+      @apply font-bold text-xl mb-4 text-white;
     }
+
     & .body {
-    } */
+      @apply text-white;
+    }
 
     & .body + .button {
       @apply mt-16;
diff --git a/components/organisms/Hero/Hero.stories.mdx b/components/organisms/Hero/Hero.stories.mdx
@@ -13,7 +13,10 @@ Use this to display a large CTA, usually at the top of a page.
       subtitle="Check it out"
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
-      backgroundImage="https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60"
+      backgroundImage={{
+        url:
+          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60'
+      }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
     />
   </Story>
diff --git a/components/organisms/LzbMediaText/LzbMediaText.module.css b/components/organisms/LzbMediaText/LzbMediaText.module.css
@@ -1,9 +1,9 @@
 .lzbMediaText {
-  @apply md:grid md:grid-cols-12 md:gap-16;
+  @apply md:grid md:grid-cols-12 md:gap-16 mb-12;
 
   & .text,
   & .media {
-    @apply col-span-6 p-16 flex flex-col items-start justify-center;
+    @apply col-span-6 flex flex-col items-start justify-center;
   }
 
   & .text {
diff --git a/components/organisms/LzbMediaText/LzbMediaText.stories.mdx b/components/organisms/LzbMediaText/LzbMediaText.stories.mdx
@@ -41,25 +41,3 @@ Media will display on the right on large screens by default. Use the `mediaLeft`
     />
   </Story>
 </Canvas>
-
-## Children
-
-You can display children as an element using the `children` prop. If used, the `title`, `body`, and `cta` will not display.
-
-<Canvas>
-  <Story name="Children">
-    <LzbMediaText
-      children={
-        <div>
-          <p>Hi I'm a child element!</p>
-        </div>
-      }
-      image={{
-        url:
-          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
-        alt: 'Some alt text'
-      }}
-      mediaLeft
-    />
-  </Story>
-</Canvas>
diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
@@ -1,9 +1,9 @@
 .mediaText {
-  @apply md:grid md:grid-cols-12 md:gap-16;
+  @apply md:grid md:grid-cols-12 md:gap-16 mb-12;
 
   & .text,
   & .media {
-    @apply col-span-6 p-16 flex flex-col items-start justify-center;
+    @apply col-span-6 flex flex-col items-start justify-center;
   }
 
   & .text {

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`&.ol,`
`11`	`11`	`& p,`
`12`	`12`	`&.p {`
`13`		`- @apply mb-20;`
	`13`	`+ @apply mb-8;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`& ul,`
`@@ -62,26 +62,26 @@`
`62`	`62`	`/* Heading Styles */`
`63`	`63`	`& h1,`
`64`	`64`	`&.h1 {`
`65`		`- @apply mb-20;`
	`65`	`+ @apply mb-10;`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`& h2,`
`69`	`69`	`&.h2 {`
`70`		`- @apply mb-20;`
	`70`	`+ @apply mb-10;`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`& h3,`
`74`	`74`	`&.h3 {`
`75`		`- @apply mb-20;`
	`75`	`+ @apply mb-10;`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`& h4,`
`79`	`79`	`&.h4 {`
`80`		`- @apply mb-12;`
	`80`	`+ @apply mb-10;`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`& h5,`
`84`	`84`	`&.h5 {`
`85`		`- @apply mb-12;`
	`85`	`+ @apply mb-10;`
`86`	`86`	`}`
`87`	`87`	`}`