Merge branch 'main' into feat/mass-import

app/components/Sidebar/Main.js

@@ -22,9 +22,9 @@ import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
 import Collections from "./components/Collections";
-import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
@@ -72,7 +72,7 @@ function MainSidebar() {
     <Sidebar>
       <AccountMenu>
         {(props) => (
-          <HeaderBlock
+          <TeamButton
             {...props}
             subheading={user.name}
             teamName={team.name}

app/components/Sidebar/Settings.js

@@ -21,9 +21,9 @@ import Scrollable from "components/Scrollable";
 
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
-import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
 import Version from "./components/Version";
 import SlackIcon from "./icons/Slack";
 import ZapierIcon from "./icons/Zapier";
@@ -46,7 +46,7 @@ function SettingsSidebar() {
 
   return (
     <Sidebar>
-      <HeaderBlock
+      <TeamButton
         subheading={
           <ReturnToApp align="center">
             <BackIcon color="currentColor" /> {t("Return to App")}

app/components/Sidebar/components/TeamButton.js

@@ -13,7 +13,7 @@ type Props = {|
   logoUrl: string,
 |};
 
-const HeaderBlock = React.forwardRef<Props, any>(
+const TeamButton = React.forwardRef<Props, any>(
   ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
     <Wrapper>
       <Header justify="flex-start" align="center" ref={ref} {...rest}>
@@ -25,8 +25,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
         />
         <Flex align="flex-start" column>
           <TeamName showDisclosure>
-            {teamName}{" "}
-            {showDisclosure && <StyledExpandedIcon color="currentColor" />}
+            {teamName} {showDisclosure && <Disclosure color="currentColor" />}
           </TeamName>
           <Subheading>{subheading}</Subheading>
         </Flex>
@@ -35,7 +34,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
   )
 );
 
-const StyledExpandedIcon = styled(ExpandedIcon)`
+const Disclosure = styled(ExpandedIcon)`
   position: absolute;
   right: 0;
   top: 0;
@@ -84,4 +83,4 @@ const Header = styled.button`
   }
 `;
 
-export default HeaderBlock;
+export default TeamButton;

app/components/Sidebar/components/Toggle.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import Arrow from "components/Arrow";
 
 type Props = {
   direction: "left" | "right",
@@ -14,22 +15,7 @@ const Toggle = React.forwardRef<Props, HTMLButtonElement>(
     return (
       <Positioner style={style}>
         <ToggleButton ref={ref} $direction={direction} onClick={onClick}>
-          <svg
-            width="13"
-            height="30"
-            viewBox="0 0 13 30"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill="currentColor"
-              d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
-            />
-            <path
-              fill="currentColor"
-              d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
-            />
-          </svg>
+          <Arrow />
         </ToggleButton>
       </Positioner>
     );
@@ -60,6 +46,7 @@ export const ToggleButton = styled.button`
 `;
 
 export const Positioner = styled.div`
+  display: none;
   z-index: 2;
   position: absolute;
   top: 0;
@@ -70,6 +57,10 @@ export const Positioner = styled.div`
   &:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
     opacity: 1;
   }
+
+  ${breakpoint("tablet")`
+    display: block;
+  `}
 `;
 
 export default Toggle;