admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Tab design improvements (#7307)

Browse Source 
## 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>
This commit is contained in:
Arafat Hossain
2024-10-05 15:39:12 +06:00
committed by GitHub
parent 16f2033170
commit 4d67787fa2
2 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -28,10 +28,18 @@ import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent'; import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
import { RightDrawerRouter } from './RightDrawerRouter'; import { RightDrawerRouter } from './RightDrawerRouter';
const StyledContainer = styled(motion.div)` const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.primary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium}; border-left: ${({ theme, isRightDrawerMinimized }) =>
box-shadow: ${({ theme }) => theme.boxShadow.strong}; 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; height: 100dvh;
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: fixed;
@ -157,6 +165,7 @@ export const RightDrawer = () => {
return ( return (
<StyledContainer <StyledContainer
isRightDrawerMinimized={isRightDrawerMinimized}
animate={targetVariantForAnimation} animate={targetVariantForAnimation}
variants={animationVariants} variants={animationVariants}
transition={{ transition={{

2
packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
View File

@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { styled } from '@linaria/react';
import { THEME_COMMON } from '@ui/theme'; import { THEME_COMMON } from '@ui/theme';