Add logs section

src/i18n/en-system-messages.ts

@@ -32,6 +32,16 @@ const systemMessagesMessageDescriptors = {
       ${SystemMessagesName.ExpenditureReleaseFunds} {{user} {reputation} released the funds. Funds may be claimed after the security delay.}
       ${SystemMessagesName.ExpenditureFundsClaimed} {{user} {reputation} claimed their funds of {funds}.}
       ${SystemMessagesName.ExpenditureAllFundsClaimed} {All funds have been claimed.}
+
+      ${SystemMessagesName.IncorporationCreated} {{user} {reputation} started an incorporation application. {user} is the owner and has control to make changes. Everyone else will need to create a motion to make changes.}
+      ${SystemMessagesName.IncorporationStaked} {{user} {reputation} has staked {amount} to back the incorporation. Nominated protectors now need to verify their identity to be included in the application.}
+      ${SystemMessagesName.IncorporationOwnerOrForceEdit} {{user} {reputation} made changes to the {changes} of the incorporation application.}
+      ${SystemMessagesName.IncorporationMotionModified} {{user} {reputation} created a motion to change the {changes} of the incorporation application.}
+      ${SystemMessagesName.IncorporationMotionPayment} {{user} {reputation} created a motion to fund and pay the incorporation cost.}
+      ${SystemMessagesName.IncorporationFailedMotionPayment} {Motion has failed, you are able to review details and resubmit.}
+      ${SystemMessagesName.IncorporationPassedMotionPayment} {Payment for incorporation and the application documents has been sent to the registrant agent. They will update here with progress.}
+      ${SystemMessagesName.IncorporationWaitingOnIndemnityForms} {Application has now been processed, all Protectors are now required to sign and return the required Indemnity Form to the registrant agent.}
+      ${SystemMessagesName.IncorporationCompleted} {Application is complete, the organization has been successfully incorporated.}
       other {Generic system message}
     }`,
   /*

src/modules/dashboard/components/ActionsPageFeed/ActionsPageEvent/ActionsPageEvent.tsx

@@ -32,6 +32,8 @@ import {
 import { useDataFetcher } from '~utils/hooks';
 import { getFormattedTokenValue } from '~utils/tokens';
 import { MotionVote } from '~utils/colonyMotions';
+import { isSystemMessage } from '~dashboard/ExpenditurePage/LogsSection/LogsSection';
+import { isSystemMessageIncorporation } from '~dashboard/Incorporation/LogsSection/LogsSection';
 
 import { ipfsDataFetcher } from '../../../../core/fetchers';
 
@@ -41,7 +43,6 @@ import { EVENT_ROLES_MAP } from '../../ActionsPage/staticMaps';
 import motionSpecificStyles from '../../ActionsPage/ActionsComponents/DefaultMotion.css';
 
 import styles from './ActionsPageEvent.css';
-import { isSystemMessage } from '~dashboard/ExpenditurePage/LogsSection/LogsSection';
 
 const displayName = 'dashboard.ActionsPageFeed.ActionsPageEvent';
 
@@ -291,7 +292,7 @@ const ActionsPageEvent = ({
   }, [domainMetadataHistory, actionData, metadataJSON, eventName]);
 
   const getEventTitleMessageDescriptor = useMemo(() => {
-    if (isSystemMessage(eventName)) {
+    if (isSystemMessage(eventName) || isSystemMessageIncorporation(eventName)) {
       return 'systemMessage.title';
     }
 

src/modules/dashboard/components/ActionsPageFeed/types.ts

@@ -69,6 +69,16 @@ export enum SystemMessagesName {
   ExpenditureReleaseFunds = 'ExpenditureReleaseFunds',
   ExpenditureFundsClaimed = 'ExpenditureFundsClaimed',
   ExpenditureAllFundsClaimed = 'ExpenditureAllFundsClaimed',
+
+  IncorporationCreated = 'IncorporationCreated',
+  IncorporationStaked = 'IncorporationStaked',
+  IncorporationOwnerOrForceEdit = 'IncorporationOwnerOrForceEdit',
+  IncorporationMotionModified = 'IncorporationMotionModified',
+  IncorporationMotionPayment = 'IncorporationMotionPayment',
+  IncorporationFailedMotionPayment = 'IncorporationFailedMotionPayment',
+  IncorporationPassedMotionPayment = 'IncorporationPassedMotionPayment',
+  IncorporationWaitingOnIndemnityForms = 'IncorporationWaitingOnIndemnityForms',
+  IncorporationCompleted = 'IncorporationCompleted',
 }
 
 export interface SystemMessage {

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

@@ -0,0 +1,94 @@
+@value inputBackground: rgb(249, 250, 250);
+@value shadow: inset 0px 2px 4px color-mod(black alpha(7%));
+
+.container {
+  padding-right: 37px;
+  padding-bottom: 50px;
+  width: 100%;
+}
+
+/* selector is for nested ActionPageEvent style */
+.container ul > div > div > div:last-of-type > div {
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+/* selector is for nested Comment style */
+.container ul > div > div > div:last-of-type {
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.commentInput {
+  margin-top: 29px;
+}
+
+.commentInput textarea::placeholder {
+  font-size: var(--size-smallish);
+  font-style: normal;
+  color: var(--text-disabled);
+}
+
+.logContainer {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 18px;
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: var(--temp-grey-blue-7);
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background-color: var(--text-disabled);
+}
+
+.dotContainer {
+  margin: 0 9px 0 22px;
+  width: 26px;
+}
+
+.transactionMeta {
+  width: 100%;
+}
+
+.reputationWrapper {
+  display: inline-block;
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+}
+
+.reputationWrapper > div {
+  padding-right: 0;
+}
+
+.reputationStarWrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding-right: 4px;
+  padding-left: 10px;
+  position: relative;
+}
+
+.reputationWrapper i {
+  right: unset;
+  left: -16px;
+}
+
+.titleDecoration {
+  font-weight: var(--weight-bold);
+  color: var(--pink);
+}
+
+.divider {
+  margin: 0 0 8px 0;
+  background-color: var(--temp-grey-blue-7);
+  opacity: 0.15;
+}

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

@@ -0,0 +1,12 @@
+export const inputBackground: string;
+export const shadow: string;
+export const container: string;
+export const commentInput: string;
+export const logContainer: string;
+export const dot: string;
+export const dotContainer: string;
+export const transactionMeta: string;
+export const reputationWrapper: string;
+export const reputationStarWrapper: string;
+export const titleDecoration: string;
+export const divider: string;