From 2fab2266d5597efe93732416296f3de10fdc6fbb Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Wed, 27 Nov 2024 19:26:45 +0100
Subject: [PATCH] feat(front): improve logo component (#8720)

---
 .../src/modules/auth/components/Logo.tsx      | 53 +++++++++----------
 .../twenty-front/src/pages/auth/Invite.tsx    |  2 +-
 .../src/utils/image/getImageAbsoluteURI.ts    | 23 +++++---
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx
index 34ddf069c..9bc9c94ae 100644
--- a/packages/twenty-front/src/modules/auth/components/Logo.tsx
+++ b/packages/twenty-front/src/modules/auth/components/Logo.tsx
@@ -3,65 +3,62 @@ import styled from '@emotion/styled';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 type LogoProps = {
-  workspaceLogo?: string | null;
+  primaryLogo?: string | null;
+  secondaryLogo?: string | null;
 };
 
 const StyledContainer = styled.div`
-  height: 48px;
+  height: ${({ theme }) => theme.spacing(12)};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 
   position: relative;
-  width: 48px;
+  width: ${({ theme }) => theme.spacing(12)};
 `;
 
-const StyledTwentyLogo = styled.img`
+const StyledSecondaryLogo = styled.img`
   border-radius: ${({ theme }) => theme.border.radius.xs};
-  height: 24px;
-  width: 24px;
+  height: ${({ theme }) => theme.spacing(6)};
+  width: ${({ theme }) => theme.spacing(6)};
 `;
 
-const StyledTwentyLogoContainer = styled.div`
+const StyledSecondaryLogoContainer = styled.div`
   align-items: center;
   background-color: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   bottom: ${({ theme }) => `-${theme.spacing(3)}`};
   display: flex;
-  height: 28px;
+  height: ${({ theme }) => theme.spacing(7)};
   justify-content: center;
 
   position: absolute;
   right: ${({ theme }) => `-${theme.spacing(3)}`};
-  width: 28px;
+  width: ${({ theme }) => theme.spacing(7)};
 `;
 
-type StyledMainLogoProps = {
-  logo?: string | null;
-};
-
-const StyledMainLogo = styled.div<StyledMainLogoProps>`
-  background: url(${(props) => props.logo});
+const StyledPrimaryLogo = styled.div<{ src: string }>`
+  background: url(${(props) => props.src});
   background-size: cover;
   height: 100%;
-
   width: 100%;
 `;
 
-export const Logo = ({ workspaceLogo }: LogoProps) => {
-  if (!workspaceLogo) {
-    return (
-      <StyledContainer>
-        <StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
-      </StyledContainer>
-    );
-  }
+export const Logo = (props: LogoProps) => {
+  const defaultPrimaryLogoUrl = `${window.location.origin}/icons/android/android-launchericon-192-192.png`;
+
+  const primaryLogoUrl = getImageAbsoluteURI(
+    props.primaryLogo ?? defaultPrimaryLogoUrl,
+  );
+  const secondaryLogoUrl = getImageAbsoluteURI(props.secondaryLogo);
 
   return (
     <StyledContainer>
-      <StyledMainLogo logo={getImageAbsoluteURI(workspaceLogo)} />
-      <StyledTwentyLogoContainer>
-        <StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
-      </StyledTwentyLogoContainer>
+      <StyledPrimaryLogo src={primaryLogoUrl} />
+      {secondaryLogoUrl && (
+        <StyledSecondaryLogoContainer>
+          <StyledSecondaryLogo src={secondaryLogoUrl} />
+        </StyledSecondaryLogoContainer>
+      )}
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/pages/auth/Invite.tsx b/packages/twenty-front/src/pages/auth/Invite.tsx
index d83e85790..d2488f480 100644
--- a/packages/twenty-front/src/pages/auth/Invite.tsx
+++ b/packages/twenty-front/src/pages/auth/Invite.tsx
@@ -74,7 +74,7 @@ export const Invite = () => {
   return (
     <>
       <AnimatedEaseIn>
-        <Logo workspaceLogo={workspaceFromInviteHash?.logo} />
+        <Logo secondaryLogo={workspaceFromInviteHash?.logo} />
       </AnimatedEaseIn>
       <Title animate>{title}</Title>
       {isDefined(currentWorkspace) ? (
diff --git a/packages/twenty-front/src/utils/image/getImageAbsoluteURI.ts b/packages/twenty-front/src/utils/image/getImageAbsoluteURI.ts
index 819567796..eb2665ec9 100644
--- a/packages/twenty-front/src/utils/image/getImageAbsoluteURI.ts
+++ b/packages/twenty-front/src/utils/image/getImageAbsoluteURI.ts
@@ -1,15 +1,26 @@
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
-export const getImageAbsoluteURI = (imageUrl?: string | null) => {
+type ImageAbsoluteURI<T extends string | null | undefined> = T extends string
+  ? string
+  : null;
+
+export const getImageAbsoluteURI = <T extends string | null | undefined>(
+  imageUrl: T,
+): ImageAbsoluteURI<T> => {
   if (!imageUrl) {
-    return null;
+    return null as ImageAbsoluteURI<T>;
   }
 
-  if (imageUrl?.startsWith('https:') || imageUrl?.startsWith('http:')) {
-    return imageUrl;
+  if (imageUrl.startsWith('https:') || imageUrl.startsWith('http:')) {
+    return imageUrl as ImageAbsoluteURI<T>;
   }
 
-  const serverFilesUrl = REACT_APP_SERVER_BASE_URL;
+  const serverFilesUrl = new URL(REACT_APP_SERVER_BASE_URL);
 
-  return `${serverFilesUrl}/files/${imageUrl}`;
+  serverFilesUrl.pathname = `/files/`;
+  serverFilesUrl.pathname += imageUrl.startsWith('/')
+    ? imageUrl.slice(1)
+    : imageUrl;
+
+  return serverFilesUrl.toString() as ImageAbsoluteURI<T>;
 };