Add description field

src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css

@@ -0,0 +1,32 @@
+.container {
+  padding-bottom: 30px;
+  width: 100%;
+  border-bottom: 1px solid color-mod(var(--temp-grey-blue-7) alpha(15%));
+}
+
+.title {
+  margin-bottom: 16px;
+  font-size: var(--size-medium-l);
+  font-weight: var(--weight-bold);
+  line-height: 24px;
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.descriptionContainer textarea {
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--dark);
+  letter-spacing: 0.1px;
+}
+
+.descriptionContainer textarea::placeholder {
+  font-size: var(--size-normal);
+  font-style: normal;
+  color: var(--temp-grey-blue-7);
+  letter-spacing: 0.1px;
+}

src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css.d.ts

@@ -0,0 +1,3 @@
+export const container: string;
+export const title: string;
+export const descriptionContainer: string;

src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.tsx

@@ -0,0 +1,47 @@
+import { useField } from 'formik';
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import { TextareaAutoresize } from '~core/Fields';
+
+import styles from './DescriptionForm.css';
+
+const MSG = defineMessages({
+  title: {
+    id: 'dashboard.Incorporation.DescriptionForm.title',
+    defaultMessage: 'Incorporate this DAO',
+  },
+  descriptionPlaceholder: {
+    id: `dashboard.Incorporation.DescriptionForm.descriptionPlaceholder`,
+    defaultMessage: 'Add description of why you are incorporating...',
+  },
+});
+
+const displayName = 'dashboard.Incorporation.DescriptionForm';
+
+const DescriptionForm = () => {
+  const [, { value: description }] = useField('description');
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>
+        <FormattedMessage {...MSG.title} />
+      </h1>
+      <div className={styles.descriptionContainer}>
+        <TextareaAutoresize
+          name="description"
+          placeholder={MSG.descriptionPlaceholder}
+          label=""
+          minRows={1}
+          maxRows={100}
+          value={description}
+          elementOnly
+        />
+      </div>
+    </div>
+  );
+};
+
+DescriptionForm.displayName = displayName;
+
+export default DescriptionForm;

src/modules/dashboard/components/Incorporation/DescriptionForm/index.ts

@@ -0,0 +1 @@
+export { default } from './DescriptionForm';

src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx

@@ -113,11 +113,7 @@ const IncorporationForm = ({ colony, sidebarRef }: Props) => (
     </FormSection>
     <FormSection appearance={{ border: 'bottom' }}>
       <div className={styles.textareaWrapper}>
-        <Textarea
-          name="description"
-          label={MSG.descriptionLabel}
-          maxLength={90}
-        />
+        <Textarea name="purpose" label={MSG.descriptionLabel} maxLength={90} />
       </div>
     </FormSection>
     <Protectors colony={colony} sidebarRef={sidebarRef} />

src/modules/pages/components/IncorporationPage/IncorporationPage.css

@@ -1,20 +1,35 @@
 @value sidebarWidth: 449px;
 @value navBarHeight: 70px;
 
-.sidebar {
+.main {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.mainContainer {
+  padding-bottom: 50px;
   height: 600px;
+  min-height: 100%;
   min-height: calc(100vh - navBarHeight);
-  width: sidebarWidth;
+  width: calc(100% - sidebarWidth);
   overflow-y: auto;
-  background-color: var(--grey-blue-3);
+  background-color: var(--colony-white);
 }
 
-.wrapper {
+.mainContent {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
+  justify-content: space-between;
+  padding: 54px 85px 70px 40px;
+  max-width: 500px;
+}
+
+.sidebar {
+  height: 600px;
+  min-height: calc(100vh - navBarHeight);
+  width: sidebarWidth;
+  overflow-y: auto;
+  background-color: var(--grey-blue-3);
 }
 
 .spinnerContainer {

src/modules/pages/components/IncorporationPage/IncorporationPage.css.d.ts

@@ -1,5 +1,7 @@
 export const sidebarWidth: string;
 export const navBarHeight: string;
+export const main: string;
+export const mainContainer: string;
+export const mainContent: string;
 export const sidebar: string;
-export const wrapper: string;
 export const spinnerContainer: string;

src/modules/pages/components/IncorporationPage/IncorporationPage.tsx

@@ -6,6 +6,7 @@ import { useColonyFromNameQuery } from '~data/generated';
 import { getMainClasses } from '~utils/css';
 import { SpinnerLoader } from '~core/Preloaders';
 import IncorporationForm from '~dashboard/Incorporation/IncorporationForm';
+import DescriptionForm from '~dashboard/Incorporation/DescriptionForm';
 
 import { initialValues } from './constants';
 import styles from './IncorporationPage.css';
@@ -44,7 +45,11 @@ const IncorporationPage = () => {
               )
             )}
           </aside>
-          <div />
+          <div className={styles.mainContainer}>
+            <main className={styles.mainContent}>
+              <DescriptionForm />
+            </main>
+          </div>
         </div>
       )}
     </Formik>

src/modules/pages/components/IncorporationPage/constants.ts

@@ -13,4 +13,5 @@ export const initialValues = {
   ],
   mainContact: undefined,
   signOption: SignOption.Individual,
+  description: undefined,
 };

src/modules/pages/components/IncorporationPage/types.ts

@@ -16,4 +16,5 @@ export interface ValuesType {
   protectors?: Protector[];
   mainContact?: AnyUser;
   signOption: SignOption;
+  description: string;
 }