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

38
front/src/modules/opportunities/components/CompanyBoardCard.tsx
View File

@ -7,46 +7,46 @@ import { IconCalendarEvent, IconUser, IconUsers } from '../../ui/icons';
import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils';
const StyledBoardCard = styled.div`
background: ${({ theme }) => theme.secondaryBackground};
border: 1px solid ${({ theme }) => theme.mediumBorder};
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px;
box-shadow: ${({ theme }) => theme.lightBoxShadow};
color: ${({ theme }) => theme.text80};
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
`;
const StyledBoardCardWrapper = styled.div`
padding-bottom: ${(props) => props.theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(2)};
`;
const StyledBoardCardHeader = styled.div`
align-items: center;
display: flex;
flex-direction: row;
font-weight: ${(props) => props.theme.fontWeightBold};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: 24px;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
img {
height: ${(props) => props.theme.iconSizeMedium}px;
margin-right: ${(props) => props.theme.spacing(2)};
height: ${({ theme }) => theme.icon.size.md}px;
margin-right: ${({ theme }) => theme.spacing(2)};
object-fit: cover;
width: ${(props) => props.theme.iconSizeMedium}px;
width: ${({ theme }) => theme.icon.size.md}px;
}
`;
const StyledBoardCardBody = styled.div`
display: flex;
flex-direction: column;
gap: ${(props) => props.theme.spacing(2)};
padding: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
span {
align-items: center;
display: flex;
flex-direction: row;
svg {
color: ${(props) => props.theme.text40};
margin-right: ${(props) => props.theme.spacing(2)};
color: ${({ theme }) => theme.font.color.tertiary};
margin-right: ${({ theme }) => theme.spacing(2)};
}
}
`;
@ -70,14 +70,14 @@ export function CompanyBoardCard({ company }: { company: CompanyProp }) {
</StyledBoardCardHeader>
<StyledBoardCardBody>
<span>
<IconUser size={theme.iconSizeMedium} />
<IconUser size={theme.icon.size.md} />
<PersonChip name={company.accountOwner?.displayName || ''} />
</span>
<span>
<IconUsers size={theme.iconSizeMedium} /> {company.employees}
<IconUsers size={theme.icon.size.md} /> {company.employees}
</span>
<span>
<IconCalendarEvent size={theme.iconSizeMedium} />
<IconCalendarEvent size={theme.icon.size.md} />
{humanReadableDate(new Date(company.createdAt as string))}
</span>
</StyledBoardCardBody>