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

MQ Facepaint introduced (#4169)

Browse Source 
* MQ Facepaint introduced

* Remove useDeviceType

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Kanav Arora
2024-02-25 02:08:27 +05:30
committed by GitHub
parent 1b04dfe3c6
commit a9b0f88521
11 changed files with 132 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
View File

@ -3,24 +3,23 @@
import styled from '@emotion/styled';
import { useRouter } from 'next/navigation';
import {
DeviceType,
useDeviceType,
} from '@/app/_components/client-utils/useDeviceType';
import { IconBook } from '@/app/_components/ui/icons';
import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';
import UserGuideSidebarSection from '@/app/_components/user-guide/UserGuideSidebarSection';
import { UserGuideIndex } from '@/content/user-guide/constants/UserGuideIndex';
const StyledContainer = styled.div<{ isTablet: boolean }>`
width: ${({ isTablet }) => (isTablet ? '30%' : '20%')};
background: ${Theme.background.secondary};
display: flex;
flex-direction: column;
border-right: 1px solid ${Theme.background.transparent.medium};
border-bottom: 1px solid ${Theme.background.transparent.medium};
padding: ${Theme.spacing(10)} ${Theme.spacing(3)};
gap: ${Theme.spacing(6)};
const StyledContainer = styled.div`
${mq({
width: ['20%', '30%', '20%'],
display: ['none', 'flex', 'flex'],
flexDirection: 'column',
background: `${Theme.background.secondary}`,
borderRight: `1px solid ${Theme.background.transparent.medium}`,
borderBottom: `1px solid ${Theme.background.transparent.medium}`,
padding: `${Theme.spacing(10)} ${Theme.spacing(3)}`,
gap: `${Theme.spacing(6)}`,
})};
`;
const StyledHeading = styled.div`
@ -55,9 +54,8 @@ const StyledHeadingText = styled.div`
const UserGuideSidebar = () => {
const router = useRouter();
const isTablet = useDeviceType() === DeviceType.TABLET;
return (
<StyledContainer isTablet={isTablet}>
<StyledContainer>
<StyledHeading>
<StyledIconContainer>
<IconBook size={Theme.icon.size.md} />