Uniformize folder structure (#693)

* Uniformize folder structure * Fix icons * Fix icons * Fix tests * Fix tests
2023-07-16 14:29:28 -07:00
parent 900ec5572f
commit 6ced8434bd
462 changed files with 931 additions and 960 deletions
--- a/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+
+import NavCollapseButton from './NavCollapseButton';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  align-self: flex-start;
+  background: inherit;
+  border: 0;
+  display: flex;
+  height: 34px;
+  justify-content: space-between;
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  user-select: none;
+`;
+
+const LogoAndNameContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+type StyledLogoProps = {
+  logo?: string | null;
+};
+
+const StyledLogo = styled.div<StyledLogoProps>`
+  background: url(${(props) => props.logo});
+  background-size: cover;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 16px;
+  width: 16px;
+`;
+
+const StyledName = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+function NavWorkspaceButton() {
+  const currentUser = useRecoilValue(currentUserState);
+
+  const currentWorkspace = currentUser?.workspaceMember?.workspace;
+  const DEFAULT_LOGO =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
+
+  return (
+    <StyledContainer>
+      <LogoAndNameContainer>
+        <StyledLogo
+          logo={
+            currentWorkspace?.logo
+              ? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
+              : DEFAULT_LOGO
+          }
+        ></StyledLogo>
+        <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
+      </LogoAndNameContainer>
+      <NavCollapseButton />
+    </StyledContainer>
+  );
+}
+
+export default NavWorkspaceButton;