Apply new theme (#449)

* Apply new theme

* Fix storybook

* Fixes

* Fix regressions

front/src/pages/auth/Index.tsx

@@ -65,7 +65,7 @@ export function Index() {
         <Title>Welcome to Twenty</Title>
         <StyledContentContainer>
           <PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
-            <IconBrandGoogle size={theme.iconSizeSmall} stroke={4} />
+            <IconBrandGoogle size={theme.icon.size.sm} stroke={4} />
             Continue With Google
           </PrimaryButton>
           <HorizontalSeparator />

front/src/pages/auth/PasswordLogin.tsx

@@ -31,7 +31,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 const StyledErrorContainer = styled.div`
-  color: ${({ theme }) => theme.red};
+  color: ${({ theme }) => theme.color.red};
 `;
 
 export function PasswordLogin() {

front/src/pages/companies/Companies.tsx

@@ -80,7 +80,7 @@ export function Companies() {
   return (
     <WithTopBarContainer
       title="Companies"
-      icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
+      icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
       onAddButtonClick={handleAddButtonClick}
     >
       <>

front/src/pages/companies/companies-filters.tsx

@@ -8,18 +8,13 @@ import {
   IconUser,
   IconUsers,
 } from '@/ui/icons/index';
-import { commonText } from '@/ui/layout/styles/texts';
+import { icon } from '@/ui/themes/icon';
 import { QueryMode, User } from '~/generated/graphql';
 
 export const nameFilter = {
   key: 'name',
   label: 'Name',
-  icon: (
-    <IconBuildingSkyscraper
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'text',
   operands: [
     {
@@ -49,12 +44,7 @@ export const nameFilter = {
 export const employeesFilter = {
   key: 'employees',
   label: 'Employees',
-  icon: (
-    <IconUsers
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconUsers size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'text',
   operands: [
     {
@@ -81,12 +71,7 @@ export const employeesFilter = {
 export const urlFilter = {
   key: 'domainName',
   label: 'Url',
-  icon: (
-    <IconLink
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconLink size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'text',
   operands: [
     {
@@ -119,12 +104,7 @@ export const urlFilter = {
 export const addressFilter = {
   key: 'address',
   label: 'Address',
-  icon: (
-    <IconMap
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconMap size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'text',
   operands: [
     {
@@ -154,12 +134,7 @@ export const addressFilter = {
 export const ccreatedAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: (
-    <IconCalendarEvent
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'date',
   operands: [
     {
@@ -186,12 +161,7 @@ export const ccreatedAtFilter = {
 export const accountOwnerFilter = {
   key: 'accountOwner',
   label: 'Account Owner',
-  icon: (
-    <IconUser
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_USER_QUERY,

front/src/pages/opportunities/Opportunities.tsx

@@ -46,7 +46,7 @@ export function Opportunities() {
   return (
     <WithTopBarContainer
       title="Opportunities"
-      icon={<IconTargetArrow size={theme.iconSizeMedium} />}
+      icon={<IconTargetArrow size={theme.icon.size.md} />}
     >
       {items && pipelineId ? (
         <Board

front/src/pages/people/People.tsx

@@ -79,7 +79,7 @@ export function People() {
   return (
     <WithTopBarContainer
       title="People"
-      icon={<IconUser size={theme.iconSizeMedium} />}
+      icon={<IconUser size={theme.icon.size.md} />}
       onAddButtonClick={handleAddButtonClick}
     >
       <>
@@ -88,7 +88,7 @@ export function People() {
             data={people}
             columns={peopleColumns}
             viewName="All People"
-            viewIcon={<IconList size={theme.iconSizeMedium} />}
+            viewIcon={<IconList size={theme.icon.size.md} />}
             availableSorts={availableSorts}
             availableFilters={availableFilters}
             onSortsUpdate={updateSorts}

front/src/pages/people/people-filters.tsx

@@ -8,18 +8,13 @@ import {
   IconPhone,
   IconUser,
 } from '@/ui/icons/index';
-import { commonText } from '@/ui/layout/styles/texts';
+import { icon } from '@/ui/themes/icon';
 import { Company, QueryMode } from '~/generated/graphql';
 
 export const fullnameFilter = {
   key: 'fullname',
   label: 'People',
-  icon: (
-    <IconUser
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconUser size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'text',
   operands: [
     {
@@ -72,12 +67,7 @@ export const fullnameFilter = {
 export const emailFilter = {
   key: 'email',
   label: 'Email',
-  icon: (
-    <IconMail
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconMail size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'text',
   operands: [
     {
@@ -107,12 +97,7 @@ export const emailFilter = {
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: (
-    <IconBuildingSkyscraper
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -156,12 +141,7 @@ export const companyFilter = {
 export const phoneFilter = {
   key: 'phone',
   label: 'Phone',
-  icon: (
-    <IconPhone
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconPhone size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'text',
   operands: [
     {
@@ -191,12 +171,7 @@ export const phoneFilter = {
 export const createdAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: (
-    <IconCalendarEvent
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'date',
   operands: [
     {
@@ -223,12 +198,7 @@ export const createdAtFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: (
-    <IconMap
-      size={commonText.iconSizeMedium}
-      stroke={commonText.iconStrikeLight}
-    />
-  ),
+  icon: <IconMap size={icon.size.md} stroke={icon.stroke.md} />,
   type: 'text',
   operands: [
     {

front/src/pages/settings/SettingsProfile.tsx

@@ -10,7 +10,7 @@ import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: ${(props) => props.theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(8)};
   width: 490px;
 `;
 export function SettingsProfile() {