Standardized notification look.

DA0-DA0 · Oct 10, 2023 · 109fa7d · 109fa7d
1 parent a7e406d
commit 109fa7d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 91 deletions.
diff --git a/packages/i18n/locales/en/translation.json b/packages/i18n/locales/en/translation.json
@@ -695,7 +695,8 @@
     "activeThresholdDescription": "The amount of voting power that needs to be staked in order for the DAO to become active (i.e. proposal creation is allowed).",
     "addCw20ToTreasuryActionDescription": "Display the DAO's balance of a CW20 token in the treasury view.",
     "addCw721ToTreasuryActionDescription": "Display the NFTs owned by the DAO from a CW721 NFT collection in the treasury view.",
-    "addedToDaoFollowPrompt": "This DAO has added you as a member. Follow it to receive updates.",
+    "addedToDaoFollowPrompt_withTimestamp": "You were added as a member to this DAO on {{timestamp}}. Follow it to receive updates.",
+    "addedToDaoFollowPrompt_withoutTimestamp": "You were added as a member to this DAO. Follow it to receive updates.",
     "advancedVotingConfigWarning": "These are advanced features. If you configure them without fully understanding how they work, you can lock your DAO, making it impossible for proposals to pass.",
     "allAccountsCreated": "All accounts have been created.",
     "andNumMore": "and {{count}} more",

