Updated UI

package.json

@@ -70,6 +70,7 @@
     "bytes": "^3.1.2",
     "class-transformer": "^0.5.1",
     "clsx": "^1.2.1",
+    "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "danger-plugin-todos": "^1.3.1",
     "dataloader": "^2.2.2",

packages/twenty-front/src/App.tsx

@@ -53,6 +53,7 @@ import { TemplatesList } from '~/pages/Templates/TemplatesList';
 import { TextTemplate } from '~/pages/Templates/TextTemplate';
 import { VideoTemplate } from '~/pages/Templates/VideoTemplate';
 import { getPageTitleFromPath } from '~/utils/title-utils';
+import { Segment } from '~/pages/Segment/Segment';
 
 export const App = () => {
   const isSelfBillingEnabled = useIsFeatureEnabled('IS_SELF_BILLING_ENABLED');
@@ -224,6 +225,8 @@ export const App = () => {
             element={<DocumentTemplate targetableObject={targetableObject} />}
           />
           <Route path={CustomPath.TemplatesPage} element={<TemplatesList />} />
+
+          <Route path={CustomPath.SegmentPage} element={<Segment />} />
         </Routes>
       </DefaultLayout>
     </>

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -74,7 +74,8 @@ export const PageChangeEffect = () => {
       navigate(AppPath.SignUp);
     };
     if (isMatchingLocation(CustomPath.CampaignForm)) {
-      navigate(CustomPath.CampaignForm);
+      console.log('Path Location:', location.pathname);
+      navigate(location.pathname);
       return;
     } else if (
       onboardingStatus === OnboardingStatus.OngoingUserCreation &&

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -6,12 +6,12 @@ import { useRecoilState } from 'recoil';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { AppPath } from '@/types/AppPath';
-import { CustomPath } from '@/types/CustomPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 
 import { ApolloFactory } from '../services/apollo.factory';
+import { CustomPath } from '@/types/CustomPath';
 
 export const useApolloFactory = () => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
@@ -40,7 +40,7 @@ export const useApolloFactory = () => {
       onUnauthenticatedError: () => {
         // setTokenPair(null);
         if (isMatchingLocation(CustomPath.CampaignForm)) {
-          navigate(CustomPath.CampaignForm);
+          navigate(location.pathname);
         } else if (
           !isMatchingLocation(AppPath.Verify) &&
           !isMatchingLocation(AppPath.SignIn) &&
@@ -56,7 +56,6 @@ export const useApolloFactory = () => {
     });
 
     return apolloRef.current.getClient();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setTokenPair, isDebugMode]);
 
   useUpdateEffect(() => {

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

@@ -66,6 +66,7 @@ export const TextFieldInput = ({
         onTab={handleTab}
         hotkeyScope={hotkeyScope}
         onChange={handleChange}
+        disabled
       />
     </FieldTextAreaOverlay>
   );

packages/twenty-front/src/modules/types/CustomPath.ts

@@ -15,5 +15,8 @@ export enum CustomPath {
 
   DatePickerPage = '/datepicker',
 
-  CampaignForm = '/campaignform',
+  CampaignForm = '/campaign/:userid',
+
+  SegmentPage = '/segment',
+
 }

packages/twenty-front/src/modules/ui/feedback/loader/components/spinner.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledSpinnerContainer = styled.div`
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: ${({ theme }) => theme.spacing(24)};
+  height: ${({ theme }) => theme.spacing(24)};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  overflow: hidden;
+`;
+
+const StyledSpinner = styled(motion.div)`
+  background-color: ${({ theme }) => theme.font.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  height: 12px;
+  width: 12px;
+`;
+
+export const Spinner = () => (
+  <StyledSpinnerContainer>
+    <StyledSpinner
+      animate={{
+        x: [-44, 21, 44],
+        width: [8, 24, 8],
+        height: [8, 24, 8],
+      }}
+      transition={{
+        duration: 1.0,
+        times: [0, 0.15, 0.3],
+        repeat: Infinity,
+      }}
+    />
+  </StyledSpinnerContainer>
+);

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

@@ -8,7 +8,7 @@ import { Pill } from '@/ui/display/pill/components/Pill';
 export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonAccent = 'default' | 'blue' | 'danger';
+export type ButtonAccent = 'default' | 'blue' | 'danger' | 'dark';
 
 export type ButtonProps = {
   className?: string;
@@ -112,6 +112,30 @@ const StyledButton = styled.button<
                     }
                   `}
             `;
+          case 'dark':
+            return css`
+              background: ${theme.color.black};
+              border-color: ${!disabled
+                ? focus
+                  ? theme.color.black
+                  : theme.background.transparent.light
+                : 'transparent'};
+              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${theme.color.gray70}`
+                : 'none'};
+              color: ${theme.grayScale.gray0};
+              opacity: ${disabled ? 0.24 : 1};
+
+              ${disabled
+                ? ''
+                : css`
+                    &:hover,
+                    &:active {
+                      background: ${theme.color.gray50};
+                    }
+                  `}
+            `;
         }
         break;
       case 'secondary':
@@ -210,13 +234,13 @@ const StyledButton = styled.button<
   border-radius: ${({ position, theme }) => {
     switch (position) {
       case 'left':
-        return `${theme.border.radius.sm} 0px 0px ${theme.border.radius.sm}`;
+        return `${theme.border.radius.md} 0px 0px ${theme.border.radius.md}`;
       case 'right':
-        return `0px ${theme.border.radius.sm} ${theme.border.radius.sm} 0px`;
+        return `0px ${theme.border.radius.md} ${theme.border.radius.md} 0px`;
       case 'middle':
         return '0px';
       case 'standalone':
-        return theme.border.radius.sm;
+        return theme.border.radius.md;
     }
   }};
   border-style: solid;
@@ -237,7 +261,7 @@ const StyledButton = styled.button<
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   padding: ${({ theme }) => {
-    return `0 ${theme.spacing(2)}`;
+    return `0 ${theme.spacing(8)}`;
   }};
 
   transition: background 0.1s ease;

packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx

@@ -50,7 +50,7 @@ const StyledLeftContainer = styled.div`
 
 const StyledTitleContainer = styled.div`
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${({ theme }) => theme.font.size.lg};
   margin-left: ${({ theme }) => theme.spacing(1)};
   max-width: 50%;
 `;

packages/twenty-front/src/modules/ui/theme/constants/MainColors.ts

@@ -12,4 +12,5 @@ export const MAIN_COLORS = {
   orange: '#ff7222',
   yellow: '#ffd338',
   gray: GRAY_SCALE.gray30,
+  black: '#000000'
 };