cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

Fix styles(background, skeleton)

Browse Source
This commit is contained in:
HeesungB 2022-12-16 18:21:35 +09:00
parent 41c4ed39ec
commit b4bf1f4ee8
2 changed files with 67 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/skeleton/skeleton-chain-list.tsx
View File

@ -27,8 +27,8 @@ import {
} from "../chain-list"; } from "../chain-list";
export const SkeletonChainList: FunctionComponent = () => ( export const SkeletonChainList: FunctionComponent = () => (
<SkeletonContainer> <ContentContainer>
<ContentContainer> <SkeletonContainer>
<ProfileContainer color={color.grey["700"]}> <ProfileContainer color={color.grey["700"]}>
<SkeletonCircle width="5.5rem" height="5.5rem" /> <SkeletonCircle width="5.5rem" height="5.5rem" />
@ -48,84 +48,85 @@ export const SkeletonChainList: FunctionComponent = () => (
<SkeletonText width="20rem" height="1rem" /> <SkeletonText width="20rem" height="1rem" />
</ProfileContentContainer> </ProfileContentContainer>
</ProfileContainer> </ProfileContainer>
</SkeletonContainer>
<ChainListTitleContainer> <ChainListTitleContainer>
<SkeletonTitle /> <SkeletonTitle />
</ChainListTitleContainer> </ChainListTitleContainer>
<ChainContainer color={color.grey["700"]}> <ChainContainer color={color.grey["700"]}>
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
</ChainContainer> </ChainContainer>
<SkeletonButtonContainer> <SkeletonButtonContainer>
<ButtonContainer> <ButtonContainer>
<SkeletonButton /> <SkeletonButton />
</ButtonContainer> </ButtonContainer>
</SkeletonButtonContainer> </SkeletonButtonContainer>
</ContentContainer> </ContentContainer>
</SkeletonContainer>
); );
const SkeletonContainer = styled.div` const SkeletonContainer = styled.div`
padding: 2.4rem 0; width: 100%;
padding-top: 2.4rem;
`; `;
const SkeletonTitle = styled.div` const SkeletonTitle = styled.div`

5
pages/_app.tsx
View File

@ -3,7 +3,6 @@ import { useRouter } from "next/router";
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { DefaultTheme, ThemeProvider } from "styled-components"; import { DefaultTheme, ThemeProvider } from "styled-components";
import ErrorBoundary from "../components/error-boundary"; import ErrorBoundary from "../components/error-boundary";
import { PageBackground } from "../styles/background";
import { GlobalStyle } from "../styles/global"; import { GlobalStyle } from "../styles/global";
@ -29,9 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
<React.Fragment> <React.Fragment>
<GlobalStyle /> <GlobalStyle />
<ErrorBoundary> <ErrorBoundary>
<PageBackground> <Component {...pageProps} />
<Component {...pageProps} />
</PageBackground>
</ErrorBoundary> </ErrorBoundary>
</React.Fragment> </React.Fragment>
</ThemeProvider> </ThemeProvider>