From 4d67787fa283bfce5583b9cec0a908159270f9b6 Mon Sep 17 00:00:00 2001
From: Arafat Hossain <43510343+ArafatOSDev@users.noreply.github.com>
Date: Sat, 5 Oct 2024 15:39:12 +0600
Subject: [PATCH] Tab design improvements (#7307)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What does this PR do?
Improve minimize tab design.

Fixes #7150

<img width="329" alt="Screenshot 2024-09-28 at 11 46 35 AM"
src="https://github.com/user-attachments/assets/84eb058f-845f-4866-8428-ed0c1df619a8">

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../right-drawer/components/RightDrawer.tsx       | 15 ++++++++++++---
 .../tooltip/OverflowingTextWithTooltip.tsx        |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
index d28366027..92ed242e7 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@@ -28,10 +28,18 @@ import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 import { RightDrawerRouter } from './RightDrawerRouter';
 
-const StyledContainer = styled(motion.div)`
+const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
   background: ${({ theme }) => theme.background.primary};
-  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  border-left: ${({ theme, isRightDrawerMinimized }) =>
+    isRightDrawerMinimized
+      ? `1px solid ${theme.border.color.strong}`
+      : `1px solid ${theme.border.color.medium}`};
+  border-top: ${({ theme, isRightDrawerMinimized }) =>
+    isRightDrawerMinimized ? `1px solid ${theme.border.color.strong}` : 'none'};
+  border-top-left-radius: ${({ theme, isRightDrawerMinimized }) =>
+    isRightDrawerMinimized ? theme.border.radius.md : '0'};
+  box-shadow: ${({ theme, isRightDrawerMinimized }) =>
+    isRightDrawerMinimized ? 'none' : theme.boxShadow.light};
   height: 100dvh;
   overflow-x: hidden;
   position: fixed;
@@ -157,6 +165,7 @@ export const RightDrawer = () => {
 
   return (
     <StyledContainer
+      isRightDrawerMinimized={isRightDrawerMinimized}
       animate={targetVariantForAnimation}
       variants={animationVariants}
       transition={{
diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
index c73cd0fda..7f8df1450 100644
--- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
@@ -1,6 +1,6 @@
+import { styled } from '@linaria/react';
 import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { styled } from '@linaria/react';
 
 import { THEME_COMMON } from '@ui/theme';