landscape: sidebar updated to latest

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

@@ -81,12 +81,11 @@ export function GroupSwitcher(props: {
   const title = getTitleFromWorkspace(associations, workspace);
   const navTo = (to: string) => `${props.baseUrl}${to}`;
   return (
-    <Box backgroundColor="white" zIndex="2" position="sticky" top="0px" p={2}>
+    <Box height='48px' backgroundColor="white" zIndex="2" position="sticky" top="0px" py={3} pl='3' borderBottom='1px solid' borderColor='washedGray'>
       <Col
-        justifyContent="center"
         bg="white"
       >
-        <Row alignItems="center" justifyContent="space-between">
+        <Row justifyContent="space-between">
           <Dropdown
             width="100%"
             dropWidth="231px"
@@ -163,14 +162,13 @@ export function GroupSwitcher(props: {
               </Col>
             }
           >
-            <Row pb='2' alignItems="center" width='100%' minWidth='0' flexShrink={0}>
-              <Row justifyContent="space-between" alignItems="center" mr={1} flexShrink={0} width='100%' minWidth='0'>
-                <Text fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
-                <Icon size='14px' ml='1' mt="0px" display="inline-block" icon="ChevronDouble" />
+            <Row width='100%' minWidth='0' flexShrink={0}>
+              <Row justifyContent="space-between" mr={1} flexShrink={0} width='100%' minWidth='0'>
+                <Text lineHeight="1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
               </Row>
             </Row>
           </Dropdown>
-          <Row justifyContent="flex-end" alignSelf='flex-start' mt='1px'>
+          <Row pr='3' verticalAlign="middle">
             {(workspace.type === "group") && (
               <>
                 {isAdmin && (<Link to={navTo("/invites")}>

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

@@ -48,20 +48,6 @@ interface SidebarProps {
   workspace: Workspace;
 }
 
-// Magic spacer that because firefox doesn't correctly calculate
-// position: sticky on a flex child
-// remove when https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
-// is fixed
-const SidebarStickySpacer = styled(Box)`
-  height: 0px;
-  flex-grow: 1;
-  @-moz-document url-prefix() {
-    & {
-      height: ${p => p.theme.space[6] }px;
-    }
-  }
-`;
-
 export function Sidebar(props: SidebarProps) {
   const { invites, api, associations, selected, apps, workspace } = props;
   const groupPath = getGroupFromWorkspace(workspace);
@@ -118,7 +104,6 @@ export function Sidebar(props: SidebarProps) {
         apps={props.apps}
         baseUrl={props.baseUrl}
       />
-      <SidebarStickySpacer flexShrink={0} />
       <Box
         flexShrink="0"
         display={isAdmin ? "flex" : "none"}

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

@@ -14,7 +14,8 @@ import { Dropdown } from "~/views/components/Dropdown";
 import { FormikHelpers } from "formik";
 import { SidebarListConfig, Workspace } from "./types";
 import { Link, useHistory } from 'react-router-dom';
-import {ShipSearch} from "~/views/components/ShipSearch";
+import { getGroupFromWorkspace } from "~/logic/lib/workspace";
+import { roleForShip } from "~/logic/lib/group";
 import {Groups, Rolodex} from "~/types";
 
 export function SidebarListHeader(props: {
@@ -36,14 +37,18 @@ export function SidebarListHeader(props: {
     [props.handleSubmit]
   );
 
+  const groupPath = getGroupFromWorkspace(props.workspace);
+  const role = props.groups?.[groupPath] ? roleForShip(props.groups[groupPath], window.ship) : undefined;
+  const isAdmin = (role === "admin") || (props.workspace?.type === 'home');
+
   return (
     <Row
       flexShrink="0"
       alignItems="center"
       justifyContent="space-between"
       py={2}
-      pr={2}
-      pl={2}
+      px={3}
+      height='48px'
     >
       <Box flexShrink='0'>
         <Text>
@@ -51,12 +56,18 @@ export function SidebarListHeader(props: {
         </Text>
       </Box>
       <Box
-        width='100%'
         textAlign='right'
-        mr='2'
-        display={(props.workspace?.type === 'home') ? 'inline-block' : 'none'}
+        display='flex'
       >
-       <Link to={`${props.baseUrl}/invites`}>
+       <Link
+        style={{
+          display: isAdmin ? "inline-block" : "none" }}
+        to={
+         !!groupPath ? `/~landscape${groupPath}/new` : `/~landscape/home/new`}>
+           <Icon icon="Plus" color="gray" pr='2'/>
+       </Link>
+       <Link to={`${props.baseUrl}/invites`}
+        style={{ display: (props.workspace?.type === 'home') ? 'inline-block' : 'none', verticalAlign: 'bottom' }}>
           <Text
             display='inline-block'
             verticalAlign='middle'
@@ -68,7 +79,6 @@ export function SidebarListHeader(props: {
               + DM
             </Text>
         </Link>
-      </Box>
       <Dropdown
         flexShrink='0'
         width="auto"
@@ -102,6 +112,7 @@ export function SidebarListHeader(props: {
       >
         <Icon color="gray" icon="Adjust" />
       </Dropdown>
+      </Box>
     </Row>
   );
 }