Misc fixes

2023-08-10 17:16:27 -07:00
parent 20b641bfe6
commit e61c263b1a
16 changed files with 109 additions and 42 deletions
--- a/front/src/modules/activities/components/TaskList.tsx
+++ b/front/src/modules/activities/components/TaskList.tsx
@ -20,6 +20,7 @@ const StyledContainer = styled.div`

 const StyledTitle = styled.h3`
  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
  margin-bottom: ${({ theme }) => theme.spacing(4)};
  margin-top: ${({ theme }) => theme.spacing(4)};
 `;
--- a/front/src/modules/companies/components/CompanyTeam.tsx
+++ b/front/src/modules/companies/components/CompanyTeam.tsx
@ -63,8 +63,12 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
            <StyledTitle>Team</StyledTitle>
          </StyledTitleContainer>
          <StyledListContainer>
-            {data?.people?.map((person) => (
-              <PeopleCard key={person.id} person={person} />
+            {data?.people?.map((person, id) => (
+              <PeopleCard
+                key={person.id}
+                person={person}
+                hasBottomBorder={id !== data.people.length - 1}
+              />
            ))}
          </StyledListContainer>
        </StyledContainer>
--- a/front/src/modules/favorites/components/Favorites.tsx
+++ b/front/src/modules/favorites/components/Favorites.tsx
@ -31,6 +31,7 @@ export function Favorites() {
              icon={
                <Avatar
                  key={id}
+                  colorId={person.id}
                  avatarUrl={person.avatarUrl ?? ''}
                  type="rounded"
                  placeholder={`${person.firstName} ${person.lastName}`}
--- a/front/src/modules/people/components/PeopleCard.tsx
+++ b/front/src/modules/people/components/PeopleCard.tsx
@ -4,14 +4,17 @@ import styled from '@emotion/styled';
 import { Avatar } from '@/users/components/Avatar';
 import { Person } from '~/generated/graphql';

-export type PeopleCardPropsType = {
+export type PeopleCardProps = {
  person: Pick<Person, 'id' | 'avatarUrl' | 'displayName' | 'jobTitle'>;
+  hasBottomBorder?: boolean;
 };

-const StyledCard = styled.div`
+const StyledCard = styled.div<{ hasBottomBorder: boolean }>`
  align-items: center;
  align-self: stretch;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid
+    ${({ theme, hasBottomBorder }) =>
+      hasBottomBorder ? theme.border.color.light : 'transparent'};
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
  height: ${({ theme }) => theme.spacing(8)};
@ -49,10 +52,16 @@ const StyledJobTitle = styled.div`
  }
 `;

-export function PeopleCard({ person }: PeopleCardPropsType) {
+export function PeopleCard({
+  person,
+  hasBottomBorder = true,
+}: PeopleCardProps) {
  const navigate = useNavigate();
  return (
-    <StyledCard onClick={() => navigate(`/person/${person.id}`)}>
+    <StyledCard
+      onClick={() => navigate(`/person/${person.id}`)}
+      hasBottomBorder={hasBottomBorder}
+    >
      <Avatar
        size="lg"
        type="rounded"
@ -61,7 +70,7 @@ export function PeopleCard({ person }: PeopleCardPropsType) {
      />
      <StyledCardInfo>
        <StyledTitle>{person.displayName}</StyledTitle>
-        <StyledJobTitle> {person.jobTitle ?? 'Add job title'}</StyledJobTitle>
+        {person.jobTitle && <StyledJobTitle>{person.jobTitle}</StyledJobTitle>}
      </StyledCardInfo>
    </StyledCard>
  );
--- a/front/src/modules/people/constants/peopleViewFields.tsx
+++ b/front/src/modules/people/constants/peopleViewFields.tsx
@ -123,7 +123,7 @@ export const peopleViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
  } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
  {
    id: 'x',
-    columnLabel: 'X',
+    columnLabel: 'Twitter',
    columnIcon: <IconBrandX />,
    columnSize: 150,
    columnOrder: 9,
--- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
+++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
@ -48,8 +48,8 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
  return (
    <RecoilScope SpecificContext={FieldContext}>
      <DoubleTextInputEdit
-        firstValuePlaceholder={'First name'}
-        secondValuePlaceholder={'Last name'}
+        firstValuePlaceholder={'First name'} // Hack: Fake character to prevent password-manager from filling the field
+        secondValuePlaceholder={'Last name'} // Hack: Fake character to prevent password-manager from filling the field
        firstValue={internalValueFirstName ?? ''}
        secondValue={internalValueLastName ?? ''}
        onChange={handleChange}
--- a/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx
+++ b/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx
@ -20,13 +20,13 @@ type OwnProps = {

 const checkUrlType = (url: string) => {
  if (
-    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/.test(
+    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
      url,
    )
  ) {
    return LinkType.LinkedIn;
  }
-  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?$/i)) {
+  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
    return LinkType.Twitter;
  }

--- a/front/src/modules/ui/link/components/RoundedLink.tsx
+++ b/front/src/modules/ui/link/components/RoundedLink.tsx
@ -30,7 +30,7 @@ export function RoundedLink({ children, href, onClick }: OwnProps) {
            <Chip
              label={`${children}`}
              variant={ChipVariant.Rounded}
-              size={ChipSize.Large}
+              size={ChipSize.Small}
            />
          </ReactLink>
        </StyledClickable>
--- a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx
@ -9,7 +9,9 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode';
+import { useEditableCell } from '../hooks/useEditableCell';
 import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';

 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
@ -39,6 +41,7 @@ type OwnProps = {
  editHotkeyScope?: HotkeyScope;
  transparent?: boolean;
  maxContentWidth?: number;
+  useEditButton?: boolean;
  onSubmit?: () => void;
  onCancel?: () => void;
 };
@ -55,27 +58,19 @@ export function EditableCell({
  editHotkeyScope,
  transparent = false,
  maxContentWidth,
+  useEditButton,
 }: OwnProps) {
-  const { isCurrentCellInEditMode, setCurrentCellInEditMode } =
-    useCurrentCellEditMode();
+  const { isCurrentCellInEditMode } = useCurrentCellEditMode();
  const [isHovered, setIsHovered] = useState(false);

-  function isValidUrl(value: string) {
-    let testUrl = value;
-    if (testUrl && !testUrl.startsWith('http')) {
-      testUrl = 'http://' + testUrl;
-    }
-    try {
-      new URL(testUrl);
-      return true;
-    } catch (err) {
-      return false;
-    }
-  }
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();

-  const handleClick = () => {
-    setCurrentCellInEditMode();
-  };
+  const { openEditableCell } = useEditableCell();
+
+  function handlePenClick() {
+    setSoftFocusOnCurrentCell();
+    openEditableCell();
+  }

  function handleContainerMouseEnter() {
    setIsHovered(true);
@ -85,9 +80,7 @@ export function EditableCell({
    setIsHovered(false);
  }

-  const value = nonEditModeContent.props.value;
-  const showEditButton =
-    !isCurrentCellInEditMode && isValidUrl(value) && isHovered;
+  const showEditButton = useEditButton && isHovered && !isCurrentCellInEditMode;

  const hasSoftFocus = useIsSoftFocusOnCurrentCell();

@ -124,7 +117,7 @@ export function EditableCell({
                <IconButton
                  variant="shadow"
                  size="small"
-                  onClick={handleClick}
+                  onClick={handlePenClick}
                  icon={<IconPencil size={14} />}
                />
              </StyledEditButtonContainer>
--- a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
@ -16,9 +16,9 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
  margin-top: -1px;

  max-width: ${({ maxContentWidth }) =>
-    maxContentWidth ? `${maxContentWidth}px` : 'auto'};
+    maxContentWidth ? `${maxContentWidth}px` : 'none'};
  min-height: 100%;
-  min-width: 100%;
+  min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};

  position: absolute;
  right: ${(props) =>
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx
@ -21,6 +21,7 @@ export function GenericEditableRelationCell({
 }: OwnProps) {
  return (
    <EditableCell
+      maxContentWidth={160}
      editModeHorizontalAlign={editModeHorizontalAlign}
      editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
      editModeContent={
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx
@ -32,6 +32,7 @@ export function GenericEditableURLCell({

  return (
    <EditableCell
+      useEditButton
      editModeHorizontalAlign={editModeHorizontalAlign}
      editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
      nonEditModeContent={