mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Apply new theme (#449)

Browse Source 
* Apply new theme

* Fix storybook

* Fixes

* Fix regressions
This commit is contained in:
Charles Bochet
2023-06-26 19:13:04 -07:00
committed by GitHub
parent 2a42ebb70d
commit d6364a9fdd
115 changed files with 818 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
View File

@ -6,19 +6,21 @@ export const EditableCellNormalModeOuterContainer = styled.div`
display: flex;
height: 100%;
overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%;
&:hover {
-moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-moz-box-shadow: inset 0 0 0 1px
${({ theme }) => theme.font.color.extraLight};
-webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border-radius: ${(props) => props.theme.borderRadius};
-webkit-box-shadow: inset 0 0 0 1px
${({ theme }) => theme.font.color.extraLight};
background: ${({ theme }) => theme.background.transparent.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight};
}
`;

6
front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
View File

@ -3,16 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { overlayBackground } from '@/ui/themes/effects';
import { debounce } from '@/utils/debounce';
import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
import { overlayBackground } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
export const EditableCellEditModeContainer = styled.div<OwnProps>`
align-items: center;
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};

4
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div`
align-items: center;
background: ${(props) => props.theme.primaryBackground};
background: ${({ theme }) => theme.background.primary};
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
@ -14,6 +14,6 @@ export const HoverableMenuItem = styled.div`
width: 100%;
&:hover {
background: ${(props) => props.theme.lightBackgroundTransparent};
background: ${({ theme }) => theme.background.transparent.light};
}
`;

2
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell';

8
front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
View File

@ -15,7 +15,7 @@ export type EditableDateProps = {
const StyledContainer = styled.div`
align-items: center;
display: flex;
margin: 0px ${(props) => props.theme.spacing(2)};
margin: 0px ${({ theme }) => theme.spacing(2)};
`;
export type StyledCalendarContainerProps = {
@ -23,10 +23,10 @@ export type StyledCalendarContainerProps = {
};
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: ${(props) => props.theme.modalBoxShadow};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px;
position: absolute;
top: 10px;

6
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, ReactElement, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell';
@ -20,8 +20,8 @@ const StyledContainer = styled.div`
justify-content: space-between;
& > input:last-child {
border-left: 1px solid ${(props) => props.theme.primaryBorder};
padding-left: ${(props) => props.theme.spacing(2)};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
padding-left: ${({ theme }) => theme.spacing(2)};
}
`;

2
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -2,7 +2,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell';

10
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx
View File

@ -8,12 +8,12 @@ export const EditableRelationCreateButton = styled.button`
cursor: pointer;
display: flex;
font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium};
gap: ${(props) => props.theme.spacing(2)};
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(2)};
height: 31px;
padding-bottom: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)};
padding-top: ${(props) => props.theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(1)};
user-select: none;
width: 100%;
`;

2
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell';