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

Add ThemeProvider for page background style

Browse Source
This commit is contained in:
delivan 2022-12-16 17:32:08 +09:00
parent bb58fb54ea
commit 3d72c4d959
6 changed files with 111 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/_app.tsx
View File

@ -1,16 +1,23 @@
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import React from "react"; import React from "react";
import { 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";
import { defaultTheme } from "../styles/theme";
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
return ( return (
<React.Fragment> <ThemeProvider theme={defaultTheme}>
<GlobalStyle /> <React.Fragment>
<ErrorBoundary> <GlobalStyle />
<Component {...pageProps} /> <ErrorBoundary>
</ErrorBoundary> <PageBackground>
</React.Fragment> <Component {...pageProps} />
</PageBackground>
</ErrorBoundary>
</React.Fragment>
</ThemeProvider>
); );
} }

125
pages/index.tsx
View File

@ -2,7 +2,7 @@
import Image from "next/image"; import Image from "next/image";
// Styles // Styles
import styled from "styled-components"; import styled, { Theme, ThemeProvider } from "styled-components";
import color from "../styles/color"; import color from "../styles/color";
// Components // Components
@ -17,6 +17,13 @@ import { Logo } from "../components/logo";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SELECTED_WALLET_KEY } from "../constants/wallet"; import { SELECTED_WALLET_KEY } from "../constants/wallet";
import { PageBackground } from "../styles/background";
const theme: Theme = {
bgColor: "rgba(18, 18, 18, 1)",
bgGridColor: "rgba(51, 51, 51, 1)",
};
export default function Home() { export default function Home() {
const [isModalOpen, setModalOpen] = useState(false); const [isModalOpen, setModalOpen] = useState(false);
@ -29,66 +36,70 @@ export default function Home() {
}, []); }, []);
return ( return (
<Container> <ThemeProvider theme={theme}>
<Logo /> <PageBackground>
<Container>
<Logo />
<MainContainer> <MainContainer>
<MainTitleContainer> <MainTitleContainer>
<MainTitleImageBackground> <MainTitleImageBackground>
<MainTitleImageContainer> <MainTitleImageContainer>
<Image <Image
src={MainTitle} src={MainTitle}
fill={true} fill={true}
sizes="60rem" sizes="60rem"
alt="Main Title" alt="Main Title"
priority priority
/> />
</MainTitleImageContainer> </MainTitleImageContainer>
</MainTitleImageBackground> </MainTitleImageBackground>
<ConnectButtonContainer> <ConnectButtonContainer>
<PrimaryButton onClick={onClickConnectWalletButton}> <PrimaryButton onClick={onClickConnectWalletButton}>
Connect Wallet Connect Wallet
</PrimaryButton> </PrimaryButton>
</ConnectButtonContainer> </ConnectButtonContainer>
<SubContainer> <SubContainer>
<CheckContainer> <CheckContainer>
<CheckIconContainer> <CheckIconContainer>
<Image <Image
src={CheckIcon} src={CheckIcon}
fill={true} fill={true}
sizes="1.6rem" sizes="1.6rem"
alt="Check Icon" alt="Check Icon"
/> />
</CheckIconContainer> </CheckIconContainer>
You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user. You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText>{" "}
if not, you can install here user. if not, you can install here
</CheckContainer> </CheckContainer>
<CheckContainer> <CheckContainer>
<CheckIconContainer> <CheckIconContainer>
<Image <Image
src={CheckIcon} src={CheckIcon}
fill={true} fill={true}
sizes="1.6rem" sizes="1.6rem"
alt="Check Icon" alt="Check Icon"
/> />
</CheckIconContainer> </CheckIconContainer>
<CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this <CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this
transaction transaction
</CheckContainer> </CheckContainer>
</SubContainer> </SubContainer>
</MainTitleContainer> </MainTitleContainer>
<MainLogoContainer> <MainLogoContainer>
<Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" /> <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
</MainLogoContainer> </MainLogoContainer>
</MainContainer> </MainContainer>
<ConnectWalletModal <ConnectWalletModal
isModalOpen={isModalOpen} isModalOpen={isModalOpen}
onCloseModal={() => setModalOpen(false)} onCloseModal={() => setModalOpen(false)}
/> />
</Container> </Container>
</PageBackground>
</ThemeProvider>
); );
} }

16
styles/background.ts Normal file
View File

@ -0,0 +1,16 @@
import styled from "styled-components";
export const PageBackground = styled.div`
background-color: ${({ theme }) => theme.bgColor};
background-size: 5rem 5rem;
background-position: top left;
background-repeat: repeat;
background-image: linear-gradient(
${({ theme }) => theme.bgGridColor} 0.1rem,
transparent 0.1rem
),
linear-gradient(90deg, ${({ theme }) =>
theme.bgGridColor} 0.1rem, transparent 0.1rem);
}
`;

13
styles/global.ts
View File

@ -1,5 +1,4 @@
import { createGlobalStyle } from "styled-components"; import { createGlobalStyle } from "styled-components";
import color from "./color";
export const GlobalStyle = createGlobalStyle` export const GlobalStyle = createGlobalStyle`
html, body { html, body {
@ -8,18 +7,6 @@ export const GlobalStyle = createGlobalStyle`
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 16px; font-size: 16px;
background-color: ${color.black};
background-size: 5rem 5rem;
background-position: top left;
background-repeat: repeat;
background-image: linear-gradient(
rgba(51, 51, 51, 1) 0.1rem,
transparent 0.1rem
),
linear-gradient(90deg, rgba(51, 51, 51, 1) 0.1rem, transparent 0.1rem);
} }
* { * {

8
styles/styled.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
import "styled-components";
declare module "styled-components" {
export interface Theme {
bgColor: string;
bgGridColor: string;
}
}

6
styles/theme.ts Normal file
View File

@ -0,0 +1,6 @@
import { Theme } from "styled-components";
export const defaultTheme: Theme = {
bgColor: "rgba(18, 18, 18, 0.8)",
bgGridColor: "rgba(51, 51, 51, 0.3)",
};