Merge pull request #78 from wpengine/RossoMaguire/TITAN-363

[TITAN-363] - UI Adjustments
wpengine · Jun 1, 2023 · 0cbdc5b · 0cbdc5b
2 parents d6adbb4 + 80e7b94
commit 0cbdc5b
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 6 deletions.
diff --git a/components/CtaButton/CtaButton.module.scss b/components/CtaButton/CtaButton.module.scss
@@ -5,12 +5,14 @@
     margin-top: 1em;
     background-color: var(--wpe--color--green);
     text-decoration: none;
-    font-weight: 500;
+    font-size: 1em;
     padding: 1rem;
+    min-width: 115px;
     display: inline-block;
     color: var(--wpe--color--white);
     transition: all 0.5s;
     cursor: pointer;
+    border: none;
     &:hover {
       background-color: var(--wpe--color--green);
     }

diff --git a/components/EntryHeader/EntryHeader.module.scss b/components/EntryHeader/EntryHeader.module.scss
@@ -5,10 +5,6 @@
   position: relative;
   overflow: hidden;
   margin-bottom: 2rem;
-
-  @media (min-width: $breakpoint-small) {
-    margin-bottom: 5rem;
-  }
 }
 
 .has-image {

diff --git a/components/Main/Main.module.scss b/components/Main/Main.module.scss
@@ -1,4 +1,5 @@
 .component {
   color: var(--wpe--main--color);
   background-color: var(--wpe--main--background-color);
+  min-height: 100vh;
 }
diff --git a/components/ProductDetails/ProductMeta.module.scss b/components/ProductDetails/ProductMeta.module.scss
@@ -1,4 +1,6 @@
 .productMeta {
+  @import 'styles/breakpoints';
+
   input.quantity {
     width: 5em;
     padding: 0.25em;
@@ -9,4 +11,8 @@
       cursor: not-allowed;
     }
   }
+
+  @media (max-width: $breakpoint-extra-small) {
+    margin-bottom: 4rem;
+  }
 }
diff --git a/components/ProductDetails/ProductVariantOptions.js b/components/ProductDetails/ProductVariantOptions.js
@@ -1,5 +1,6 @@
 import styles from './ProductVariantOptions.module.scss';
 import classNames from 'classnames';
+import VARIANT_MAP from '../../constants/variant-map';
 
 const cx = classNames.bind(styles);
 
@@ -40,7 +41,7 @@ const ProductVariantOptions = ({ selected, options, handleOptionChange }) => {
                   }
                 )}
                 style={{
-                  backgroundColor: option,
+                  backgroundColor: VARIANT_MAP[option],
                 }}
               />
             </label>

diff --git a/constants/variant-map.js b/constants/variant-map.js
@@ -0,0 +1,8 @@
+const VARIANT_MAP = {
+  blue: 'blue',
+  purple: 'purple',
+  charcoal: 'black',
+  red: 'red',
+};
+
+export default VARIANT_MAP;