From eb9be6894e09d740eea7fe53cb7955ca1b659011 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 21 Jun 2023 23:50:24 -0700
Subject: [PATCH] Redesign settings profile (#353)

* Redesign settings profile

* Fix spacing

* Fix Company creation
---
 .../settings/components/SettingsNavbar.tsx    |  7 ++++-
 .../editable-cell/types/EditableChip.tsx      |  2 --
 .../types/EditableDoubleText.tsx              |  2 +-
 .../editable-cell/types/EditablePhone.tsx     |  2 +-
 .../editable-cell/types/EditableText.tsx      |  2 +-
 .../inputs/__stories__/TextInput.stories.tsx  |  3 +-
 .../ui/components/menu/DropdownMenuSearch.tsx |  5 ++--
 .../section-titles/MainSectionTitle.tsx       | 17 +++++++++++
 .../section-titles/SubSectionTitle.tsx        | 17 +++++++++++
 .../table/table-header/TableHeader.tsx        |  2 +-
 .../ui/layout/navbar/NavWorkspaceButton.tsx   |  2 +-
 front/src/modules/ui/layout/styles/texts.ts   |  2 +-
 front/src/pages/companies/Companies.tsx       |  7 ++++-
 front/src/pages/settings/SettingsProfile.tsx  | 29 ++++++++++++-------
 14 files changed, 74 insertions(+), 25 deletions(-)
 create mode 100644 front/src/modules/ui/components/section-titles/MainSectionTitle.tsx
 create mode 100644 front/src/modules/ui/components/section-titles/SubSectionTitle.tsx

diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx
index c5f238cc4..cce5c0d2c 100644
--- a/front/src/modules/settings/components/SettingsNavbar.tsx
+++ b/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}
         />
diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
index fbdb6b632..19febec63 100644
--- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
+++ b/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}
diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
index e5bb859bf..12e821f08 100644
--- a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
+++ b/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}
diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
index e9da7ad30..9d3a7c7dc 100644
--- a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
+++ b/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}
 `;
diff --git a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx
index 00bf0845a..38a6e3c9b 100644
--- a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx
+++ b/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}
 `;
diff --git a/front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx b/front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx
index 4e0476f52..20726111a 100644
--- a/front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx
+++ b/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');
diff --git a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx b/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
index 5909d269a..cbe65b125 100644
--- a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
+++ b/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`
diff --git a/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx b/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx
new file mode 100644
index 000000000..78a357654
--- /dev/null
+++ b/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>;
+}
diff --git a/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx b/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx
new file mode 100644
index 000000000..d850f3b25
--- /dev/null
+++ b/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>;
+}
diff --git a/front/src/modules/ui/components/table/table-header/TableHeader.tsx b/front/src/modules/ui/components/table/table-header/TableHeader.tsx
index fb5741981..bc60e9653 100644
--- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx
+++ b/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};
   }
 `;
 
diff --git a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
index 16dcf39a0..e074dd818 100644
--- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
+++ b/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)};
 `;
diff --git a/front/src/modules/ui/layout/styles/texts.ts b/front/src/modules/ui/layout/styles/texts.ts
index a52685fb8..47348206c 100644
--- a/front/src/modules/ui/layout/styles/texts.ts
+++ b/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,
diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx
index c44de5900..ce7006bc1 100644
--- a/front/src/pages/companies/Companies.tsx
+++ b/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();
diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx
index b49ca0b58..dc1f4823f 100644
--- a/front/src/pages/settings/SettingsProfile.tsx
+++ b/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" />
-        <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>
   );