diff --git a/packages/stateful/components/inbox/InboxMainItemRenderer.tsx b/packages/stateful/components/inbox/InboxMainItemRenderer.tsx
@@ -1,7 +1,8 @@
+import { Done } from '@mui/icons-material'
 import { ComponentType, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { WarningCard } from '@dao-dao/stateless'
+import { IconButton, Tooltip, WarningCard } from '@dao-dao/stateless'
 import {
   InboxItemRendererProps,
   InboxItemType,
@@ -19,7 +20,23 @@ export const InboxMainItemRenderer = ({ item }: InboxMainItemRendererProps) => {
   const Renderer = ITEM_RENDERER_MAP[item.type]
 
   return Renderer ? (
-    <Renderer clear={clear} data={item.data} item={item} />
+    <div className="flex flex-row items-stretch gap-1">
+      <div className="grow">
+        <Renderer clear={clear} data={item.data} item={item} />
+      </div>
+
+      <Tooltip title={t('button.clearNotification')}>
+        <div className="shrink-0">
+          <IconButton
+            Icon={Done}
+            className="!h-full"
+            onClick={clear}
+            size="sm"
+            variant="ghost"
+          />
+        </div>
+      </Tooltip>
+    </div>
   ) : (
     <WarningCard content={t('error.unknownInboxType')} />
   )

diff --git a/packages/stateful/components/inbox/renderers/JoinedDao.tsx b/packages/stateful/components/inbox/renderers/JoinedDao.tsx
@@ -6,10 +6,13 @@ import {
   InboxItemRendererProps,
   InboxItemTypeJoinedDaoData,
 } from '@dao-dao/types'
+import { formatLongDateTime } from '@dao-dao/utils'
 
 import { useFollowingDaos } from '../../../hooks'
+import { EntityDisplay } from '../../EntityDisplay'
 
 export const JoinedDaoRenderer = ({
+  item,
   data: { chainId, dao },
   clear,
 }: InboxItemRendererProps<InboxItemTypeJoinedDaoData>) => {
@@ -18,42 +21,36 @@ export const JoinedDaoRenderer = ({
 
   const [loadingFollowing, setLoadingFollowing] = useState(false)
 
+  const timestamp = item.timestamp && new Date(item.timestamp)
+
   return (
-    <div className="flex flex-col gap-4 self-start rounded-md bg-background-secondary p-6">
-      <p className="primary-text">{t('info.addedToDaoFollowPrompt')}</p>
-
-      <div className="flex flex-row items-center gap-2">
-        <Button
-          center
-          className="grow"
-          disabled={updatingFollowing}
-          loading={updatingFollowing && loadingFollowing}
-          onClick={() => {
-            setLoadingFollowing(true)
-            setFollowing(dao).then((success) => {
-              if (success) {
-                clear()
-              }
-            })
-          }}
-        >
-          {t('button.follow')}
-        </Button>
-
-        <Button
-          center
-          className="grow"
-          disabled={updatingFollowing}
-          loading={updatingFollowing && !loadingFollowing}
-          onClick={() => {
-            setLoadingFollowing(false)
-            clear()
-          }}
-          variant="secondary"
-        >
-          {t('button.ignore')}
-        </Button>
+    <div className="flex flex-row items-end justify-between gap-6 rounded-md bg-background-secondary p-4">
+      <div className="flex flex-col gap-2">
+        <EntityDisplay address={dao} />
+
+        <p className="body-text ml-8 break-words">
+          {t('info.addedToDaoFollowPrompt', {
+            context: timestamp ? 'withTimestamp' : 'withoutTimestamp',
+            timestamp: timestamp ? formatLongDateTime(timestamp) : undefined,
+          })}
+        </p>
       </div>
+
+      <Button
+        center
+        disabled={updatingFollowing}
+        loading={updatingFollowing && loadingFollowing}
+        onClick={() => {
+          setLoadingFollowing(true)
+          setFollowing(dao).then((success) => {
+            if (success) {
+              clear()
+            }
+          })
+        }}
+      >
+        {t('button.follow')}
+      </Button>
     </div>
   )
 }
diff --git a/packages/stateful/components/inbox/renderers/Proposal.tsx b/packages/stateful/components/inbox/renderers/Proposal.tsx
@@ -1,12 +1,6 @@
-import { Done } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 
-import {
-  ChainProvider,
-  IconButton,
-  Tooltip,
-  useDaoNavHelpers,
-} from '@dao-dao/stateless'
+import { ChainProvider, useDaoNavHelpers } from '@dao-dao/stateless'
 import {
   InboxItemRendererProps,
   InboxItemType,
@@ -20,7 +14,6 @@ import { LinkWrapper } from '../../LinkWrapper'
 export const ProposalRenderer = ({
   item,
   data: { chainId, dao, proposalId, proposalTitle },
-  clear,
 }: InboxItemRendererProps<InboxItemTypeProposalCreatedData>) => {
   const { t } = useTranslation()
   const { getDaoProposalPath } = useDaoNavHelpers()
@@ -40,59 +33,45 @@ export const ProposalRenderer = ({
 
   return (
     <ChainProvider chainId={chainId}>
-      <div className="flex flex-row items-stretch gap-1">
-        <LinkWrapper
-          className="block cursor-pointer rounded-md bg-background-secondary transition hover:bg-background-interactive-hover active:bg-background-interactive-pressed"
-          containerClassName="grow"
-          href={getDaoProposalPath(dao, proposalId)}
-        >
-          {/* Desktop */}
-          <div className="hidden flex-row items-end justify-between gap-6 p-4 md:flex">
-            <div className="flex flex-col gap-2">
-              <EntityDisplay address={dao} />
-
-              <p className="body-text ml-8 break-words">
-                {proposalId + ': ' + proposalTitle}
-              </p>
-            </div>
-
-            {timestamp && (
-              <p className="secondary-text break-words text-right">
-                {status && `${status} @ `}
-                {formatLongDateTime(timestamp)}
-              </p>
-            )}
-          </div>
-
-          {/* Mobile */}
-          <div className="flex flex-col justify-between gap-2 rounded-md p-4 text-sm md:hidden">
+      <LinkWrapper
+        className="block cursor-pointer rounded-md bg-background-secondary transition hover:bg-background-interactive-hover active:bg-background-interactive-pressed"
+        containerClassName="grow"
+        href={getDaoProposalPath(dao, proposalId)}
+      >
+        {/* Desktop */}
+        <div className="hidden flex-row items-end justify-between gap-6 p-4 md:flex">
+          <div className="flex flex-col gap-2">
             <EntityDisplay address={dao} />
 
             <p className="body-text ml-8 break-words">
               {proposalId + ': ' + proposalTitle}
             </p>
-
-            {timestamp && (
-              <p className="secondary-text ml-8 break-words">
-                {status && `${status} @ `}
-                {formatDateTimeTz(timestamp)}
-              </p>
-            )}
           </div>
-        </LinkWrapper>
 
-        <Tooltip title={t('button.clearNotification')}>
-          <div>
-            <IconButton
-              Icon={Done}
-              className="!h-full"
-              onClick={clear}
-              size="sm"
-              variant="ghost"
-            />
-          </div>
-        </Tooltip>
-      </div>
+          {timestamp && (
+            <p className="secondary-text break-words text-right">
+              {status && `${status} @ `}
+              {formatLongDateTime(timestamp)}
+            </p>
+          )}
+        </div>
+
+        {/* Mobile */}
+        <div className="flex flex-col justify-between gap-2 rounded-md p-4 text-sm md:hidden">
+          <EntityDisplay address={dao} />
+
+          <p className="body-text ml-8 break-words">
+            {proposalId + ': ' + proposalTitle}
+          </p>
+
+          {timestamp && (
+            <p className="secondary-text ml-8 break-words">
+              {status && `${status} @ `}
+              {formatDateTimeTz(timestamp)}
+            </p>
+          )}
+        </div>
+      </LinkWrapper>
     </ChainProvider>
   )
 }