urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-24 03:14:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

notifications: update dismiss action styling

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-04-19 13:26:21 +10:00
parent 048bd02604
commit 0ef452f8b3
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/interface/src/logic/lib/platform.ts
View File

@ -4,3 +4,7 @@ const ua = window.navigator.userAgent;
export const IS_IOS = ua.includes('iPhone'); export const IS_IOS = ua.includes('iPhone');
export const IS_SAFARI = ua.includes('Safari') && !ua.includes('Chrome'); export const IS_SAFARI = ua.includes('Safari') && !ua.includes('Chrome');
export const IS_ANDROID = ua.includes('Android');
export const IS_MOBILE = IS_IOS || IS_ANDROID;

36
pkg/interface/src/views/apps/notifications/notification.tsx
View File

@ -1,5 +1,5 @@
import React, { ReactNode, useCallback, useMemo, useState } from "react"; import React, { ReactNode, useCallback, useMemo, useState } from "react";
import { Row, Box } from "@tlon/indigo-react"; import { Row, Box, Icon } from "@tlon/indigo-react";
import _ from "lodash"; import _ from "lodash";
import { import {
GraphNotificationContents, GraphNotificationContents,
@ -19,6 +19,7 @@ import { GraphNotification } from "./graph";
import { BigInteger } from "big-integer"; import { BigInteger } from "big-integer";
import { useHovering } from "~/logic/lib/util"; import { useHovering } from "~/logic/lib/util";
import useHarkState from "~/logic/state/hark"; import useHarkState from "~/logic/state/hark";
import {IS_MOBILE} from "~/logic/lib/platform";
interface NotificationProps { interface NotificationProps {
notification: IndexedNotification; notification: IndexedNotification;
@ -102,39 +103,30 @@ export function NotificationWrapper(props: {
} }
borderRadius={2} borderRadius={2}
display="grid" display="grid"
gridTemplateColumns={["1fr", "1fr 200px"]} gridTemplateColumns={["1fr 24px", "1fr 200px"]}
gridTemplateRows="auto" gridTemplateRows="auto"
gridTemplateAreas={["'header' 'main'", "'header actions' 'main main'"]} gridTemplateAreas="'header actions' 'main main'"
p={2} p={2}
m={2} m={2}
{...bind} {...bind}
> >
{children} {children}
<Row <Row
display={["none", "flex"]} alignItems="flex-start"
alignItems="center"
gapX="2" gapX="2"
gridArea="actions" gridArea="actions"
justifyContent="flex-end" justifyContent="flex-end"
opacity={[1, hovering ? 1 : 0]} opacity={[1, (hovering || IS_MOBILE) ? 1 : 0]}
> >
{time && notification && ( {time && notification && (
<> <StatelessAsyncAction
<StatelessAsyncAction name={time.toString()}
name={changeMuteDesc} borderRadius={1}
onClick={onChangeMute} onClick={onArchive}
backgroundColor="transparent" backgroundColor="white"
> >
{changeMuteDesc} <Icon lineHeight="24px" size={16} icon="X" />
</StatelessAsyncAction> </StatelessAsyncAction>
<StatelessAsyncAction
name={time.toString()}
onClick={onArchive}
backgroundColor="transparent"
>
Dismiss
</StatelessAsyncAction>
</>
)} )}
</Row> </Row>
</Box> </Box>