admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add font sizes to themes

Browse Source
This commit is contained in:
Charles Bochet
2023-04-14 11:06:20 +02:00
parent 0445c03b51
commit d08066fb9d
9 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/layout/navbar/NavItem.tsx
View File

@ -17,12 +17,12 @@ type StyledItemProps = {
const StyledItem = styled.button<StyledItemProps>`
display: flex;
border: none;
font-size: 12px;
font-size: ${(props) => props.theme.fontSizeMedium};
cursor: pointer;
background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
padding-top: ${(props) => props.theme.spacing(1)};
padding-bottom: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)};
font-family: 'Inter';
color: ${(props) =>
props.active ? props.theme.text100 : props.theme.text60};
@ -35,7 +35,7 @@ const StyledItem = styled.button<StyledItemProps>`
const StyledItemLabel = styled.div`
display: flex;
margin-left: 8px;
margin-left: ${(props) => props.theme.spacing(2)};
`;
function NavItem({ label, icon, to, active }: OwnProps) {

8
front/src/layout/navbar/NavTitle.tsx
View File

@ -8,11 +8,11 @@ const StyledTitle = styled.div`
display: flex;
text-transform: uppercase;
color: ${(props) => props.theme.text30};
font-size: 12px;
font-size: ${(props) => props.theme.fontSizeMedium};
font-weight: 600;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
padding-top: ${(props) => props.theme.spacing(1)};
padding-bottom: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)};
`;
function NavTitle({ label }: OwnProps) {

2
front/src/layout/navbar/Navbar.tsx
View File

@ -13,7 +13,7 @@ const NavbarContainer = styled.div`
flex-direction: column;
background: ${(props) => props.theme.noisyBackground};
min-width: 220px;
padding: 8px;
padding: ${(props) => props.theme.spacing(2)};
`;
const NavItemsContainer = styled.div`

10
front/src/layout/navbar/WorkspaceContainer.tsx
View File

@ -14,9 +14,9 @@ const StyledContainer = styled.button`
border: 0;
background: inherit;
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 4px;
padding: 8px;
margin-left: 4px;
border-radius: ${(props) => props.theme.spacing(1)};
padding: ${(props) => props.theme.spacing(2)};
margin-left: ${(props) => props.theme.spacing(1)};
`;
type StyledLogoProps = {
@ -32,10 +32,10 @@ const StyledLogo = styled.div<StyledLogoProps>`
`;
const StyledName = styled.div`
margin-left: 4px;
margin-left: ${(props) => props.theme.spacing(1)};
font-family: 'Inter';
font-weight: 500;
font-size: 14px;
font-size: ${(props) => props.theme.fontSizeLarge};
font-color: ${(props) => props.theme.text0};
`;