Feat/improve mobile display (#843)

* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-23 19:53:35 +02:00
committed by GitHub
parent 742791bd92
commit 21d5133564
45 changed files with 464 additions and 315 deletions

View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicker';
import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { useColorScheme } from '@/ui/themes/hooks/useColorScheme';
import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
@ -27,7 +27,7 @@ export function SettingsExperience() {
const { colorScheme, setColorScheme } = useColorScheme();
return (
<NoTopBarContainer>
<SubMenuTopBarContainer>
<div>
<StyledContainer>
<MainSectionTitle>Experience</MainSectionTitle>
@ -37,6 +37,6 @@ export function SettingsExperience() {
</StyledSectionContainer>
</StyledContainer>
</div>
</NoTopBarContainer>
</SubMenuTopBarContainer>
);
}

View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { EmailField } from '@/settings/profile/components/EmailField';
import { NameFields } from '@/settings/profile/components/NameFields';
import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
@ -26,7 +26,7 @@ const StyledSectionContainer = styled.div`
export function SettingsProfile() {
return (
<NoTopBarContainer>
<SubMenuTopBarContainer>
<div>
<StyledContainer>
<MainSectionTitle>Profile</MainSectionTitle>
@ -50,6 +50,6 @@ export function SettingsProfile() {
</StyledSectionContainer>
</StyledContainer>
</div>
</NoTopBarContainer>
</SubMenuTopBarContainer>
);
}

View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { NameField } from '@/settings/workspace/components/NameField';
import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
@ -24,7 +24,7 @@ const StyledSectionContainer = styled.div`
export function SettingsWorksapce() {
return (
<NoTopBarContainer>
<SubMenuTopBarContainer>
<div>
<StyledContainer>
<MainSectionTitle>General</MainSectionTitle>
@ -41,6 +41,6 @@ export function SettingsWorksapce() {
</StyledSectionContainer>
</StyledContainer>
</div>
</NoTopBarContainer>
</SubMenuTopBarContainer>
);
}

View File

@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { Button } from '@/ui/button/components/Button';
import { IconTrash } from '@/ui/icon';
import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
@ -75,7 +75,7 @@ export function SettingsWorkspaceMembers() {
};
return (
<NoTopBarContainer>
<SubMenuTopBarContainer>
<StyledContainer>
<MainSectionTitle>Members</MainSectionTitle>
{workspace?.inviteHash && (
@ -112,6 +112,6 @@ export function SettingsWorkspaceMembers() {
/>
))}
</StyledContainer>
</NoTopBarContainer>
</SubMenuTopBarContainer>
);
}