React page finished

Author: Kameshwaran

src/components/contactForm.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Flex, Box, InputText, InputButton } from "bricks"
+import { Flex, Box, InputText, OutlinedButton } from "bricks"
 
 const ContactForm = ({ referrer }) => {
   return (
@@ -19,6 +19,9 @@ const ContactForm = ({ referrer }) => {
             required
             as="textarea"
             name="msg"
+            backgroundColor="black.4"
+            borderWidth={0}
+            borderRadius={3}
             placeholder="💬 Tell us about your idea"
           />
         </Box>
@@ -28,11 +31,16 @@ const ContactForm = ({ referrer }) => {
             name="email"
             type="email"
             required
+            backgroundColor="black.4"
+            borderWidth={0}
+            borderRadius={3}
             placeholder="@ Email address"
           />
         </Box>
         <Box width={[1, 1 / 3]} mt={1}>
-          <InputButton />
+          <OutlinedButton borderRadius={3}>
+            Submit
+          </OutlinedButton>
         </Box>
       </Flex>
     </form>

src/components/contactUsButton.js

@@ -5,6 +5,7 @@ import { InputButton } from "bricks"
 
 const ContactUsButton = ({ text }) => (
   <InputButton
+    borderRadius={3}
     value={text}
     onClick={() => navigate("/contact")}  
   />

src/templates/layout.js

@@ -90,7 +90,7 @@ const Footer = ({ images }) => (
             <input type="hidden" name="u" value="42069ce8928af0d4afc3fd428" />
             <input type="hidden" name="id" value="a540ccf305" />
             <InputText name="MERGE0" type="email" placeholder="Email address" />
-            <InputButton value="Subscribe" name="subscribe" />
+            <InputButton value="Subscribe" name="subscribe" px={2} />
           </form>
         </Box>
       </Box>

src/theme.js

@@ -18,6 +18,7 @@ const fonts = {
   bold: 'TiemposBold',
   italic: 'TiemposItalic'
 }
+const radii = [0, 1, 2, 4, 8, 16];
 const lineHeights = [
   0.5 * baseLineHeight + 'rem',
   1 * baseLineHeight + 'rem', 
@@ -30,7 +31,7 @@ const space = [0,...lineHeights];
 
 const colors = {
   tint: '#F8F4F2',
-  black: ['#0F0F0F','#333333', '#666666', '#999999'],
+  black: ['#0F0F0F','#333333', '#666666', '#999999', '#E0E0E0'],
 }
 colors.primary = colors.black[1]
 colors.secondary = colors.tint
@@ -125,6 +126,7 @@ const theme = {
   breakpoints,
   space,
   fontSizes,
+  radii,
   lineHeights,
   maxContainerWidth,
   fonts,