diff --git a/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css b/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css
new file mode 100644
index 0000000000..654bd12dea
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css.d.ts b/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.css.d.ts
new file mode 100644
index 0000000000..562e7ce8b6
--- /dev/null
+++ b/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;
diff --git a/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.tsx b/src/modules/dashboard/components/Incorporation/DescriptionForm/DescriptionForm.tsx
new file mode 100644
index 0000000000..8407face02
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+DescriptionForm.displayName = displayName;
+
+export default DescriptionForm;
diff --git a/src/modules/dashboard/components/Incorporation/DescriptionForm/index.ts b/src/modules/dashboard/components/Incorporation/DescriptionForm/index.ts
new file mode 100644
index 0000000000..4a4cfa8ef9
--- /dev/null
+++ b/src/modules/dashboard/components/Incorporation/DescriptionForm/index.ts
@@ -0,0 +1 @@
+export { default } from './DescriptionForm';
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx
index 27be60b008..7c9fc7b886 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/IncorporationForm.tsx
@@ -113,11 +113,7 @@ const IncorporationForm = ({ colony, sidebarRef }: Props) => (
-
+
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css b/src/modules/pages/components/IncorporationPage/IncorporationPage.css
index 33ebe0db19..c75264052d 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css
+++ b/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 {
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css.d.ts b/src/modules/pages/components/IncorporationPage/IncorporationPage.css.d.ts
index e65c85a2a0..2165320234 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css.d.ts
+++ b/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;
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index f1e03cfa52..5bcb2092d4 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/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 = () => {
)
)}
-
+
+
+
+
+
)}
diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts
index fc2cff8e7e..966b1de563 100644
--- a/src/modules/pages/components/IncorporationPage/constants.ts
+++ b/src/modules/pages/components/IncorporationPage/constants.ts
@@ -13,4 +13,5 @@ export const initialValues = {
],
mainContact: undefined,
signOption: SignOption.Individual,
+ description: undefined,
};
diff --git a/src/modules/pages/components/IncorporationPage/types.ts b/src/modules/pages/components/IncorporationPage/types.ts
index 8bdb419367..7863ac2271 100644
--- a/src/modules/pages/components/IncorporationPage/types.ts
+++ b/src/modules/pages/components/IncorporationPage/types.ts
@@ -16,4 +16,5 @@ export interface ValuesType {
protectors?: Protector[];
mainContact?: AnyUser;
signOption: SignOption;
+ description: string;
}