interface: design nits

pkg/interface/src/views/apps/groups/components/GroupSwitcher.tsx

@@ -156,8 +156,8 @@ export function GroupSwitcher(props: {
             }
           >
             <Box p={2} alignItems="center" display="flex">
-              <Box mr={1}>
-                <Text>{title}</Text>
+              <Box mr={1} flex='1'>
+                <Text overflow='hidden' display='inline-block' maxWidth='144px'  style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
               </Box>
               <Icon mt="2px" display="block" icon="ChevronSouth" />
             </Box>

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

@@ -13,8 +13,11 @@ import Welcome from './components/welcome';
 import Groups from './components/Groups';
 
 const Tile = ({ children, bg, to, ...rest }) => (
-  <Box 
-    m={2}
+  <Box
+    mt='0'
+    ml='2'
+    mr='2'
+    mb={3}
     bg="white"
     width="126px"
     height="126px"
@@ -54,7 +57,7 @@ export default class LaunchApp extends React.Component {
         </Helmet>
         <div className="h-100 flex flex-column h-100">
           <Welcome firstTime={props.launch.firstTime} api={props.api} />
-          <Row flexWrap="wrap" mb={4} pitch={4}>
+          <Row ml='2' flexWrap="wrap" mb={4} pitch={4}>
             <Tile
               border={1}
               bg="washedGreen"
@@ -65,7 +68,7 @@ export default class LaunchApp extends React.Component {
                 <Icon
                   stroke="green"
                   fill="rgba(0,0,0,0)"
-                  icon="Circle" 
+                  icon="Circle"
                 />
                 <Text ml="1" color="green">Home</Text>
               </Row>
@@ -88,7 +91,7 @@ export default class LaunchApp extends React.Component {
             />
           </Row>
           <Groups associations={props.associations} />
-          <Box 
+          <Box
             position="absolute"
             fontFamily="mono"
             left="0"

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

@@ -31,7 +31,7 @@ const sortGroupsRecent = (recent: string[]) => (
   return Math.max(0,bRecency) - Math.max(0, aRecency);
 };
 
-const sortGroupsAlph = (a: Association, b: Association) => 
+const sortGroupsAlph = (a: Association, b: Association) =>
   alphabeticalOrder(a.metadata.title, b.metadata.title);
 
 export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
@@ -48,6 +48,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   return (
     <Box
       {...boxProps}
+      ml='2'
       display="grid"
       gridAutoRows="124px"
       gridTemplateColumns="repeat(auto-fit, 124px)"

pkg/interface/src/views/apps/launch/components/tiles/tile.js

@@ -4,11 +4,11 @@ import React from 'react';
 export default class Tile extends React.Component {
   render() {
     const { transparent } = this.props;
-    const bgClasses = transparent ? ' ' : ' bg-white bg-gray0-d ';
+    const bgClasses = transparent ? ' ' : ' bg-transparent ';
     return (
-      <div className={"fl ma2 overflow-hidden" + bgClasses}
-           style={{ height: '126px', width: '126px' }}> 
-      {this.props.children} 
+      <div className={"fl mr2 ml2 mb3 mt0 overflow-hidden" + bgClasses}
+           style={{ height: '126px', width: '126px' }}>
+      {this.props.children}
       </div>
     );
   }

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

@@ -97,18 +97,23 @@ export function SidebarItem(props: {
       pr={2}
       selected={selected}
     >
-      <Row alignItems="center">
+      <Row width='100%' alignItems="center" flex='1 auto' minWidth='0'>
         <Icon
           display="block"
           color="transparent"
           stroke={color}
           icon={getAppIcon(appName, module) as any}
         />
-        <Box flexShrink={2} ml={2}>
+        <Box width='100%' flexShrink={2} ml={2} display='flex' overflow='hidden'>
           <Text
             lineHeight="short"
+            display='inline-block'
+            flex='1'
+            overflow='hidden'
+            width='100%'
             fontWeight={hasUnread ? "bold" : "regular"}
             color={selected || isSynced ? "black" : "lightGray"}
+            style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}
           >
             {title}
           </Text>

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

@@ -28,7 +28,7 @@ const StatusBar = (props) => {
       width="100%"
       gridTemplateRows="30px"
       gridTemplateColumns="3fr 1fr"
-      py={2}
+      py={3}
       px={3}
       >
       <Row collapse>