fixes #6499 alignment issue on workspace switcher (#6589)

fix #6499 

- fix the size of workspace switcher to 32px from 40px

![Screenshot 2024-08-09
140212](https://github.com/user-attachments/assets/425c9089-8969-4d59-82ef-10572cfa7027)

- fix alignment issues

![Screenshot 2024-08-09
142357](https://github.com/user-attachments/assets/2e3e76f2-8a81-48e9-86ff-691c11215583)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/hooks/useIsMatchingLocation.ts

@@ -9,7 +9,7 @@ export const useIsMatchingLocation = () => {
   return useCallback(
     (path: string, basePath?: AppBasePath) => {
       const constructedPath = basePath
-        ? new URL(basePath + path, document.location.origin).pathname ?? ''
+        ? (new URL(basePath + path, document.location.origin).pathname ?? '')
         : path;
 
       return !!matchPath(constructedPath, location.pathname);

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -17,7 +17,7 @@ const StyledItemsContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
   height: calc(100dvh - 32px);
   margin-bottom: auto;
   max-width: 204px;

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx

@@ -45,7 +45,7 @@ export const MessageThreadSubscribersChip = ({
       ? `+${numberOfMessageThreadSubscribers - MAX_NUMBER_OF_AVATARS}`
       : null;
 
-  const label = isPrivateThread ? privateLabel : moreAvatarsLabel ?? '';
+  const label = isPrivateThread ? privateLabel : (moreAvatarsLabel ?? '');
 
   return (
     <Chip

packages/twenty-front/src/modules/object-metadata/utils/generateDefaultRecordChipData.ts

@@ -4,7 +4,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 export const generateDefaultRecordChipData = (record: ObjectRecord) => {
   const name = isFieldFullNameValue(record.name)
     ? record.name.firstName + ' ' + record.name.lastName
-    : record.name ?? '';
+    : (record.name ?? '');
 
   return {
     name,

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx

@@ -42,8 +42,8 @@ export const MultiSelectFieldInput = ({
   const [searchFilter, setSearchFilter] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const selectedOptions = fieldDefinition.metadata.options.filter(
-    (option) => fieldValues?.includes(option.value),
+  const selectedOptions = fieldDefinition.metadata.options.filter((option) =>
+    fieldValues?.includes(option.value),
   );
 
   const optionsInDropDown = fieldDefinition.metadata.options;

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -69,7 +69,7 @@ export const RecordDetailRelationSection = ({
   const relationRecords: ObjectRecord[] =
     fieldValue && isToOneObject
       ? [fieldValue as ObjectRecord]
-      : (fieldValue as ObjectRecord[]) ?? [];
+      : ((fieldValue as ObjectRecord[]) ?? []);
 
   const relationRecordIds = relationRecords.map(({ id }) => id);
 

packages/twenty-front/src/modules/spreadsheet-import/utils/findUnmatchedRequiredFields.ts

@@ -6,11 +6,10 @@ export const findUnmatchedRequiredFields = <T extends string>(
   columns: Columns<T>,
 ) =>
   fields
-    .filter(
-      (field) =>
-        field.fieldValidationDefinitions?.some(
-          (validation) => validation.rule === 'required',
-        ),
+    .filter((field) =>
+      field.fieldValidationDefinitions?.some(
+        (validation) => validation.rule === 'required',
+      ),
     )
     .filter(
       (field) =>

packages/twenty-front/src/modules/ui/input/components/Toggle.tsx

@@ -16,7 +16,7 @@ type ContainerProps = {
 const StyledContainer = styled.div<ContainerProps>`
   align-items: center;
   background-color: ${({ theme, isOn, color }) =>
-    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+    isOn ? (color ?? theme.color.blue) : theme.background.quaternary};
   border-radius: 10px;
   cursor: pointer;
   display: flex;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -32,7 +32,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(3.5)};
   height: 100%;
   min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
   padding: ${({ theme }) => theme.spacing(3, 2, 4)};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -15,8 +15,6 @@ const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>`
   display: flex;
   gap: ${({ theme, isMultiWorkspace }) =>
     !isMultiWorkspace ? theme.spacing(2) : null};
-  padding: ${({ theme, isMultiWorkspace }) =>
-    !isMultiWorkspace ? theme.spacing(1) : null};
   height: ${({ theme }) => theme.spacing(8)};
   user-select: none;
 `;