Add dueDate and assignee on notes (#988)

* Add dueDate and assignee on notes

* Fix tests

* Fix tests

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -99,7 +99,9 @@ const StyledCheckboxContainer = styled.div`
 `;
 
 const StyledFieldContainer = styled.div`
-  width: max-content;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
 `;
 
 export function CompanyBoardCard() {

front/src/modules/companies/constants/companyViewFields.tsx

@@ -1,4 +1,5 @@
 import {
+  IconBrandLinkedin,
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconLink,
@@ -81,7 +82,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
   {
     id: 'linkedin',
     columnLabel: 'LinkedIn',
-    columnIcon: <IconMap />,
+    columnIcon: <IconBrandLinkedin />,
     columnSize: 170,
     columnOrder: 6,
     metadata: {

front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx

@@ -38,6 +38,7 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
             )
           }
           isDisplayModeContentEmpty={!company.accountOwner}
+          isDisplayModeFixHeight={true}
         />
       </RecoilScope>
     </RecoilScope>

front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx

@@ -4,8 +4,8 @@ import { CompanyAccountOwnerPicker } from '@/companies/components/CompanyAccount
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
 import { Company, User } from '~/generated/graphql';
 
-const CompanyAccountOwnerPickerContainer = styled.div`
-  left: 24px;
+const StyledContainer = styled.div`
+  left: 0px;
   position: absolute;
   top: -8px;
 `;
@@ -36,12 +36,12 @@ export function CompanyAccountOwnerPickerFieldEditMode({
   }
 
   return (
-    <CompanyAccountOwnerPickerContainer>
+    <StyledContainer>
       <CompanyAccountOwnerPicker
         company={company}
         onCancel={handleCancel}
         onSubmit={handleSubmit}
       />
-    </CompanyAccountOwnerPickerContainer>
+    </StyledContainer>
   );
 }

front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
 
-import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
@@ -10,6 +9,30 @@ type OwnProps = {
   company: Pick<Company, 'id' | 'name'>;
 };
 
+const StyledEditableTitleInput = styled.input<{
+  value: string;
+}>`
+  background: transparent;
+
+  border: none;
+  color: ${({ theme, value }) =>
+    value ? theme.font.color.primary : theme.font.color.light};
+  display: flex;
+  flex-direction: column;
+
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  justify-content: center;
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  outline: none;
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+  text-align: center;
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+`;
+
 export function CompanyNameEditableField({ company }: OwnProps) {
   const [internalValue, setInternalValue] = useState(company.name);
 
@@ -36,27 +59,14 @@ export function CompanyNameEditableField({ company }: OwnProps) {
     });
   }
 
-  async function handleCancel() {
-    setInternalValue(company.name);
-  }
-
   return (
     <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        editModeContent={
-          <InplaceInputText
-            placeholder={'Name'}
-            autoFocus
-            value={internalValue}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={internalValue ?? ''}
-        isDisplayModeContentEmpty={!(internalValue !== '')}
+      <StyledEditableTitleInput
+        autoComplete="off"
+        autoFocus
+        onChange={(event) => handleChange(event.target.value)}
+        onBlur={handleSubmit}
+        value={internalValue}
       />
     </RecoilScope>
   );