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

Update theme on global styles

Browse Source
This commit is contained in:
delivan 2022-12-16 18:14:47 +09:00
parent 3fc581aad9
commit 41c4ed39ec
6 changed files with 93 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages/_app.tsx
View File

@ -1,15 +1,31 @@
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import React from "react"; import { useRouter } from "next/router";
import { ThemeProvider } from "styled-components"; import React, { useMemo } from "react";
import { DefaultTheme, ThemeProvider } from "styled-components";
import ErrorBoundary from "../components/error-boundary"; import ErrorBoundary from "../components/error-boundary";
import { PageBackground } from "../styles/background"; import { PageBackground } from "../styles/background";
import { GlobalStyle } from "../styles/global"; import { GlobalStyle } from "../styles/global";
import { defaultTheme } from "../styles/theme";
const homePageTheme: DefaultTheme = {
bgColor: "rgba(18, 18, 18, 1)",
bgGridColor: "rgba(51, 51, 51, 1)",
};
const defaultPageTheme: DefaultTheme = {
bgColor: "rgba(18, 18, 18, 0.8)",
bgGridColor: "rgba(51, 51, 51, 0.3)",
};
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
const router = useRouter();
const pageTheme = useMemo(() => {
return router.pathname === "/" ? homePageTheme : defaultPageTheme;
}, [router.pathname]);
return ( return (
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={pageTheme}>
<React.Fragment> <React.Fragment>
<GlobalStyle /> <GlobalStyle />
<ErrorBoundary> <ErrorBoundary>

127
pages/index.tsx
View File

@ -2,7 +2,7 @@
import Image from "next/image"; import Image from "next/image";
// Styles // Styles
import styled, { Theme, ThemeProvider } from "styled-components"; import styled from "styled-components";
import color from "../styles/color"; import color from "../styles/color";
// Components // Components
@ -19,13 +19,6 @@ import { SELECTED_WALLET_KEY } from "../constants/wallet";
import { replaceToInstallPage } from "../utils/url"; import { replaceToInstallPage } from "../utils/url";
import { REFERRAL_KEY } from "../constants/icns"; import { REFERRAL_KEY } from "../constants/icns";
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);
@ -49,71 +42,67 @@ export default function Home() {
}, []); }, []);
return ( return (
<ThemeProvider theme={theme}> <Container>
<PageBackground> <Logo />
<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>{" "} You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
user. if not, you can install&nbsp; if not, you can install&nbsp;
<InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk> <InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
</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
View File

@ -1,16 +0,0 @@
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);
}
`;

14
styles/global.ts
View File

@ -1,4 +1,5 @@
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 {
@ -7,6 +8,19 @@ export const GlobalStyle = createGlobalStyle`
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 16px; font-size: 16px;
background-color: ${({ theme }) => theme.bgColor ?? color.black};
background-size: 5rem 5rem;
background-position: top left;
background-repeat: repeat;
background-image: linear-gradient(
${({ theme }) => theme.bgGridColor ?? color.grey[600]} 0.1rem,
transparent 0.1rem
),
linear-gradient(90deg, ${({ theme }) =>
theme.bgGridColor ?? color.grey[600]} 0.1rem, transparent 0.1rem);
}
} }
* { * {

2
styles/styled.d.ts vendored
View File

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

6
styles/theme.ts
View File

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