Merge pull request #3883 from JoinColony/feat/3869-decision-header-ti…

…me-tags Add time and tags to objection section
JoinColony · Sep 22, 2022 · 49a2118 · 49a2118
2 parents d5b5c57 + 8aace2a
commit 49a2118
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/...ashboard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.css b/...ashboard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.css
@@ -38,6 +38,7 @@
 }
 
 .leftContent {
+  flex-grow: 1;
   margin-top: 17px;
   margin-bottom: 15px;
   padding-bottom: 15px;
@@ -50,21 +51,36 @@
   background-color: color-mod(var(--temp-grey-blue-7) alpha(15%));
 }
 
-.userinfo {
+.header {
   composes: inlineEllipsis from '~styles/text.css';
   display: flex;
   align-items: center;
-  font-size: var(--size-normal);
+  margin-bottom: 16px;
+  gap: 5px;
+}
+
+.nameAndTime {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--size-tiny);
   font-weight: var(--weight-bold);
-  color: var(--pink);
+  line-height: 18px;
 }
 
 .userName {
-  margin-left: 5px;
+  color: var(--pink);
+}
+
+.time {
+  color: color-mod(var(--dark) alpha(65%));
+}
+
+.tag {
+  align-self: flex-start;
+  margin-left: auto;
 }
 
 .title {
-  margin-top: 16px;
   margin-bottom: 15px;
 }
 

diff --git a/...ard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.css.d.ts b/...ard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.css.d.ts
@@ -7,8 +7,11 @@ export const objectionContentContainer: string;
 export const tagWrapper: string;
 export const leftContent: string;
 export const divider: string;
-export const userinfo: string;
+export const header: string;
+export const nameAndTime: string;
 export const userName: string;
+export const time: string;
+export const tag: string;
 export const title: string;
 export const details: string;
 export const titleDecoration: string;

diff --git a/...ashboard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.tsx b/...ashboard/components/ActionsPage/ActionPageDecisionWithIPFS/ActionPageDecisionWithIPFS.tsx
@@ -10,6 +10,9 @@ import HookedUserAvatar from '~users/HookedUserAvatar';
 import { useDataFetcher } from '~utils/hooks';
 import { Colony, AnyUser } from '~data/index';
 import { DecisionDetails } from '~types/index';
+import TimeRelative from '~core/TimeRelative';
+import Tag, { Appearance as TagAppearance } from '~core/Tag';
+import { MotionState, MOTION_TAG_MAP } from '~utils/colonyMotions';
 
 import { ipfsDataFetcher } from '../../../../core/fetchers';
 
@@ -38,6 +41,7 @@ interface Props {
   username: string;
   walletAddress: string;
   hash: string;
+  createdAt: number;
   isObjection?: boolean;
 }
 // @NOTE For a Decision motions, the annotation stores the decision details.
@@ -47,6 +51,7 @@ const ActionPageDecisionWithIPFS = ({
   username,
   walletAddress,
   hash,
+  createdAt,
   isObjection = false,
 }: Props) => {
   const { data: ipfsDataJSON } = useDataFetcher(
@@ -117,7 +122,7 @@ const ActionPageDecisionWithIPFS = ({
         }
       >
         <div className={styles.leftContent}>
-          <span className={styles.userinfo}>
+          <div className={styles.header}>
             <UserAvatar
               colony={colony}
               size="s"
@@ -138,8 +143,28 @@ const ActionPageDecisionWithIPFS = ({
                 ],
               }}
             />
-            <span className={styles.userName}>{`@${username}`}</span>
-          </span>
+
+            <div className={styles.nameAndTime}>
+              <span className={styles.userName}>{`@${username}`}</span>
+              <span className={styles.time}>
+                <TimeRelative value={new Date(createdAt)} />
+              </span>
+            </div>
+
+            {isObjection && (
+              <div className={styles.tag}>
+                <Tag
+                  text={MOTION_TAG_MAP[MotionState.Objection].name}
+                  appearance={{
+                    theme: MOTION_TAG_MAP[MotionState.Objection]
+                      .theme as TagAppearance['theme'],
+                    colorSchema: MOTION_TAG_MAP[MotionState.Objection]
+                      .colorSchema as TagAppearance['colorSchema'],
+                  }}
+                />
+              </div>
+            )}
+          </div>
           {!isObjection && (
             <div className={styles.title}>
               <Heading

diff --git a/src/modules/dashboard/components/ActionsPage/ActionsComponents/DefaultMotion.tsx b/src/modules/dashboard/components/ActionsPage/ActionsComponents/DefaultMotion.tsx
@@ -117,6 +117,7 @@ const DefaultMotion = ({
     newVersion,
     tokenAddress,
     reputationChange,
+    createdAt,
   },
   colonyAction,
   token,
@@ -413,6 +414,7 @@ const DefaultMotion = ({
         user={initiator}
         username={currentUserName || ''}
         walletAddress={walletAddress}
+        createdAt={createdAt}
         hash={annotationHash || ''}
       />
     ) : (
@@ -437,6 +439,7 @@ const DefaultMotion = ({
               user={objectionAnnotationUser}
               username={currentUserName || ''}
               walletAddress={walletAddress}
+              createdAt={createdAt}
               hash={objectionAnnotation?.motionObjectionAnnotation?.metadata}
               isObjection
             />
@@ -495,6 +498,7 @@ const DefaultMotion = ({
     annotationHash,
     colony,
     colonyAction,
+    createdAt,
     currentUserName,
     events,
     initiator,