fix: Errors on Submit pageP

kyranjamie · kyranjamie · commit d833ceb5002f · 2019-10-16T15:04:13.000+02:00
diff --git a/components/maker/styled.js b/components/maker/styled.js
@@ -54,6 +54,14 @@ export const MakerContainer = ({ children }) => (
   </Flex>
 )
 
+export const MakerTitle = styled(Type.h2)`
+  display: block;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 28px;
+  color: #0F1117;
+  margin-bottom: 16px;
+`
 
 export const MakerCardHeader = styled(Type.h2)`
   font-weight: 500;
diff --git a/pages/submit.js b/pages/submit.js
@@ -4,10 +4,10 @@ import { connect } from 'react-redux'
 import Head from '@containers/head'
 import Link from 'next/link'
 import { bindActionCreators } from 'redux'
+import { MakerTitle, MakerCardHeader, MakerCardText, MakerButton, MakerField } from '@components/maker/styled'
 import { Page } from '@components/page'
 import { Type, Field, Flex, Box, Button } from 'blockstack-ui'
 import { selectAppConstants, selectApiServer } from '@stores/apps/selectors'
-import { string, boolean } from 'yup'
 import { FormSection, ErrorMessage, Bar, sections as getSections } from '@containers/submit'
 import debounce from 'lodash.debounce'
 import UserStore from '@stores/user'
@@ -92,13 +92,8 @@ const Submit = ({ appConstants, setState, state, errors, submit, user, loading,
 
   return (
     <Box mx="auto" maxWidth={700}>
-      <Type is="h2">Add an app to App.co</Type>
-      <Type is="p" lineHeight={1.5}>
-        Add any user-ready decentralized app: It could be an app you built, or an app you discovered. We manually
-        verify all information before publishing to App.co. Contact details are not displayed and we promise to keep
-        your information private and safe.
-      </Type>
-      <Bar mb={0} />
+      <MakerTitle pt="20px">Submit your app</MakerTitle>
+      <MakerCardHeader>Personal details</MakerCardHeader>
       {user && user.user && (
         <Flex pt={6}>
           <Box mb={4} width={1}>
@@ -121,30 +116,27 @@ const Submit = ({ appConstants, setState, state, errors, submit, user, loading,
       )}
       <Flex flexWrap="wrap" pt={6} flexDirection="column">
         <form noValidate onSubmit={handleValidation}>
-          {sections.map((section) => (
-            <>
-              <FormSection
-                errors={errors}
-                handleChange={outerHandleChange}
-                setState={setState}
-                key={`section-${section.fields[0].name}`}
-                message={section.message}
-                fields={section.fields}
-                state={state}
-              />
-              <Bar />
-            </>
+          {sections.map(section => (
+            <FormSection
+              errors={errors}
+              handleChange={outerHandleChange}
+              setState={setState}
+              key={`section-${section.fields[0].name}`}
+              message={section.message}
+              fields={section.fields}
+              state={state}
+            />
           ))}
           {errors ? <ErrorMessage /> : null}
           {!(user && user.jwt) ? (
             <>
               <Field.Message maxWidth={400} lineHeight={1.5} mb={3}>
                 To submit your app, first login with Blockstack. You&apos;ll be able to use your Blockstack ID to manage your app&apos;s listing.
               </Field.Message>
-              <Button onClick={blockstackAuth}>{loading ? 'Loading...' : 'Login with Blockstack'}</Button>
+              <MakerButton onClick={blockstackAuth}>{loading ? 'Loading...' : 'Login with Blockstack'}</MakerButton>
             </>
           ) : (
-            <Button>{loading ? 'Loading...' : 'Submit App'}</Button>
+            <MakerButton>{loading ? 'Loading...' : 'Submit App'}</MakerButton>
           )}
         </form>
       </Flex>
@@ -258,12 +250,13 @@ class SubmitDapp extends React.Component {
   }
 
   render() {
+    // return <div>lkjsdflkjsdlfkjs</div>
     const { appConstants } = this.props
 
     return (
-      <Page>
+      <Page innerPadding={0} pt={0}>
         <Head title="Submit your dapp" description="Submit your dapp to be listed on the Universal Dapp Store." />
-        <Page.Section wrap p={['32px', '64px']} mb={3} richText bg="white">
+        <Page.Section p={['32px', '64px']} mb={3} bg="white">
           {this.state.success ? (
             <>
               <Box width="100%" textAlign="center">
