Merge pull request #4492 from urbit/mp/launch/1-7-tweak

launch: update for 1.7

pkg/interface/src/views/apps/launch/app.js

@@ -21,7 +21,7 @@ import { Helmet } from 'react-helmet';
 import useLocalState from "~/logic/state/local";
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
 import { useQuery } from "~/logic/lib/useQuery";
-import { 
+import {
   hasTutorialGroup,
   TUTORIAL_GROUP,
   TUTORIAL_HOST,
@@ -46,17 +46,14 @@ export default function LaunchApp(props) {
   const hashBox = (
     <Box
       position={["relative", "absolute"]}
-      fontFamily="mono"
       left="0"
       bottom="0"
-      color="washedGray"
-      bg="white"
+      bg="#f2f2f2"
       ml={3}
       mb={3}
       borderRadius={2}
       fontSize={0}
       p={2}
-      boxShadow="0 0 0px 1px inset"
       cursor="pointer"
       onClick={() => {
         writeText(props.baseHash);
@@ -66,7 +63,7 @@ export default function LaunchApp(props) {
         }, 2000);
       }}
     >
-      <Text color="gray">{hashText || props.baseHash}</Text>
+      <Text mono bold>{hashText || props.baseHash}</Text>
     </Box>
   );
 
@@ -87,7 +84,7 @@ export default function LaunchApp(props) {
   const waiter = useWaitForProps(props);
 
   const { modal, showModal } = useModal({
-    position: 'relative', 
+    position: 'relative',
     maxWidth: '350px',
     modal: (dismiss) => {
       const onDismiss = (e) => {
@@ -120,7 +117,7 @@ export default function LaunchApp(props) {
         </Box>
         <Text lineHeight="tall" fontWeight="medium">Welcome</Text>
         <Text lineHeight="tall">
-          You have been invited to use Landscape, an interface to chat 
+          You have been invited to use Landscape, an interface to chat
           and interact with communities
           <br />
           Would you like a tour of Landscape?
@@ -183,21 +180,22 @@ export default function LaunchApp(props) {
           />
           <ModalButton
             icon="Plus"
-            bg="blue"
-            color="#fff"
-            text="Join a Group"
+            bg="washedGray"
+            color="#000"
+            text="New Group"
             style={{ gridColumnStart: 1 }}
-          >
-            <JoinGroup {...props} />
-          </ModalButton>
-          <ModalButton
-            icon="CreateGroup"
-            bg="green"
-            color="#fff"
-            text="Create Group"
           >
             <NewGroup {...props} />
           </ModalButton>
+          <ModalButton
+            icon="Boot"
+            bg="washedGray"
+            color="#000"
+            text="Join Group"
+          >
+            <JoinGroup {...props} />
+          </ModalButton>
+
           <Groups unreads={props.unreads} groups={props.groups} associations={props.associations} />
         </Box>
         <Box alignSelf="flex-start" display={["block", "none"]}>{hashBox}</Box>

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -85,12 +85,12 @@ function Group(props: GroupProps) {
       <Col height="100%" justifyContent="space-between">
         <Text>{title}</Text>
         <Col>
-          {unreads > 0 &&
-            (<Text gray>{unreads} unread{unreads !== 1 && 's'} </Text>)
-          }
           {updates > 0 &&
             (<Text mt="1" color="blue">{updates} update{updates !== 1 && 's'} </Text>)
           }
+          {unreads > 0 &&
+            (<Text color="lightGray">{unreads}</Text>)
+          }
         </Col>
 
       </Col>

pkg/interface/src/views/apps/launch/components/ModalButton.tsx

@@ -12,17 +12,16 @@ const ModalButton = (props) => {
       <Button
         onClick={showModal}
         display='flex'
-        alignItems='center'
         cursor='pointer'
+        justifyContent="start"
         bg={bg}
         p={2}
+        border={0}
         borderRadius={2}
-        boxShadow='0 0 0px 1px inset'
-        color='scales.black20'
         {...rest}
       >
         <Icon icon={props.icon} mr={2} color={color}></Icon>
-        <Text color={color} whiteSpace='nowrap'>
+        <Text color={color} fontWeight="medium" whiteSpace='nowrap'>
           {props.text}
         </Text>
       </Button>