Redesign settings profile (#353)

* Redesign settings profile

* Fix spacing

* Fix Company creation

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" />
-        <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>
   );