Updated Campaigns Page

synapsenet-arena · Mar 8, 2024 · 69fa952 · 69fa952
1 parent 04030b3
commit 69fa952
Show file tree

Hide file tree

Showing 19 changed files with 614 additions and 125 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,21 +4,21 @@
   "[typescript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
+      "source.fixAll.eslint": "explicit",
       "source.addMissingImports": "always"
     }
   },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
+      "source.fixAll.eslint": "explicit",
       "source.addMissingImports": "always"
     }
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
+      "source.fixAll.eslint": "explicit",
       "source.addMissingImports": "always"
     }
   },

diff --git a/packages/twenty-front/.env~ b/packages/twenty-front/.env~
@@ -0,0 +1,7 @@
+REACT_APP_SERVER_BASE_URL=http://localhost:3000
+GENERATE_SOURCEMAP=false
+
+# ———————— Optional ————————
+# REACT_APP_SERVER_AUTH_URL=http://localhost:3000/auth
+# REACT_APP_SERVER_FILES_URL=http://localhost:3000/files
+# CHROMATIC_PROJECT_TOKEN=
diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
@@ -51,6 +51,8 @@ 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 { DefaultHomePage } from '~/pages/DefaultHomePage';
+import { Scrollbar } from '~/pages/campaigns/scrollbar';
 
 export const App = () => {
   const isSelfBillingEnabled = useIsFeatureEnabled('IS_SELF_BILLING_ENABLED');
@@ -220,6 +222,7 @@ export const App = () => {
             element={<DocumentTemplate targetableObject={targetableObject} />}
           />
           <Route path={CustomPath.TemplatesPage} element={<TemplatesList />} />
+
         </Routes>
       </DefaultLayout>
     </>

diff --git a/.../twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx b/.../twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { IconCalendar } from '@/ui/display/icon';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
-import { overlayBackground } from '@/ui/theme/constants/effects';
+// import { overlayBackground } from '@/ui/theme/constants/effects';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -91,7 +91,6 @@ const StyledContainer = styled.div`
   & .react-datepicker__month-dropdown,
   & .react-datepicker__year-dropdown {
     border: ${({ theme }) => theme.border.color.light};
-    ${overlayBackground}
     overflow-y: scroll;
     top: ${({ theme }) => theme.spacing(2)};
   }

diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -3,7 +3,6 @@ import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
-
 import { AuthModal } from '@/auth/components/Modal';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';

diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
 import { AnimatedCheckmark } from '@/ui/display/checkmark/components/AnimatedCheckmark';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 
 const StyledContainer = styled.div<{ isLast: boolean }>`
   align-items: center;
@@ -31,14 +31,14 @@ const StyledStepCircle = styled(motion.div)`
 `;
 
 const StyledStepIndex = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
+  color: ${({ theme }) => theme.font.color.blue};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
 const StyledStepLabel = styled.span<{ isActive: boolean }>`
   color: ${({ theme, isActive }) =>
-    isActive ? theme.font.color.primary : theme.font.color.tertiary};
+    isActive ? theme.font.color.blue : theme.font.color.blue};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(2)};
@@ -73,20 +73,20 @@ export const Step = ({
 
   const variantsCircle = {
     active: {
-      backgroundColor: theme.font.color.primary,
-      borderColor: theme.font.color.primary,
+      backgroundColor: theme.font.color.blue,
+      borderColor: theme.font.color.blue,
       transition: { duration: 0.5 },
     },
     inactive: {
       backgroundColor: theme.background.transparent.lighter,
-      borderColor: theme.border.color.medium,
+      borderColor: theme.border.color.blue,
       transition: { duration: 0.5 },
     },
   };
 
   const variantsLine = {
     active: {
-      backgroundColor: theme.font.color.primary,
+      backgroundColor: theme.font.color.blue,
       transition: { duration: 0.5 },
     },
     inactive: {

diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts
@@ -10,6 +10,7 @@ export const BORDER_LIGHT = {
     secondaryInverted: GRAY_SCALE.gray50,
     inverted: GRAY_SCALE.gray60,
     danger: COLOR.red20,
+    blue:COLOR.blue,
   },
   ...BORDER_COMMON,
 };
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts
@@ -1,6 +1,7 @@
 import { COLOR } from '@/ui/theme/constants/Colors';
 import { FONT_COMMON } from '@/ui/theme/constants/FontCommon';
 import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+import { color } from 'framer-motion';
 
 export const FONT_LIGHT = {
   color: {
@@ -11,6 +12,7 @@ export const FONT_LIGHT = {
     extraLight: GRAY_SCALE.gray30,
     inverted: GRAY_SCALE.gray0,
     danger: COLOR.red,
+    blue:COLOR.blue,
   },
   ...FONT_COMMON,
 };
diff --git a/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx b/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx
@@ -8,6 +8,7 @@ import { Button } from 'tsup.ui.index';
 
 import DateTimePicker from '@/ui/input/components/internal/date/components/DateTimePicker';
 import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 
 const StyledCard = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -30,19 +31,18 @@ const StyledInputCard = styled.div`
   flex-direction: column;
   justify-content: center;
   height: 70%;
-  justify-content: space-evenly;
+  justify-content: space-around;
   width: 70%;
   align-items: center;
 `;
 
 const StyledTitleCard = styled.div`
-  align-items: center;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
   height: 10%;
   width: 70%;
-  justify-content: center;
+  justify-content: flex-start;
 `;
 
 const StyledButton = styled.span`
@@ -58,12 +58,6 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
-const StyledTitle = styled.h3`
-  color: ${({ theme }) => theme.font.color.secondary};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  font-size: ${({ theme }) => theme.font.size.md};
-`;
-
 export const CampaignDate = () => {
   const { setCurrentStep, currentStep } = useCampaign();
 
@@ -74,9 +68,10 @@ export const CampaignDate = () => {
     <>
       <StyledCard>
         <StyledTitleCard>
-          <StyledTitle>
-            The campaign date: where strategy meets opportunity
-          </StyledTitle>
+        <H2Title
+              title="Campaign Date"
+              description="Choose your when to run your campaigns"
+        />
         </StyledTitleCard>
         <StyledInputCard>
           <Section>

diff --git a/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx b/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx
@@ -1,9 +1,11 @@
 /* eslint-disable no-restricted-imports */
 import styled from '@emotion/styled';
+import { Section } from '@react-email/components';
 import { IconArrowLeft } from '@tabler/icons-react';
 import { IconArrowRight } from '@tabler/icons-react';
 import { Button, TextArea, TextInput } from 'tsup.ui.index';
 
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
 
 const StyledCard = styled.div`
@@ -26,19 +28,19 @@ const StyledInputCard = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 50%;
-  justify-content: space-evenly;
+  height: 65%;
+  justify-content: space-between;
   width: 70%;
   align-items: center;
 `;
 
 const StyledTitleCard = styled.div`
-  align-items: center;
+  /* align-items: center; */
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
   height: 10%;
-  width: 70%;
+  width: 100%;
   justify-content: flex-start;
 `;
 
@@ -78,24 +80,32 @@ export const CampaignDetails = () => {
     <>
       <StyledCard>
         <StyledTitleCard>
-          <StyledTitle>
-            Get started on your campaign journey with our comprehensive
-            solution. Create, launch, and optimize campaigns with ease
-          </StyledTitle>
+          <StyledTitle></StyledTitle>
         </StyledTitleCard>
         <StyledInputCard>
-          <TextInput
-            label={'campaign name'}
-            // value={'campaignName'}
-            placeholder={'Enter campaign name'}
-            // eslint-disable-next-line no-restricted-globals
-            onChange={() => handleCampaignChange(event)}
-            name="campaignName"
-            required
-            fullWidth
-          />
+          <Section>
+            <H2Title
+              title="Campaign Name"
+              description="Your Campaign name will be displayed in Campaign List"
+            />
+            <TextInput
+              // value={'campaignName'}
+              placeholder={'Enter campaign name'}
+              // eslint-disable-next-line no-restricted-globals
+              onChange={() => handleCampaignChange(event)}
+              name="campaignName"
+              required
+              fullWidth
+            />
+          </Section>
+
           <StyledAreaLabel>
-            <StyledLabel>Description</StyledLabel>
+            <Section>
+              <H2Title
+                title="Campaign Description"
+                description="Describe the main objectives and goals of the campaign "
+              />
+            </Section>
             <TextArea
               value={''}
               placeholder={'Enter campaign description'}

diff --git a/packages/twenty-front/src/pages/campaigns/Campaigns.tsx b/packages/twenty-front/src/pages/campaigns/Campaigns.tsx
@@ -6,14 +6,15 @@ import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageHeader } from '@/ui/layout/page/PageHeader';
 import { StepBar } from '@/ui/navigation/step-bar/components/StepBar';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+// import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { CampaignDate } from '~/pages/campaigns/CampaignDate';
 import { CampaignDetails } from '~/pages/campaigns/CampaignDetails';
-import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
 import { Lead } from '~/pages/campaigns/Lead';
 import { MessagingChannel } from '~/pages/campaigns/MessagingChannel';
 import { PreviewPage } from '~/pages/campaigns/PreviewPage';
 import { Specialty } from '~/pages/campaigns/Specialty';
+import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 
 const StyledBoardContainer = styled.div`
   display: flex;
@@ -48,7 +49,7 @@ const StyledCard = styled.div`
 `;
 export const Campaigns = () => {
   const { currentStep } = useCampaign();
-
+  // const currentStep = 2;
   const showCampaignStep = (step: number) => {
     switch (step) {
       case 2: