diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js index 4d7eea7e34..bd1877a1cd 100644 --- a/pkg/interface/src/views/apps/launch/app.js +++ b/pkg/interface/src/views/apps/launch/app.js @@ -10,7 +10,10 @@ import Tiles from './components/tiles'; import Tile from './components/tiles/tile'; import Welcome from './components/welcome'; import Groups from './components/Groups'; +import ModalButton from './components/ModalButton'; import { writeText } from '~/logic/lib/util'; +import { NewGroup } from "~/views/landscape/components/NewGroup"; +import { JoinGroup } from "~/views/landscape/components/JoinGroup"; const ScrollbarLessBox = styled(Box)` scrollbar-width: none !important; @@ -39,19 +42,18 @@ export default function LaunchApp(props) { pt={0} > - + - DMs + Drafts + DMs + Drafts @@ -62,7 +64,23 @@ export default function LaunchApp(props) { location={props.userLocation} weather={props.weather} /> - + + + + + + diff --git a/pkg/interface/src/views/apps/launch/components/Groups.tsx b/pkg/interface/src/views/apps/launch/components/Groups.tsx index 98692be606..4b5122c2c4 100644 --- a/pkg/interface/src/views/apps/launch/components/Groups.tsx +++ b/pkg/interface/src/views/apps/launch/components/Groups.tsx @@ -34,7 +34,7 @@ export default function Groups(props: GroupsProps & Parameters[0]) { return ( <> - {groups.map((group) => { + {groups.map((group, index) => { const path = group?.["group-path"]; const unreadCount = (["chat", "graph"] as const) .map(getUnreads(path)) @@ -42,6 +42,7 @@ export default function Groups(props: GroupsProps & Parameters[0]) { .reduce(f.add, 0); return ( + {title} {unreads > 0 && diff --git a/pkg/interface/src/views/apps/launch/components/ModalButton.tsx b/pkg/interface/src/views/apps/launch/components/ModalButton.tsx new file mode 100644 index 0000000000..aa17ae40c7 --- /dev/null +++ b/pkg/interface/src/views/apps/launch/components/ModalButton.tsx @@ -0,0 +1,81 @@ +import React, { useState, useEffect } from "react" +import { Box, Button, Icon, Text } from "@tlon/indigo-react" +import { NewGroup } from "~/views/landscape/components/NewGroup"; +import { JoinGroup } from "~/views/landscape/components/JoinGroup"; + +const ModalButton = (props) => { + const { + childen, + icon, + text, + bg, + color, + ...rest + } = props; + const [modalShown, setModalShown] = useState(false); + + const handleKeyDown = (event) => { + if (event.key === 'Escape') { + setModalShown(false); + } + } + + useEffect(() => { + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [modalShown]); + + return ( + <> + {modalShown && ( + setModalShown(false)} + > + e.stopPropagation()} + display="flex" + alignItems="stretch" + flexDirection="column" + > + {props.children} + + + )} + setModalShown(true)} + display="flex" + alignItems="center" + cursor="pointer" + bg={bg} + p={2} + borderRadius={2} + boxShadow="0 0 0px 1px inset" + color="scales.black20" + {...rest} + > + {props.text} + + + ); +} + +export default ModalButton; \ No newline at end of file diff --git a/pkg/interface/src/views/apps/launch/components/tiles/tile.js b/pkg/interface/src/views/apps/launch/components/tiles/tile.js index 348234d5e1..a83d46b4a5 100644 --- a/pkg/interface/src/views/apps/launch/components/tiles/tile.js +++ b/pkg/interface/src/views/apps/launch/components/tiles/tile.js @@ -23,7 +23,7 @@ const routeList = defaultApps.map(a => `/~${a}`); export default class Tile extends React.Component { render() { - const { bg, to, href, p, boxShadow, ...props } = this.props; + const { bg, to, href, p, boxShadow, gridColumnStart, ...props } = this.props; let childElement = ( @@ -32,7 +32,7 @@ export default class Tile extends React.Component { ); if (to) { - if (routeList.indexOf(to) !== -1 || to === '/~landscape/home' || to === '/~profile' || to.startsWith('/~landscape/ship')) { + if (routeList.indexOf(to) !== -1 || to === '/~profile' || to.startsWith('/~landscape/')) { childElement= ({childElement}); } else { childElement= ({childElement}); @@ -48,6 +48,7 @@ export default class Tile extends React.Component { bg={bg || "white"} color={props?.color || 'scales.black20'} boxShadow={boxShadow || '0 0 0px 1px inset'} + style={{ gridColumnStart }} > ; } else if (icon === 'home') { - graphic = ; + graphic = ; } else if (icon === 'notifications') { graphic = ; } else { diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index f35414d000..d7601cf59d 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -118,7 +118,7 @@ export function GroupSwitcher(props: { mr={2} color="gray" display="block" - icon="Boot" + icon="Mail" /> DMs + Drafts } @@ -127,11 +127,11 @@ export function GroupSwitcher(props: { associations={props.associations} /> - + New Group - + Join Group {workspace.type === "group" && ( diff --git a/pkg/interface/src/views/landscape/components/JoinGroup.tsx b/pkg/interface/src/views/landscape/components/JoinGroup.tsx index 6f967e71ee..7e6091f8d5 100644 --- a/pkg/interface/src/views/landscape/components/JoinGroup.tsx +++ b/pkg/interface/src/views/landscape/components/JoinGroup.tsx @@ -79,8 +79,8 @@ export function JoinGroup(props: JoinGroupProps & RouteComponentProps) { ); return ( - - + <> + Join Group @@ -103,6 +103,6 @@ export function JoinGroup(props: JoinGroupProps & RouteComponentProps) { - + ); } diff --git a/pkg/interface/src/views/landscape/components/NewGroup.tsx b/pkg/interface/src/views/landscape/components/NewGroup.tsx index 4ae36c924e..fd1989e1e5 100644 --- a/pkg/interface/src/views/landscape/components/NewGroup.tsx +++ b/pkg/interface/src/views/landscape/components/NewGroup.tsx @@ -78,8 +78,8 @@ export function NewGroup(props: NewGroupProps & RouteComponentProps) { ); return ( - - + <> + New Group @@ -112,6 +112,6 @@ export function NewGroup(props: NewGroupProps & RouteComponentProps) { - + ); } diff --git a/pkg/interface/src/views/landscape/index.tsx b/pkg/interface/src/views/landscape/index.tsx index 906fa31e9e..8ababc6743 100644 --- a/pkg/interface/src/views/landscape/index.tsx +++ b/pkg/interface/src/views/landscape/index.tsx @@ -12,6 +12,8 @@ import { NewGroup } from './components/NewGroup'; import { JoinGroup } from './components/JoinGroup'; import { cite } from '~/logic/lib/util'; +import { Body } from '../components/Body'; +import { Box } from '@tlon/indigo-react'; type LandscapeProps = StoreState & { @@ -95,12 +97,16 @@ export default class Landscape extends Component { { return ( - + + + + + ); }} /> @@ -115,13 +121,17 @@ export default class Landscape extends Component { const { ship, name } = routeProps.match.params; const autojoin = ship && name ? `${ship}/${name}` : null; return ( - + + + + + ); }} />