diff --git a/front/src/modules/filters-and-sorts/interfaces/filters/interface.ts b/front/src/modules/filters-and-sorts/interfaces/filters/interface.ts index c042c5dbc8..4eb715c6be 100644 --- a/front/src/modules/filters-and-sorts/interfaces/filters/interface.ts +++ b/front/src/modules/filters-and-sorts/interfaces/filters/interface.ts @@ -49,7 +49,7 @@ type FilterOperandRelationType = { }; type FilterOperandFieldType = { - label: 'Contains' | 'Does not contain' | 'Greater than' | 'Less than'; + label: 'Contains' | "Doesn't contain" | 'Greater than' | 'Less than'; id: 'like' | 'not_like' | 'greater_than' | 'less_than'; whereTemplate: (value: string) => any; }; diff --git a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx index ad3a1b920a..7f8695d4e0 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const DropdownMenuSeparator = styled.div` - background-color: ${(props) => props.theme.mediumBorder}; + background-color: ${(props) => props.theme.lightBorder}; height: 1px; width: 100%; diff --git a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx index 629596406e..bf1674bb2e 100644 --- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx @@ -102,13 +102,13 @@ const StyledDropdownItemClipped = styled.span` const StyledDropdownTopOption = styled.li` align-items: center; - border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + border-bottom: 1px solid ${(props) => props.theme.lightBorder}; color: ${(props) => props.theme.text80}; cursor: pointer; display: flex; font-weight: ${(props) => props.theme.fontWeightMedium}; justify-content: space-between; - padding: calc(${(props) => props.theme.spacing(2)} + 2px) + padding: calc(${(props) => props.theme.spacing(2)}) calc(${(props) => props.theme.spacing(2)}); &:hover { @@ -191,13 +191,17 @@ function DropdownButton({ } const StyleAngleDownContainer = styled.div` + color: ${(props) => props.theme.text40}; + display: flex; + height: 100%; + justify-content: center; margin-left: auto; `; function DropdownTopOptionAngleDown() { return ( - + ); } diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx index d410ab50b6..ee6305301b 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx @@ -114,8 +114,6 @@ export const FilterDropdownButton = ({ result.value.id === selectedEntityId } onClick={() => { - console.log({ result }); - if (resultIsEntity(result.value)) { setSelectedEntityId(result.value.id); } diff --git a/front/src/modules/ui/layout/styles/texts.ts b/front/src/modules/ui/layout/styles/texts.ts index 47348206cf..4dc8f3b746 100644 --- a/front/src/modules/ui/layout/styles/texts.ts +++ b/front/src/modules/ui/layout/styles/texts.ts @@ -14,4 +14,8 @@ export const commonText = { iconSizeMedium: 16, iconSizeSmall: 14, + + iconStrikeLight: 1.6, + iconStrikeMedium: 2, + iconStrikeBold: 2.5, }; diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index 488a31358a..bfe8724cec 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/front/src/pages/companies/companies-filters.tsx @@ -8,12 +8,18 @@ import { IconUser, IconUsers, } from '@/ui/icons/index'; +import { commonText } from '@/ui/layout/styles/texts'; import { QueryMode, User } from '~/generated/graphql'; export const nameFilter = { key: 'name', label: 'Name', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -24,7 +30,7 @@ export const nameFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -43,7 +49,12 @@ export const nameFilter = { export const employeesFilter = { key: 'employees', label: 'Employees', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -70,7 +81,12 @@ export const employeesFilter = { export const urlFilter = { key: 'domainName', label: 'Url', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -84,7 +100,7 @@ export const urlFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -103,7 +119,12 @@ export const urlFilter = { export const addressFilter = { key: 'address', label: 'Address', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -114,7 +135,7 @@ export const addressFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -133,7 +154,12 @@ export const addressFilter = { export const ccreatedAtFilter = { key: 'createdAt', label: 'Created At', - icon: , + icon: ( + + ), type: 'date', operands: [ { @@ -160,7 +186,12 @@ export const ccreatedAtFilter = { export const accountOwnerFilter = { key: 'accountOwner', label: 'Account Owner', - icon: , + icon: ( + + ), type: 'relation', searchConfig: { query: SEARCH_USER_QUERY, diff --git a/front/src/pages/people/people-filters.tsx b/front/src/pages/people/people-filters.tsx index aa29160920..502c0ae531 100644 --- a/front/src/pages/people/people-filters.tsx +++ b/front/src/pages/people/people-filters.tsx @@ -8,12 +8,18 @@ import { IconPhone, IconUser, } from '@/ui/icons/index'; +import { commonText } from '@/ui/layout/styles/texts'; import { Company, QueryMode } from '~/generated/graphql'; export const fullnameFilter = { key: 'fullname', label: 'People', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -37,7 +43,7 @@ export const fullnameFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -66,7 +72,12 @@ export const fullnameFilter = { export const emailFilter = { key: 'email', label: 'Email', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -77,7 +88,7 @@ export const emailFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -96,7 +107,12 @@ export const emailFilter = { export const companyFilter = { key: 'company_name', label: 'Company', - icon: , + icon: ( + + ), type: 'relation', searchConfig: { query: SEARCH_COMPANY_QUERY, @@ -140,7 +156,12 @@ export const companyFilter = { export const phoneFilter = { key: 'phone', label: 'Phone', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -151,7 +172,7 @@ export const phoneFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [ @@ -170,7 +191,12 @@ export const phoneFilter = { export const createdAtFilter = { key: 'createdAt', label: 'Created At', - icon: , + icon: ( + + ), type: 'date', operands: [ { @@ -197,7 +223,12 @@ export const createdAtFilter = { export const cityFilter = { key: 'city', label: 'City', - icon: , + icon: ( + + ), type: 'text', operands: [ { @@ -208,7 +239,7 @@ export const cityFilter = { }), }, { - label: 'Does not contain', + label: "Doesn't contain", id: 'not_like', whereTemplate: (searchString: string) => ({ NOT: [