styled modal for lead data preview

synapsenet-arena · Mar 13, 2024 · 0070ec0 · 0070ec0
1 parent ef826c8
commit 0070ec0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 50 deletions.
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
@@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    blue: RGBA(COLOR.blue, 0.06),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

diff --git a/packages/twenty-front/src/pages/campaigns/Lead.tsx b/packages/twenty-front/src/pages/campaigns/Lead.tsx
@@ -42,36 +42,6 @@ const StyledCard = styled.div`
   overflow: scroll;
 `;
 
-const StyledTable = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  height: 10px;
-  &:nth-of-type(odd) {
-    background-color: ${({ theme }) => theme.background.primary};
-  }
-`;
-
-const StyledTableRow = styled.tr`
-  &:nth-of-type(odd) {
-    background-color: ${({ theme }) => theme.background.primary};
-  }
-  
-`;
-
-const StyledTableCell = styled.td`
-  padding: 5px;
-  // border: 1px solid ${({ theme }) => theme.border.color.medium};
-  font-size: ${({ theme }) => theme.font.size.sm};
-`;
-
-const StyledBoardContainer = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  justify-self: center;
-`;
-
 const StyledInputCard = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.secondary};
@@ -127,7 +97,7 @@ const TextContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(5)};
   padding-top: ${({ theme }) => theme.spacing(2)};
 `;
-const StyledFilter = styled(Section)`
+const StyledFilter = styled(Section)`secondary
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 const StyledComboInputContainer = styled.div`
@@ -500,9 +470,7 @@ export const Lead = () => {
       </StyledCard>
 
       <ModalWrapper isOpen={modalOpen} onClose={handleCloseModal}>
-        <StyledBoardContainer>
-          {!loading && data && <PreviewLeadsData data={data} />}
-        </StyledBoardContainer>
+        {!loading && data && <PreviewLeadsData data={data} />}
       </ModalWrapper>
     </>
   );

diff --git a/packages/twenty-front/src/pages/campaigns/PreviewLeadsData.tsx b/packages/twenty-front/src/pages/campaigns/PreviewLeadsData.tsx
@@ -1,43 +1,53 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 const StyledTable = styled.table`
-  width: 50%;
+  width: 100%;
   border-collapse: collapse;
   height: 10px;
 `;
 
 const StyledTableRow = styled.tr`
-  background-color: ${({ theme }) => theme.background.danger};
+  &:nth-of-type(odd) {
+    background-color: ${({ theme }) => theme.background.primary};
+  }
+  &:nth-of-type(even) {
+    background-color: ${({ theme }) => theme.background.transparent.blue};
+  }
 `;
 
 const StyledTableCell = styled.td`
   padding: 5px;
   // border: 1px solid ${({ theme }) => theme.border.color.medium};
-  font-size: ${({ theme }) => theme.font.size.sm};
+  font-size: ${({ theme }) => theme.font.size.md};
+  height: 25px;
 `;
 
+const StyledTableHeaderCell = styled.td`
+  padding: 5px;
+  // border: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.md};
+  height: 25px;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
 export const PreviewLeadsData = ({ data }) => {
-  const navigate = useNavigate();
-
   return (
     <StyledTable>
       <tbody>
         <StyledTableRow>
-          <StyledTableCell>Name</StyledTableCell>
-          <StyledTableCell>Email</StyledTableCell>
-          <StyledTableCell>Age</StyledTableCell>
-          <StyledTableCell>Location</StyledTableCell>
-          <StyledTableCell>Campaign Name</StyledTableCell>
-          <StyledTableCell>Advertisement Source</StyledTableCell>
-          <StyledTableCell>Phone Number</StyledTableCell>
-          <StyledTableCell>Comments</StyledTableCell>
-          <StyledTableCell>Advertisement Name</StyledTableCell>
+          <StyledTableHeaderCell>Name</StyledTableHeaderCell>
+          {/* <StyledTableHeaderCell>Email</StyledTableHeaderCell> */}
+          <StyledTableHeaderCell>Age</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Location</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Campaign Name</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Advertisement Source</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Phone Number</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Comments</StyledTableHeaderCell>
+          <StyledTableHeaderCell>Advertisement Name</StyledTableHeaderCell>
         </StyledTableRow>
         {data?.leads?.edges.map((leads: any) => (
           <StyledTableRow key={leads.node.id}>
             <StyledTableCell>{leads.node?.name}</StyledTableCell>
-            <StyledTableCell>{leads.node?.email}</StyledTableCell>
+            {/* <StyledTableCell>{leads.node?.email}</StyledTableCell> */}
             <StyledTableCell>{leads.node.age}</StyledTableCell>
 
             <StyledTableCell>{leads.node.location}</StyledTableCell>