Front small ui fixes (#428)

* fix: add ellipsis in all table cells

* fix: workspace click redirect to home

* fix: add company chip story and edit comment cell story

* fix: remove cursor pointer on workspace name

* fix: snoop pill height

* fix: rebase

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -6,8 +6,8 @@ export const EditableCellNormalModeOuterContainer = styled.div`
   display: flex;
   height: 100%;
   overflow: hidden;
-  padding-left: ${({ theme }) => theme.spacing(2)};
 
+  padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 

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

@@ -11,7 +11,11 @@ export type EditableChipProps = {
   picture: string;
   changeHandler: (updated: string) => void;
   editModeHorizontalAlign?: 'left' | 'right';
-  ChipComponent: ComponentType<{ name: string; picture: string }>;
+  ChipComponent: ComponentType<{
+    name: string;
+    picture: string;
+    isOverlapped?: boolean;
+  }>;
   commentCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
@@ -24,11 +28,17 @@ const StyledInplaceInput = styled.input`
   ${textInputStyle}
 `;
 
-const StyledInplaceShow = styled.div`
+const NoEditModeContainer = styled.div`
+  align-items: center;
   display: flex;
+  justify-content: space-between;
   width: 100%;
 `;
 
+const RightContainer = styled.div`
+  margin-left: ${(props) => props.theme.spacing(1)};
+`;
+
 function EditableChip({
   value,
   placeholder,
@@ -67,20 +77,20 @@ function EditableChip({
         />
       }
       nonEditModeContent={
-        <>
-          <StyledInplaceShow>
-            <ChipComponent name={inputValue} picture={picture} />
-          </StyledInplaceShow>
-          {rightEndContents &&
-            rightEndContents.length > 0 &&
-            rightEndContents.map((content, index) => (
-              <div key={index} onClick={handleRightEndContentClick}>
-                {content}
-              </div>
-            ))}
-        </>
+        <NoEditModeContainer>
+          <ChipComponent name={inputValue} picture={picture} />
+          <RightContainer>
+            {rightEndContents &&
+              rightEndContents.length > 0 &&
+              rightEndContents.map((content, index) => (
+                <div key={index} onClick={handleRightEndContentClick}>
+                  {content}
+                </div>
+              ))}
+          </RightContainer>
+        </NoEditModeContainer>
       }
-    ></EditableCell>
+    />
   );
 }
 

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

@@ -17,6 +17,16 @@ type StyledEditModeProps = {
   isEditMode: boolean;
 };
 
+const StyledRawLink = styled(RawLink)`
+  overflow: hidden;
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
 // TODO: refactor
 const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
   margin: 0;
@@ -48,9 +58,9 @@ export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
         />
       }
       nonEditModeContent={
-        <div>
+        <>
           {isValidPhoneNumber(inputValue) ? (
-            <RawLink
+            <StyledRawLink
               href={parsePhoneNumber(inputValue, 'FR')?.getURI()}
               onClick={(event: MouseEvent<HTMLElement>) => {
                 event.stopPropagation();
@@ -58,11 +68,11 @@ export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
             >
               {parsePhoneNumber(inputValue, 'FR')?.formatInternational() ||
                 inputValue}
-            </RawLink>
+            </StyledRawLink>
           ) : (
-            <RawLink href="#">{inputValue}</RawLink>
+            <StyledRawLink href="#">{inputValue}</StyledRawLink>
           )}
-        </div>
+        </>
       }
     />
   );

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

@@ -24,6 +24,9 @@ const StyledInplaceInput = styled.input<StyledEditModeProps>`
 `;
 
 const StyledNoEditText = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   width: 100%;
 `;
 

front/src/modules/ui/components/links/RawLink.tsx

@@ -3,6 +3,7 @@ import { Link as ReactLink } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 type OwnProps = {
+  className?: string;
   href: string;
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -17,9 +18,9 @@ const StyledClickable = styled.div`
   }
 `;
 
-export function RawLink({ href, children, onClick }: OwnProps) {
+export function RawLink({ className, href, children, onClick }: OwnProps) {
   return (
-    <StyledClickable>
+    <StyledClickable className={className}>
       <ReactLink onClick={onClick} to={href}>
         {children}
       </ReactLink>

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

@@ -70,9 +70,10 @@ const StyledSoonPill = styled.div`
   align-items: center;
   border-radius: 50px;
   background-color: ${({ theme }) => theme.background.transparent.light};
-  font-size: ${({ theme }) => theme.font.size.xs};
-  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}
-    ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+  font-size: ${({ theme }) => theme.font.size.xxs};
+  height: 16px;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   margin-left: auto; // this aligns the pill to the right
 `;
 

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

@@ -22,7 +22,6 @@ const StyledContainer = styled.div`
 
 const LogoAndNameContainer = styled.div`
   align-items: center;
-  cursor: pointer;
   display: flex;
 `;
 

front/src/modules/ui/themes/font.ts

@@ -2,6 +2,7 @@ import { grayScale } from './colors';
 
 const common = {
   size: {
+    xxs: '0.625rem',
     xs: '0.85rem',
     sm: '0.92rem',
     md: '1rem',