LaconicNetwork/icns-frontend
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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 React from "react";
import { ThemeProvider } from "styled-components";
import ErrorBoundary from "../components/error-boundary";
import { PageBackground } from "../styles/background";
import { GlobalStyle } from "../styles/global";
import { defaultTheme } from "../styles/theme";
export default function App({ Component, pageProps }: AppProps) {
return (
<React.Fragment>
<GlobalStyle />
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
</React.Fragment>
<ThemeProvider theme={defaultTheme}>
<React.Fragment>
<GlobalStyle />
<ErrorBoundary>
<PageBackground>
<Component {...pageProps} />
</PageBackground>
</ErrorBoundary>
</React.Fragment>
</ThemeProvider>
);
}

125
pages/index.tsx
View File

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