Design fixes (#422)

front/src/modules/filters-and-sorts/interfaces/filters/interface.ts

@@ -49,7 +49,7 @@ type FilterOperandRelationType<WhereType extends FilterWhereType> = {
 };
 
 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;
 };

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%;

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 (
     <StyleAngleDownContainer>
-      <IconChevronDown />
+      <IconChevronDown size={16} />
     </StyleAngleDownContainer>
   );
 }

front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx

@@ -114,8 +114,6 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
                   result.value.id === selectedEntityId
                 }
                 onClick={() => {
-                  console.log({ result });
-
                   if (resultIsEntity(result.value)) {
                     setSelectedEntityId(result.value.id);
                   }

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,
 };

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: <IconBuildingSkyscraper size={16} />,
+  icon: (
+    <IconBuildingSkyscraper
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconUsers size={16} />,
+  icon: (
+    <IconUsers
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   type: 'text',
   operands: [
     {
@@ -70,7 +81,12 @@ export const employeesFilter = {
 export const urlFilter = {
   key: 'domainName',
   label: 'Url',
-  icon: <IconLink size={16} />,
+  icon: (
+    <IconLink
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconMap size={16} />,
+  icon: (
+    <IconMap
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconCalendarEvent size={16} />,
+  icon: (
+    <IconCalendarEvent
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   type: 'date',
   operands: [
     {
@@ -160,7 +186,12 @@ export const ccreatedAtFilter = {
 export const accountOwnerFilter = {
   key: 'accountOwner',
   label: 'Account Owner',
-  icon: <IconUser size={16} />,
+  icon: (
+    <IconUser
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   type: 'relation',
   searchConfig: {
     query: SEARCH_USER_QUERY,

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: <IconUser size={16} />,
+  icon: (
+    <IconUser
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconMail size={16} />,
+  icon: (
+    <IconMail
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconBuildingSkyscraper size={16} />,
+  icon: (
+    <IconBuildingSkyscraper
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -140,7 +156,12 @@ export const companyFilter = {
 export const phoneFilter = {
   key: 'phone',
   label: 'Phone',
-  icon: <IconPhone size={16} />,
+  icon: (
+    <IconPhone
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: <IconCalendarEvent size={16} />,
+  icon: (
+    <IconCalendarEvent
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   type: 'date',
   operands: [
     {
@@ -197,7 +223,12 @@ export const createdAtFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: <IconMap size={16} />,
+  icon: (
+    <IconMap
+      size={commonText.iconSizeMedium}
+      stroke={commonText.iconStrikeLight}
+    />
+  ),
   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: [