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

Redesign settings profile (#353)

Browse Source 
* Redesign settings profile

* Fix spacing

* Fix Company creation
This commit is contained in:
Charles Bochet
2023-06-21 23:50:24 -07:00
committed by GitHub
parent 3c1851b3c9
commit eb9be6894e
14 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -1,3 +1,4 @@
import { useCallback } from 'react';
import { useMatch, useResolvedPath } from 'react-router-dom';
import { useTheme } from '@emotion/react';
@ -14,6 +15,10 @@ import NavTitle from '@/ui/layout/navbar/NavTitle';
import SubNavbarContainer from '@/ui/layout/navbar/sub-navbar/SubNavBarContainer';
export function SettingsNavbar() {
const logout = useCallback(() => {
removeTokens();
window.location.href = '/';
}, []);
const theme = useTheme();
return (
<SubNavbarContainer backButtonTitle="Settings">
@ -58,7 +63,7 @@ export function SettingsNavbar() {
<NavTitle label="Other" />
<NavItem
label="Logout"
onClick={removeTokens}
onClick={logout}
icon={<IconLogout size={theme.iconSizeMedium} />}
danger={true}
/>

2
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -19,8 +19,6 @@ export type EditableChipProps = {
// TODO: refactor
const StyledInplaceInput = styled.input`
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
width: 100%;
${textInputStyle}

2
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
View File

@ -27,7 +27,7 @@ const StyledContainer = styled.div`
const StyledEditInplaceInput = styled.input`
height: 18px;
margin: 0px ${(props) => props.theme.spacing(2)};
margin: 0;
width: 45%;
${textInputStyle}

2
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -19,7 +19,7 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
margin: 0px ${(props) => props.theme.spacing(2)};
margin: 0;
width: 100%;
${textInputStyle}
`;

2
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -18,7 +18,7 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledInplaceInput = styled.input<StyledEditModeProps>`
margin: 0px ${(props) => props.theme.spacing(2)};
margin: 0;
width: 100%;
${textInputStyle}
`;

3
front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx
View File

@ -24,9 +24,8 @@ export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(changeJestFn).toHaveBeenCalledTimes(0);
const input = canvas.getByRole('textbox');
await userEvent.type(input, 'cou');
await userEvent.type(input, 'cou', { delay: 100 });
expect(changeJestFn).toHaveBeenNthCalledWith(1, 'A good value c');
expect(changeJestFn).toHaveBeenNthCalledWith(2, 'A good value co');

5
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
View File

@ -4,7 +4,6 @@ import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
export const DropdownMenuSearchContainer = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(2)};
--vertical-padding: ${(props) => props.theme.spacing(1)};
align-items: center;
@ -13,9 +12,9 @@ export const DropdownMenuSearchContainer = styled.div`
display: flex;
flex-direction: row;
height: calc(36px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
padding: var(--vertical-padding) 0;
width: calc(100% - 2 * var(--horizontal-padding));
width: calc(100%);
`;
const StyledEditModeSearchInput = styled.input`

17
front/src/modules/ui/components/section-titles/MainSectionTitle.tsx Normal file
View File

@ -0,0 +1,17 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
type OwnProps = {
children: ReactNode;
};
const StyledMainSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80};
font-size: ${({ theme }) => theme.fontSizeExtraLarge};
font-weight: ${({ theme }) => theme.fontWeightBold};
line-height: 1.5;
`;
export function MainSectionTitle({ children }: OwnProps) {
return <StyledMainSectionTitle>{children}</StyledMainSectionTitle>;
}

17
front/src/modules/ui/components/section-titles/SubSectionTitle.tsx Normal file
View File

@ -0,0 +1,17 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
type OwnProps = {
children: ReactNode;
};
const StyledSubSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80};
font-size: ${({ theme }) => theme.fontSizeMedium};
font-weight: ${({ theme }) => theme.fontWeightBold};
line-height: 1.5;
`;
export function SubSectionTitle({ children }: OwnProps) {
return <StyledSubSectionTitle>{children}</StyledSubSectionTitle>;
}

2
front/src/modules/ui/components/table/table-header/TableHeader.tsx
View File

@ -46,7 +46,7 @@ const StyledIcon = styled.div`
margin-right: ${(props) => props.theme.spacing(2)};
& > svg {
font-size: ${(props) => props.theme.fontSizeLarge};
font-size: ${(props) => props.theme.iconSizeSmall};
}
`;

2
front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
View File

@ -41,7 +41,7 @@ const StyledLogo = styled.div<StyledLogoProps>`
const StyledName = styled.div`
color: ${(props) => props.theme.text80};
font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeLarge};
font-size: ${(props) => props.theme.fontSizeMedium};
font-weight: 500;
margin-left: ${(props) => props.theme.spacing(1)};
`;

2
front/src/modules/ui/layout/styles/texts.ts
View File

@ -2,7 +2,7 @@ export const commonText = {
fontSizeExtraSmall: '0.85rem',
fontSizeSmall: '0.92rem',
fontSizeMedium: '1rem',
fontSizeLarge: '1.08rem',
fontSizeLarge: '1.23rem',
fontSizeExtraLarge: '1.54rem',
fontWeightMedium: 500,

7
front/src/pages/companies/Companies.tsx
View File

@ -1,4 +1,5 @@
import { useCallback, useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { v4 as uuidv4 } from 'uuid';
@ -6,6 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
import {
CompaniesSelectedSortType,
defaultOrderBy,
GET_COMPANIES,
useCompaniesQuery,
} from '@/companies/services';
import {
@ -67,7 +69,10 @@ export function Companies() {
createdAt: new Date().toISOString(),
};
await insertCompany({ variables: newCompany });
await insertCompany({
variables: newCompany,
refetchQueries: [getOperationName(GET_COMPANIES) ?? ''],
});
}
const companiesColumns = useCompaniesColumns();

29
front/src/pages/settings/SettingsProfile.tsx
View File

@ -2,28 +2,37 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { TextInput } from '@/ui/components/inputs/TextInput';
import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${(props) => props.theme.spacing(8)};
width: 490px;
`;
export function SettingsProfile() {
const currentUser = useRecoilValue(currentUserState);
return (
<NoTopBarContainer>
<StyledContainer>
<TopTitle title="Profile" />
<div>
<h5>Name</h5>
<span>{currentUser?.displayName} </span>
</div>
<div>
<h5>Email</h5>
<span>{currentUser?.email} </span>
</div>
<MainSectionTitle>Profile</MainSectionTitle>
<SubSectionTitle>Name</SubSectionTitle>
<TextInput
value={currentUser?.displayName}
disabled
fullWidth
key={'id-' + currentUser?.id}
/>
<SubSectionTitle>Email</SubSectionTitle>
<TextInput
value={currentUser?.email}
disabled
fullWidth
key={'email-' + currentUser?.id}
/>
</StyledContainer>
</NoTopBarContainer>
);