added styles

Rouncer27 · Jun 12, 2023 · 976dbd4 · 976dbd4
1 parent 1772fcd
commit 976dbd4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/components/shared/formParts/InputNumber.js b/src/components/shared/formParts/InputNumber.js
@@ -13,9 +13,11 @@ const InputNumber = ({
   required,
   handleNumberUp,
   handleNumberDown,
+  color,
 }) => {
+  console.log("color", color)
   return (
-    <InputFieldStyled size={size} position={position}>
+    <InputFieldStyled size={size} position={position} color={color}>
       <label htmlFor={nameId}>
         <button
           type="button"
@@ -51,6 +53,7 @@ const InputNumber = ({
         >
           &#8722;
         </button>
+        <span className="color-mark" />
         <span className="main-label">
           {title} <span className="required">&#42;</span>
         </span>
@@ -99,6 +102,26 @@ const InputFieldStyled = styled.div`
     width: 100%;
     line-height: 1.5;
 
+    .color-mark {
+      display: inline-block;
+      width: 2.5rem;
+      height: 2.5rem;
+      margin-left: 2.5rem;
+      border-radius: 50%;
+      background-color: ${props =>
+        props.color === "yellow"
+          ? colors.colorAccent
+          : props.color === "orange"
+          ? colors.colorTertiary
+          : props.color === "blue"
+          ? colors.colorShad
+          : props.color === "green"
+          ? colors.colorShad2
+          : props.color === "red"
+          ? colors.colorPrimary
+          : colors.colorPrimary};
+    }
+
     .main-label {
       padding-left: 2.5rem;
     }

diff --git a/src/components/templates/contact/ContactForm.js b/src/components/templates/contact/ContactForm.js
@@ -237,6 +237,7 @@ const ContactForm = ({ data }) => {
                     type="number"
                     nameId={flavSlug}
                     required={false}
+                    color={flav.colour}
                   />
                 )
               })}
@@ -286,6 +287,8 @@ const StyledDiv = styled.div`
 `
 
 const SubmitButton = styled.div`
+  margin-top: 5rem;
+
   p {
     ${B1White};
   }