notifications: fix invite squashing

Fixes #4111
This commit is contained in:
Liam Fitzgerald 2020-12-14 11:04:34 +10:00
parent 8b83df00bd
commit e1a4f3bafa
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 10 additions and 5 deletions

View File

@ -1,7 +1,7 @@
import React, { useEffect, useCallback } from "react";
import f from "lodash/fp";
import _ from "lodash";
import { Icon, Col, Row, Box, Text, Anchor } from "@tlon/indigo-react";
import { Icon, Col, Row, Box, Text, Anchor, Rule } from "@tlon/indigo-react";
import moment from "moment";
import { Notifications, Rolodex, Timebox, IndexedNotification, Groups } from "~/types";
import { MOMENT_CALENDAR_DATE, daToUnix, resourceAsPath } from "~/logic/lib/util";
@ -129,8 +129,10 @@ export default function Inbox(props: {
};
return (
<Col height="100%" overflowY="auto" onScroll={onScroll} >
{inviteItems(invites, api)}
<Col position="relative" height="100%" overflowY="auto" onScroll={onScroll} >
<Col zIndex={4} gapY={2} bg="white" top="0px" position="sticky">
{inviteItems(invites, api)}
</Col>
{newNotifications && (
<DaySection
latest

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { Invite } from '~/types/invite-update';
import { Text, Box, Button, Row } from '@tlon/indigo-react';
import { Text, Box, Button, Row, Rule } from '@tlon/indigo-react';
import { StatelessAsyncAction } from "~/views/components/StatelessAsyncAction";
import { cite } from '~/logic/lib/util';
@ -9,7 +9,8 @@ export class InviteItem extends Component<{invite: Invite, onAccept: (i: any) =>
const { props } = this;
return (
<Box width='100%' p='4' mb='4' borderBottom='1px solid lightGray' position='sticky' style={{ top: 0 }}>
<>
<Box width='100%' p='4'>
<Box width='100%' verticalAlign='middle'>
<Text display='block' pb='2' gray><Text mono>{cite(props.invite.resource.ship)}</Text> invited you to <Text fontWeight='500'>{props.invite.resource.name}</Text></Text>
</Box>
@ -34,6 +35,8 @@ export class InviteItem extends Component<{invite: Invite, onAccept: (i: any) =>
</Row>
</Box>
<Rule />
</>
);
}
}