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

Add styled component rule (#1261)

Browse Source 
* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/modules/ui/navbar/components/NavBackButton.tsx
View File

@ -9,7 +9,7 @@ type OwnProps = {
title: string;
};
const IconAndButtonContainer = styled.button`
const StyledIconAndButtonContainer = styled.button`
align-items: center;
background: inherit;
border: none;
@ -39,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
return (
<>
<StyledContainer>
<IconAndButtonContainer
<StyledIconAndButtonContainer
onClick={() => {
setIsNavbarSwitchingSize(true);
navigate('/', { replace: true });
@ -47,7 +47,7 @@ export default function NavBackButton({ title }: OwnProps) {
>
<IconChevronLeft />
<span>{title}</span>
</IconAndButtonContainer>
</StyledIconAndButtonContainer>
</StyledContainer>
</>
);

10
front/src/modules/ui/navbar/components/NavCollapseButton.tsx
View File

@ -10,7 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { navbarIconSize } from '../constants';
const CollapseButton = styled.button`
const StyledCollapseButton = styled.button`
align-items: center;
background: inherit;
border: 0;
@ -48,13 +48,13 @@ export default function NavCollapseButton({
return (
<>
{direction === 'left' ? (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarLeftCollapse size={iconSize} />
</CollapseButton>
</StyledCollapseButton>
) : (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarRightCollapse size={iconSize} />
</CollapseButton>
</StyledCollapseButton>
)}
</>
);

6
front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
View File

@ -21,7 +21,7 @@ const StyledContainer = styled.div`
user-select: none;
`;
const LogoAndNameContainer = styled.div`
const StyledLogoAndNameContainer = styled.div`
align-items: center;
display: flex;
`;
@ -56,7 +56,7 @@ function NavWorkspaceButton() {
return (
<StyledContainer>
<LogoAndNameContainer>
<StyledLogoAndNameContainer>
<StyledLogo
logo={
currentWorkspace?.logo
@ -65,7 +65,7 @@ function NavWorkspaceButton() {
}
></StyledLogo>
<StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
</LogoAndNameContainer>
</StyledLogoAndNameContainer>
<NavCollapseButton direction="left" />
</StyledContainer>
);