feat: add alternate project finder to left navbar

frontend/src/shared/components/TopNavbar/Styles.ts

@@ -41,12 +41,51 @@ export const BreadcrumpSeparator = styled.span`
   font-size: 18px;
   margin: 0px 10px;
 `;
+export const ProjectInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const ProjectSwitchInner = styled.div`
+  border-radius: 12px;
+  height: 48px;
+  width: 48px;
+  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.05);
+  align-items: center;
+  background: #cbd4db;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: center;
+
+  background-color: ${props => props.theme.colors.primary};
+`;
+
+export const ProjectSwitch = styled.div`
+  align-self: center;
+  position: relative;
+  margin-right: 16px;
+  cursor: pointer;
+  &::after {
+    border-radius: 12px;
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  &:hover::after {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
 
 export const ProjectActions = styled.div`
   flex: 1;
   align-items: flex-start;
   display: flex;
-  flex-direction: column;
   min-width: 1px;
 `;
 

frontend/src/shared/components/TopNavbar/index.tsx

@@ -7,6 +7,7 @@ import { RoleCode } from 'shared/generated/graphql';
 import NOOP from 'shared/utils/noop';
 import { useHistory } from 'react-router';
 import {
+  ProjectInfo,
   NavbarLink,
   TaskcafeLogo,
   TaskcafeTitle,
@@ -14,6 +15,7 @@ import {
   LogoContainer,
   NavSeparator,
   IconContainerWrapper,
+  ProjectSwitch,
   ProjectNameWrapper,
   ProjectNameSpan,
   ProjectNameTextarea,
@@ -33,6 +35,7 @@ import {
   ProfileNameSecondary,
   ProjectMember,
   ProjectMembers,
+  ProjectSwitchInner,
 } from './Styles';
 
 type IconContainerProps = {
@@ -220,43 +223,50 @@ const NavBar: React.FC<NavBarProps> = ({
   };
   const history = useHistory();
   const { showPopup } = usePopup();
+  const $finder = useRef<HTMLDivElement>(null);
   return (
     <NavbarWrapper>
       <NavbarHeader>
         <ProjectActions>
-          <ProjectMeta>
+          <ProjectSwitch ref={$finder} onClick={e => onOpenProjectFinder($finder)}>
+            <ProjectSwitchInner>
+              <TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
+            </ProjectSwitchInner>
+          </ProjectSwitch>
+          <ProjectInfo>
+            <ProjectMeta>
+              {name && (
+                <ProjectHeading
+                  onFavorite={onFavorite}
+                  onOpenSettings={onOpenSettings}
+                  name={name}
+                  canEditProjectName={canEditProjectName}
+                  onSaveProjectName={onSaveName}
+                />
+              )}
+            </ProjectMeta>
             {name && (
-              <ProjectHeading
+              <ProjectTabs>
-                onFavorite={onFavorite}
+                {menuType &&
-                onOpenSettings={onOpenSettings}
+                  menuType.map((menu, idx) => {
-                name={name}
+                    return (
-                canEditProjectName={canEditProjectName}
+                      <ProjectTab
-                onSaveProjectName={onSaveName}
+                        key={menu.name}
-              />
+                        to={menu.link}
+                        exact
+                        onClick={() => {
+                          // TODO
+                        }}
+                      >
+                        {menu.name}
+                      </ProjectTab>
+                    );
+                  })}
+              </ProjectTabs>
             )}
-          </ProjectMeta>
+          </ProjectInfo>
-          {name && (
-            <ProjectTabs>
-              {menuType &&
-                menuType.map((menu, idx) => {
-                  return (
-                    <ProjectTab
-                      key={menu.name}
-                      to={menu.link}
-                      exact
-                      onClick={() => {
-                        // TODO
-                      }}
-                    >
-                      {menu.name}
-                    </ProjectTab>
-                  );
-                })}
-            </ProjectTabs>
-          )}
         </ProjectActions>
         <LogoContainer to="/">
-          <TaskcafeLogo width={32} height={32} />
           <TaskcafeTitle>Taskcafé</TaskcafeTitle>
         </LogoContainer>
         <GlobalActions>

frontend/src/shared/icons/Taskcafe.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import Icon, { IconProps } from './Icon';
 
-const Taskcafe: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+type TaskcafeProps = {
+  innerColor?: string;
+  outerColor?: string;
+} & IconProps;
+
+const Taskcafe: React.FC<TaskcafeProps> = ({
+  innerColor = '#262c49',
+  outerColor = '#7367f0',
+  width = '16px',
+  height = '16px',
+  className,
+}) => {
   return (
     <Icon width={width} height={height} className={className} viewBox="0 0 800 800">
       <path
         d="M371.147 371.04c-59.092 0-106.995 47.903-106.995 106.995 0 59.092 47.903 106.995 106.995 106.995 59.092 0 106.995-47.903 106.995-106.995 0-59.092-47.903-106.996-106.995-106.996zm0 20.708c47.687 0 86.287 38.592 86.287 86.287 0 47.687-38.592 86.286-86.287 86.286-47.687 0-86.286-38.592-86.286-86.286 0-47.688 38.592-86.287 86.286-86.287m60.489 56.201l-9.723-9.8a5.177 5.177 0 00-7.321-.03l-60.984 60.494-25.796-26.006a5.177 5.177 0 00-7.322-.03l-9.802 9.723a5.177 5.177 0 00-.029 7.322l39.166 39.483a5.177 5.177 0 007.321.03l74.46-73.864a5.178 5.178 0 00.03-7.321z"
-        fill="#7367f0"
+        fill={outerColor}
       />
       <path
         d="M264.69 682.877H467.7c56.038 0 101.504-45.465 101.504-101.504h33.835c74.648 0 135.34-60.692 135.34-135.34s-60.692-135.34-135.34-135.34H188.562a25.315 25.315 0 00-25.376 25.377v245.303c0 56.039 45.465 101.504 101.504 101.504zM603.04 378.364c37.324 0 67.67 30.345 67.67 67.67 0 37.323-30.346 67.669-67.67 67.669h-33.835v-135.34zm50.435 406.018H112.75c-50.329 0-64.497-67.67-38.064-67.67h616.746c26.434 0 12.477 67.67-37.958 67.67z"
-        fill="#7367f0"
+        fill={outerColor}
       />
-      <g fill="none" stroke="#7367f0" strokeWidth="3.392">
+      <g fill="none" stroke={outerColor} strokeWidth="3.392">
         <path
           d="M286.302 276.2c-12.491-12.65-24.51-24.821-23.906-35.239.604-10.417 14.068-18.838 26.772-30.358 12.705-11.52 24.65-26.139 14.907-39.935-9.743-13.797-41.175-26.772-40.697-42.89.478-16.119 32.868-35.378 37.236-52.814 4.369-17.435-19.286-33.048-42.944-48.662M374.624 276.2c-12.492-12.65-24.51-24.821-23.907-35.239.604-10.417 14.068-18.838 26.773-30.358 12.704-11.52 24.65-26.139 14.906-39.935-9.742-13.797-41.174-26.772-40.696-42.89.478-16.119 32.867-35.378 37.236-52.814 4.368-17.435-19.287-33.048-42.944-48.662M462.945 276.2c-12.491-12.65-24.51-24.821-23.906-35.239.604-10.417 14.068-18.838 26.772-30.358 12.705-11.52 24.65-26.139 14.907-39.935-9.743-13.797-41.175-26.772-40.697-42.89.478-16.119 32.868-35.378 37.236-52.814 4.369-17.436-19.286-33.048-42.944-48.662"
           strokeWidth="28.00374144"
@@ -20,7 +31,7 @@ const Taskcafe: React.FC<IconProps> = ({ width = '16px', height = '16px', classN
       </g>
       <path
         d="M371.147 363.194c-73.749 0-133.534 59.785-133.534 133.534 0 73.75 59.785 133.535 133.534 133.535 73.75 0 133.535-59.786 133.535-133.535s-59.786-133.534-133.535-133.534zm0 25.845c59.516 0 107.69 48.165 107.69 107.69 0 59.515-48.165 107.688-107.69 107.688-59.515 0-107.689-48.164-107.689-107.689 0-59.515 48.165-107.689 107.69-107.689m75.492 70.142l-12.135-12.232a6.462 6.462 0 00-9.138-.039l-76.11 75.498-32.194-32.456a6.463 6.463 0 00-9.138-.038l-12.233 12.134a6.451 6.451 0 00-.025 9.138l48.88 49.277a6.462 6.462 0 009.138.038l92.93-92.183a6.452 6.452 0 00.024-9.138z"
-        fill="#262c49"
+        fill={innerColor}
       />
     </Icon>
   );