Add: Actions List Item (basic)

JoinColony · Jan 31, 2023 · 22900e4 · 22900e4
1 parent e914c7a
commit 22900e4
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 202 deletions.
diff --git a/src/components/common/ColonyActions/ActionsListHeading.css b/src/components/common/ColonyActions/ActionsListHeading.css
@@ -20,4 +20,4 @@
   font-size: var(--size-smallish);
   font-weight: var(--weight-bold);
   color: var(--dark);
-}
+}
diff --git a/src/components/common/ColonyActions/mockData.ts b/src/components/common/ColonyActions/mockData.ts
@@ -39,6 +39,9 @@ const colonyEditValues: {
 const fakeUser: User = {
   walletAddress: '0xCd96D435128415F3265c32f9eaeFaCc6Be53b7D7',
   name: 'Steven',
+  profile: {
+    displayName: 'Steven',
+  },
 };
 
 const coreData = {
@@ -58,7 +61,6 @@ const coreData = {
   colonyAvatarHash: null,
   colonyTokens: [],
   blockNumber: 999,
-  motionState: undefined,
   isWhitelistActivated: false,
   verifiedAddresses: [],
 };

diff --git a/src/components/shared/ActionsList/ActionsList.tsx b/src/components/shared/ActionsList/ActionsList.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 
-import { ActionsListItem } from '~common/ColonyActions';
+import ActionsListItem from './ActionsListItem';
 
 const displayName = 'ActionsList';
 

diff --git a/src/components/shared/ActionsList/ActionsListItem.css b/src/components/shared/ActionsList/ActionsListItem.css
@@ -39,11 +39,6 @@
   border-radius: 100%;
 }
 
-.avatar:hover figure {
-  border-color: var(--primary);
-  background: var(--primary);
-}
-
 .status::before {
   display: block;
   margin-left: -17px;
@@ -140,7 +135,7 @@
 }
 
 .commentCountIcon svg {
-  fill: color-mod(var(--dark) alpha(70%));
+  fill: rgba(var(--dark-1), 0.7);
 }
 
 .userMention {

diff --git a/src/components/shared/ActionsList/ActionsListItem.css.d.ts b/src/components/shared/ActionsList/ActionsListItem.css.d.ts
@@ -1,23 +1,34 @@
-export const mainTextSize: string;
-export const popoverWidth: string;
-export const popoverDistance: string;
-export const main: string;
-export const avatar: string;
-export const status: string;
-export const stateNeedAction: string;
-export const stateNeedAttention: string;
-export const stateYellow: string;
-export const content: string;
-export const titleWrapper: string;
-export const title: string;
-export const meta: string;
-export const separator: string;
-export const day: string;
-export const domain: string;
-export const commentCount: string;
-export const commentCountIcon: string;
-export const userMention: string;
-export const stateNoPointer: string;
-export const titleDecoration: string;
-export const motionTagWrapper: string;
-export const countdownTimerContainer: string;
+declare namespace ActionsListItemCssNamespace {
+  export interface IActionsListItemCss {
+    avatar: string;
+    commentCount: string;
+    commentCountIcon: string;
+    content: string;
+    countdownTimerContainer: string;
+    day: string;
+    domain: string;
+    main: string;
+    mainTextSize: string;
+    meta: string;
+    motionTagWrapper: string;
+    popoverDistance: string;
+    popoverWidth: string;
+    separator: string;
+    stateNeedAction: string;
+    stateNeedAttention: string;
+    stateNoPointer: string;
+    stateYellow: string;
+    status: string;
+    title: string;
+    titleDecoration: string;
+    titleWrapper: string;
+    userMention: string;
+  }
+}
+
+declare const ActionsListItemCssModule: ActionsListItemCssNamespace.IActionsListItemCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: ActionsListItemCssNamespace.IActionsListItemCss;
+};
+
+export = ActionsListItemCssModule;