Redesign settings profile (#353)

* Redesign settings profile

* Fix spacing

* Fix Company creation

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -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}
         />

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

@@ -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}

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

@@ -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}

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

@@ -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}
 `;

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

@@ -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}
 `;

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

@@ -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');

front/src/modules/ui/components/menu/DropdownMenuSearch.tsx

@@ -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`

front/src/modules/ui/components/section-titles/MainSectionTitle.tsx

@@ -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>;
+}

front/src/modules/ui/components/section-titles/SubSectionTitle.tsx

@@ -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>;
+}

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

@@ -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};
   }
 `;
 

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -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)};
 `;

front/src/modules/ui/layout/styles/texts.ts

@@ -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,

front/src/pages/companies/Companies.tsx

@@ -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();

front/src/pages/settings/SettingsProfile.tsx

@@ -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" />
+        <MainSectionTitle>Profile</MainSectionTitle>
-        <div>
+        <SubSectionTitle>Name</SubSectionTitle>
-          <h5>Name</h5>
+        <TextInput
-          <span>{currentUser?.displayName} </span>
+          value={currentUser?.displayName}
-        </div>
+          disabled
-        <div>
+          fullWidth
-          <h5>Email</h5>
+          key={'id-' + currentUser?.id}
-          <span>{currentUser?.email} </span>
+        />
-        </div>
+        <SubSectionTitle>Email</SubSectionTitle>
+        <TextInput
+          value={currentUser?.email}
+          disabled
+          fullWidth
+          key={'email-' + currentUser?.id}
+        />
       </StyledContainer>
     </NoTopBarContainer>
   );