Feat/hide board fields (#1271)

* Renamed AuthAutoRouter

* Moved RecoilScope

* Refactored old WithTopBarContainer to make it less transclusive

* Created new add opportunity button and refactored DropdownButton

* Added tests

* Deactivated new eslint rule

* Refactored Table options with new dropdown

* Started BoardDropdown

* Fix lint

* Refactor dropdown openstate

* Fix according to PR

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable twenty/styled-components-prefixed-with-styled */
+import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-export const ShowPageContainer = styled.div`
+export const StyledShowPageContainer = styled.div`
   display: flex;
   flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
   gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')};
@@ -11,3 +11,11 @@ export const ShowPageContainer = styled.div`
   overflow-x: ${() => (useIsMobile() ? 'hidden' : 'auto')};
   width: ${() => (useIsMobile() ? `calc(100% - 2px);` : '100%')};
 `;
+
+export type ShowPageContainerProps = {
+  children: ReactElement[];
+};
+
+export function ShowPageContainer({ children }: ShowPageContainerProps) {
+  return <StyledShowPageContainer>{children} </StyledShowPageContainer>;
+}

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable twenty/styled-components-prefixed-with-styled */
+import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-export const ShowPageLeftContainer = styled.div`
+const StyledShowPageLeftContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   border-bottom-left-radius: 8px;
   border-right: 1px solid
@@ -24,3 +24,13 @@ export const ShowPageLeftContainer = styled.div`
 
   z-index: 10;
 `;
+
+export type ShowPageLeftContainerProps = {
+  children: ReactElement[];
+};
+
+export function ShowPageLeftContainer({
+  children,
+}: ShowPageLeftContainerProps) {
+  return <StyledShowPageLeftContainer>{children} </StyledShowPageLeftContainer>;
+}

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable twenty/styled-components-prefixed-with-styled */
+import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-export const ShowPageRightContainer = styled.div`
+export const StyledShowPageRightContainer = styled.div`
   display: flex;
   flex: 1 0 0;
   flex-direction: column;
@@ -15,3 +15,15 @@ export const ShowPageRightContainer = styled.div`
     return isMobile ? `calc(100% - ${theme.spacing(6)})` : 'auto';
   }};
 `;
+
+export type ShowPageRightContainerProps = {
+  children: ReactElement;
+};
+
+export function ShowPageRightContainer({
+  children,
+}: ShowPageRightContainerProps) {
+  return (
+    <StyledShowPageRightContainer>{children} </StyledShowPageRightContainer>
+  );
+}