Add styled component rule (#1261)

* 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

View File

@ -10,14 +10,14 @@ import { RightDrawerPages } from '../types/RightDrawerPages';
import { RightDrawerTopBar } from './RightDrawerTopBar';
const RightDrawerPage = styled.div`
const StyledRightDrawerPage = styled.div`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
`;
const RightDrawerBody = styled.div`
const StyledRightDrawerBody = styled.div`
display: flex;
flex-direction: column;
height: calc(
@ -47,9 +47,9 @@ export function RightDrawerRouter() {
}
return (
<RightDrawerPage>
<StyledRightDrawerPage>
<RightDrawerTopBar />
<RightDrawerBody>{page}</RightDrawerBody>
</RightDrawerPage>
<StyledRightDrawerBody>{page}</StyledRightDrawerBody>
</StyledRightDrawerPage>
);
}

View File

@ -24,7 +24,7 @@ const StyledRightDrawerTopBar = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const TopBarWrapper = styled.div`
const StyledTopBarWrapper = styled.div`
display: flex;
`;
@ -34,10 +34,10 @@ export function RightDrawerTopBar() {
return (
<StyledRightDrawerTopBar>
<TopBarWrapper>
<StyledTopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</TopBarWrapper>
</StyledTopBarWrapper>
<ActivityActionBar activityId={activityId ?? ''} />
</StyledRightDrawerTopBar>
);