Merge pull request #3884 from urbit/ga/qa-fixes

Ga/qa fixes

pkg/interface/package-lock.json

@@ -1693,9 +1693,9 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.12.tgz",
-      "integrity": "sha512-KBsWHYKoYTkoOgzlGyIlla9WMBxXJ58NM/cDapNaHvBnb3M9jkVrH++9CcRRqkFYqLs8tHHvBaEDmwIjQzpqng==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.13.tgz",
+      "integrity": "sha512-6qYLjVcGZtDjI+BqS2PRrfAh9mUCDtYwDOHuYuPyV87mdVRAhduBlQ/3tDVlTNWICF9DeAhozeClxalACs5Ipw==",
       "requires": {
         "@reach/menu-button": "^0.10.5",
         "react": "^16.13.1",

pkg/interface/package.json

@@ -9,7 +9,7 @@
     "@reach/menu-button": "^0.10.5",
     "@reach/tabs": "^0.10.5",
     "@tlon/indigo-light": "^1.0.3",
-    "@tlon/indigo-react": "1.2.12",
+    "@tlon/indigo-react": "1.2.13",
     "@tlon/sigil-js": "^1.4.2",
     "aws-sdk": "^2.726.0",
     "big-integer": "^1.6.48",

pkg/interface/src/logic/lib/omnibox.js

@@ -54,7 +54,7 @@ const appIndex = function (apps) {
 
 const otherIndex = function() {
   const other = [];
-  other.push(result('Home', '/~landscape/home', 'home', null));
+  other.push(result('DMs + Drafts', '/~landscape/home', 'home', null));
   other.push(result('Profile and Settings', '/~profile/identity', 'profile', null));
   other.push(result('Log Out', '/~/logout', 'logout', null));
 

pkg/interface/src/logic/lib/workspace.ts

@@ -6,7 +6,7 @@ export function getTitleFromWorkspace(
 ) {
   switch (workspace.type) {
     case "home":
-      return "Home";
+      return "DMs + Drafts";
     case "group":
       const association = associations.contacts[workspace.group];
       return association?.metadata?.title || "";

pkg/interface/src/logic/store/store.ts

@@ -19,7 +19,7 @@ export const homeAssociation = {
   "group-path": "/home",
   metadata: {
     color: "0x0",
-    title: "Home",
+    title: "DMs + Drafts",
     description: "",
     "date-created": "",
     module: "",

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

@@ -43,6 +43,7 @@ export default class LaunchApp extends React.Component {
             gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
             gridGap={3}
             p={2}
+            pt={0}
           >
             <Tile
               bg="transparent"
@@ -55,9 +56,9 @@ export default class LaunchApp extends React.Component {
                   <Icon
                     color="white"
                     // fill="rgba(0,0,0,0)"
-                    icon="Home"
+                    icon="Boot"
                   />
-                  <Text ml="1" mt='1px' color="white">Home</Text>
+                  <Text ml="1" mt='1px' color="white">DMs + Drafts</Text>
                 </Row>
               </Box>
             </Tile>

pkg/interface/src/views/components/ReconnectButton.js

@@ -1,36 +1,23 @@
 import React from "react";
-import { Box, Text } from "@tlon/indigo-react";
-
-const ReconnectBox = ({ color, children, onClick }) => (
-  <Box
-    px={2}
-    py={1}
-    display="flex"
-    color={color}
-    bg="white"
-    alignItems="center"
-    border={1}
-    verticalAlign="middle"
-    lineHeight="0"
-    borderRadius={2}
-    style={{ cursor: "pointer" }}
-    onClick={onClick}
-  >
-    <Text color={color}>{children}</Text>
-  </Box>
-);
+import { Text, LoadingSpinner, Button } from "@tlon/indigo-react";
 
 const ReconnectButton = ({ connection, subscription }) => {
   const connectedStatus = connection || "connected";
   const reconnect = subscription.restart.bind(subscription);
+
   if (connectedStatus === "disconnected") {
     return (
-      <ReconnectBox onClick={reconnect} color="red">
-        Reconnect ↻
-      </ReconnectBox>
+      <Button onClick={reconnect} borderColor='red' px='2'>
+        <Text textAlign='middle' color='red'>Reconnect ↻</Text>
+      </Button>
     );
   } else if (connectedStatus === "reconnecting") {
-    return <ReconnectBox color="yellow">Reconnecting</ReconnectBox>;
+    return (
+      <Button borderColor='yellow' px='2' onClick={() => {}} cursor='default'>
+        <LoadingSpinner pr='2' foreground='scales.yellow60' background='scales.yellow30'/>
+        <Text textAlign='middle' color='yellow'>Reconnecting</Text>
+      </Button>
+    )
   } else {
     return null;
   }

pkg/interface/src/views/components/StatusBar.js

@@ -20,7 +20,7 @@ const StatusBar = (props) => {
       gridTemplateColumns="3fr 1fr"
       py='3'
       px='3'
-      pb='2'
+      pb='3'
       >
       <Row collapse>
       <Button borderColor='washedGray' mr='2' px='2' onClick={() => props.history.push('/')} {...props}>
@@ -32,7 +32,7 @@ const StatusBar = (props) => {
           <Text ml={2} color='black'>
             Leap
           </Text>
-          <Text display={['none', 'inline']} ml={4} color='gray'>
+          <Text display={['none', 'inline']} ml={2} color='gray'>
             {metaKey}/
           </Text>
         </StatusBarItem>

pkg/interface/src/views/components/StatusBarItem.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { Row as _Row, Icon } from "@tlon/indigo-react";
+import { Row as _Row, Icon, Button } from "@tlon/indigo-react";
 import styled from "styled-components";
 
 const Row = styled(_Row)`
@@ -14,15 +14,11 @@ export function StatusBarItem({
   ...props
 }: StatusBarItemProps) {
   return (
-    <Row
+    <Button
       position="relative"
-      collapse
       border={1}
-      borderRadius={2}
       color="washedGray"
       bg="white"
-      alignItems="center"
-      height='32px'
       px={2}
       {...props}
     >
@@ -35,6 +31,6 @@ export function StatusBarItem({
           style={{ position: 'absolute', top: '-10', right: '-11' }}
         />
       )}
-    </Row>
+    </Button>
   );
 }

pkg/interface/src/views/components/leap/Omnibox.js

@@ -216,7 +216,7 @@ export class Omnibox extends Component {
   renderResults() {
     const { props, state } = this;
     return <Box
-            maxHeight="400px"
+            maxHeight={['200px', "400px"]}
             overflowY="auto"
             overflowX="hidden"
             borderBottomLeftRadius='2'
@@ -267,7 +267,7 @@ export class Omnibox extends Component {
           display={props.show ? 'block' : 'none'}>
           <Row justifyContent='center'>
             <Box
-              mt='20vh'
+              mt={['10vh', '20vh']}
               width='max(50vw, 300px)'
               maxWidth='600px'
               borderRadius='2'

pkg/interface/src/views/landscape/components/GroupSwitcher.tsx

@@ -120,7 +120,7 @@ export function GroupSwitcher(props: {
                     display="block"
                     icon="Circle"
                   />
-                  <Text>Home</Text>
+                  <Text>DMs + Drafts</Text>
                 </GroupSwitcherItem>}
                 <RecentGroups
                   recent={props.recentGroups}

pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx

@@ -116,7 +116,6 @@ export function Sidebar(props: SidebarProps) {
       borderRightColor="washedGray"
       overflowY="scroll"
       fontSize={0}
-      bg="white"
       position="relative"
     >
       <GroupSwitcher