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

Align Workspace Switcher with Breadcrumb by Adjusting Height (#6384)

Browse Source 
@Bonapara 
Issue #6375 

This change makes sure the container height is 32px instead of 28px.
should the container inside it should also be 32px, please refer video
below for context


https://github.com/user-attachments/assets/fe97f0de-e1fd-4fda-a9a7-e9585469c530


Also skeleton height is 20px (refer video below), the black component in
the video is the skeleton for this particular component.
What should be skeletons height?


https://github.com/user-attachments/assets/0956c8d9-8e4e-4c20-bb71-7fb1e2cba4fd

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-07-25 17:29:46 +05:30
committed by GitHub
parent d073ebff43
commit 9618639744
7 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
View File

@ -8,22 +8,25 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
const StyledAnimatedContainer = styled(motion.div)`
align-items: center;
display: flex;
justify-content: end;
`;
const StyledItemsContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: 32px;
margin-bottom: auto;
overflow-y: auto;
gap: 12px;
height: calc(100dvh - 32px);
min-width: 216px;
max-width: 216px;
margin-bottom: auto;
max-width: 204px;
min-width: 204px;
overflow-y: auto;
`;
const StyledSkeletonContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: 32px;
@ -32,9 +35,13 @@ const StyledSkeletonContainer = styled.div`
const StyledSkeletonTitleContainer = styled.div`
display: flex;
flex-direction: column;
gap: 6px;
margin-left: 12px;
margin-top: 8px;
justify-content: center;
align-items: flex-start;
gap: 10px;
height: 32px;
max-width: 196px;
min-width: 196px;
`;
export const LeftPanelSkeletonLoader = () => {
@ -54,17 +61,18 @@ export const LeftPanelSkeletonLoader = () => {
}}
>
<StyledItemsContainer>
<StyledSkeletonTitleContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
borderRadius={4}
>
<Skeleton width={96} height={16} />
</SkeletonTheme>
</StyledSkeletonTitleContainer>
<StyledSkeletonContainer>
<StyledSkeletonTitleContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
borderRadius={4}
>
<Skeleton width={96} height={16} />
</SkeletonTheme>
</StyledSkeletonTitleContainer>
<MainNavigationDrawerItemsSkeletonLoader length={3} />
<MainNavigationDrawerItemsSkeletonLoader title length={2} />
<MainNavigationDrawerItemsSkeletonLoader title length={3} />
</StyledSkeletonContainer>
</StyledItemsContainer>