Add motion dot

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

@@ -47,9 +47,14 @@ const displayName = `dashboard.Incorporation.IncorporationForm.LockedIncorporati
 export interface Props {
   formValues: ValuesType;
   activeStageId: Stages;
+  pendingMotion?: boolean;
 }
 
-const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
+const LockedIncorporationForm = ({
+  formValues,
+  activeStageId,
+  pendingMotion,
+}: Props) => {
   const { alternativeName1: altName1, alternativeName2: altName2 } = formValues;
   const alternativeNames = useMemo(
     () => [
@@ -136,7 +141,7 @@ const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
           <div className={styles.description}>{formValues.purpose}</div>
         </div>
       </FormSection>
-      <LockedProtectors formValues={formValues} />
+      <LockedProtectors formValues={formValues} pendingMotion={pendingMotion} />
     </div>
   );
 };

src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css

@@ -104,3 +104,21 @@
   animation-name: fadeIn;
   animation-duration: 500ms;
 }
+
+.dot {
+  height: 9px;
+  width: 9px;
+  border-radius: 50%;
+  background-color: var(--golden);
+}
+
+.labelDotWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* targets toolitp */
+.labelDotWrapper > div:last-of-type {
+  max-width: 220px;
+}

src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts

@@ -10,3 +10,5 @@ export const signOptionWrapper: string;
 export const signing: string;
 export const mianContactWrapper: string;
 export const fadeIn: string;
+export const dot: string;
+export const labelDotWrapper: string;

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

@@ -8,6 +8,7 @@ import UserAvatar from '~core/UserAvatar';
 import UserMention from '~core/UserMention';
 import Tag from '~core/Tag';
 import Link from '~core/Link';
+import { Tooltip } from '~core/Popover';
 
 import { SignOption, VerificationStatus } from '../constants';
 
@@ -54,15 +55,20 @@ export const MSG = defineMessages({
     id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.multiple`,
     defaultMessage: 'All need to sign',
   },
+  motionTooltip: {
+    id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.motionTooltip`,
+    defaultMessage: `There is an active Motion to change this application.`,
+  },
 });
 
 const displayName = `dashboard.Incorporation.IncorporationForm.LockedProtectors`;
 
 export interface Props {
   formValues: ValuesType;
+  pendingMotion?: boolean;
 }
 
-const LockedProtectors = ({ formValues }: Props) => {
+const LockedProtectors = ({ formValues, pendingMotion }: Props) => {
   const signLabel = useMemo(() => {
     return formValues.signOption === SignOption.Individual
       ? MSG.individual
@@ -73,17 +79,38 @@ const LockedProtectors = ({ formValues }: Props) => {
     <>
       <FormSection>
         <div className={styles.wrapper}>
-          <div className={styles.protectorsLabelWrapper}>
-            <div className={styles.label}>
-              <FormattedMessage {...MSG.protectors} />
+          <div className={styles.labelDotWrapper}>
+            <div className={styles.protectorsLabelWrapper}>
+              <div className={styles.label}>
+                <FormattedMessage {...MSG.protectors} />
+              </div>
+              <QuestionMarkTooltip
+                tooltipText={MSG.protectorsTooltip}
+                tooltipTextValues={{
+                  a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
+                }}
+                interactive
+              />
             </div>
-            <QuestionMarkTooltip
-              tooltipText={MSG.protectorsTooltip}
-              tooltipTextValues={{
-                a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
-              }}
-              interactive
-            />
+            {pendingMotion && (
+              <Tooltip
+                placement="top-start"
+                trigger="hover"
+                content={<FormattedMessage {...MSG.motionTooltip} />}
+                popperOptions={{
+                  modifiers: [
+                    {
+                      name: 'offset',
+                      options: {
+                        offset: [-2, 6],
+                      },
+                    },
+                  ],
+                }}
+              >
+                <div className={styles.dot} />
+              </Tooltip>
+            )}
           </div>
         </div>
       </FormSection>

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

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import { Formik } from 'formik';
 import classNames from 'classnames';
+import { isEmpty } from 'lodash';
 
 import { useColonyFromNameQuery } from '~data/generated';
 import { getMainClasses } from '~utils/css';
@@ -53,7 +54,7 @@ const IncorporationPage = () => {
   const notVerified = true; // temporary valule
 
   const openPayDialog = useDialog(IncorporationPaymentDialog);
-  const [motion, setMotions] = useState<Motion[]>([]);
+  const [motions, setMotions] = useState<Motion[]>([]);
 
   const handleSubmit = useCallback((values) => {
     setFormValues(values);
@@ -169,6 +170,12 @@ const IncorporationPage = () => {
     );
   }, [colonyData, openCancelIncorporationDialog]);
 
+  const pendingMotion = useMemo(
+    () =>
+      motions?.find((motionItem) => motionItem.status === MotionStatus.Pending),
+    [motions],
+  );
+
   return isFormEditable ? (
     <Formik
       initialValues={initialValues} // mock values are used here to fill in the form
@@ -230,6 +237,7 @@ const IncorporationPage = () => {
             <LockedIncorporationForm
               formValues={formValues}
               activeStageId={activeStageId}
+              pendingMotion={!isEmpty(pendingMotion)}
             />
           )
         )}
@@ -257,7 +265,7 @@ const IncorporationPage = () => {
               colony={colonyData?.processedColony}
               viewFor={ViewFor.INCORPORATION}
               handleCancel={handleCancelIncorporation}
-              motion={motion}
+              motion={motions}
             />
           )}
         </main>