Change to using arrow functions (#1603)

* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/top-bar/TopBar.tsx

@@ -40,20 +40,18 @@ const StyledRightSection = styled.div`
   gap: ${({ theme }) => theme.betweenSiblingsGap};
 `;
 
-export function TopBar({
+export const TopBar = ({
   className,
   leftComponent,
   rightComponent,
   bottomComponent,
   displayBottomBorder = true,
-}: OwnProps) {
-  return (
-    <StyledContainer className={className}>
-      <StyledTopBar displayBottomBorder={displayBottomBorder}>
-        <StyledLeftSection>{leftComponent}</StyledLeftSection>
-        <StyledRightSection>{rightComponent}</StyledRightSection>
-      </StyledTopBar>
-      {bottomComponent}
-    </StyledContainer>
-  );
-}
+}: OwnProps) => (
+  <StyledContainer className={className}>
+    <StyledTopBar displayBottomBorder={displayBottomBorder}>
+      <StyledLeftSection>{leftComponent}</StyledLeftSection>
+      <StyledRightSection>{rightComponent}</StyledRightSection>
+    </StyledTopBar>
+    {bottomComponent}
+  </StyledContainer>
+);