dropdown: use latest mockup

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

@@ -21,6 +21,7 @@ interface DropdownProps {
   alignY: AlignY | AlignY[];
   alignX: AlignX | AlignX[];
   width?: string;
+  dropWidth?: string;
 }
 
 const ClickBox = styled(Box)`
@@ -111,14 +112,14 @@ export function Dropdown(props: DropdownProps) {
   });
 
   return (
-    <Box flexShrink={1} position={open ? "relative" : "static"} minWidth='0'>
+    <Box flexShrink={1} position={open ? "relative" : "static"} minWidth='0' width={props?.width ? props.width : 'auto'}>
       <ClickBox width='100%' ref={anchorRef} onClick={onOpen}>
         {children}
       </ClickBox>
       {open && (
         <Portal>
           <DropdownOptions
-            width={props.width || "max-content"}
+            width={props?.dropWidth || "max-content"}
             {...coords}
             ref={dropdownRef}
           >

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

@@ -81,17 +81,15 @@ export function GroupSwitcher(props: {
   const title = getTitleFromWorkspace(associations, workspace);
   const navTo = (to: string) => `${props.baseUrl}${to}`;
   return (
-    <Box zIndex="2" position="sticky" top="0px" p={2}>
+    <Box backgroundColor="white" zIndex="2" position="sticky" top="0px" p={2}>
       <Col
         justifyContent="center"
         bg="white"
-        borderRadius={1}
-        border={1}
-        borderColor="washedGray"
       >
         <Row alignItems="center" justifyContent="space-between">
           <Dropdown
-            width="231px"
+            width="100%"
+            dropWidth="231px"
             alignY="top"
             options={
               <Col
@@ -165,25 +163,26 @@ export function GroupSwitcher(props: {
               </Col>
             }
           >
-            <Row p={2} alignItems="center" width='100%' minWidth='0'>
-              <Row alignItems="center" mr={1} flex='1' width='100%' minWidth='0'>
-                <Text overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
-                <Icon size='12px' ml='1' mt="0px" display="inline-block" icon="ChevronSouth" />
+            <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>
             </Row>
           </Dropdown>
-          <Row pr={1} justifyContent="flex-end" alignItems="center">
+          <Row pr={1} justifyContent="flex-end" alignSelf='flex-start' mt='1px'>
             {(workspace.type === "group") && (
               <>
                 {isAdmin && (<Link to={navTo("/invites")}>
                   <Icon
-                    display="block"
+                    display="inline-block"
                     color='blue'
                     icon="Users"
+                    ml='12px'
                   />
                 </Link>)}
                 <Link to={navTo("/popover/settings")}>
-                  <Icon color='gray' display="block" m={1} icon="Gear" />
+                  <Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
                 </Link>
               </>
             )}

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

@@ -93,8 +93,8 @@ export function SidebarItem(props: {
       justifyContent="space-between"
       alignItems="center"
       py={1}
-      pl={2}
-      pr={2}
+      pl={3}
+      pr={3}
       selected={selected}
     >
       <Row width='100%' alignItems="center" flex='1 auto' minWidth='0'>
@@ -105,7 +105,7 @@ export function SidebarItem(props: {
         />
         <Box width='100%' flexShrink={2} ml={2} display='flex' overflow='hidden'>
           <Text
-            lineHeight="short"
+            lineHeight="tall"
             display='inline-block'
             flex='1'
             overflow='hidden'

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

@@ -46,7 +46,7 @@ export function SidebarListHeader(props: {
       pl={2}
     >
       <Box flexShrink='0'>
-        <Text bold>
+        <Text>
           {props.initialValues.hideUnjoined ? "Joined Channels" : "All Channels"}
         </Text>
       </Box>
@@ -71,7 +71,7 @@ export function SidebarListHeader(props: {
       </Box>
       <Dropdown
         flexShrink='0'
-        width="200px"
+        width="auto"
         alignY="top"
         alignX={["right", "left"]}
         options={
@@ -100,7 +100,7 @@ export function SidebarListHeader(props: {
           </FormikOnBlur>
         }
       >
-        <Icon color="gray" icon="Adjust" />
+        <Icon color="gray" icon="Adjust" pr='2' />
       </Dropdown>
     </Row>
   );