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 React from "react";
import { ThemeProvider } from "styled-components";
import { useRouter } from "next/router";
import React, { useMemo } from "react";
import { DefaultTheme, 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";
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) {
const router = useRouter();
const pageTheme = useMemo(() => {
return router.pathname === "/" ? homePageTheme : defaultPageTheme;
}, [router.pathname]);
return (
<ThemeProvider theme={defaultTheme}>
<ThemeProvider theme={pageTheme}>
<React.Fragment>
<GlobalStyle />
<ErrorBoundary>

127
pages/index.tsx
View File

@ -2,7 +2,7 @@
import Image from "next/image";
// Styles
import styled, { Theme, ThemeProvider } from "styled-components";
import styled from "styled-components";
import color from "../styles/color";
// Components
@ -19,13 +19,6 @@ import { SELECTED_WALLET_KEY } from "../constants/wallet";
import { replaceToInstallPage } from "../utils/url";
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() {
const [isModalOpen, setModalOpen] = useState(false);
@ -49,71 +42,67 @@ export default function Home() {
}, []);
return (
<ThemeProvider theme={theme}>
<PageBackground>
<Container>
<Logo />
<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&nbsp;
<InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
</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&nbsp;
<InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
</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>
</PageBackground>
</ThemeProvider>
<ConnectWalletModal
isModalOpen={isModalOpen}
onCloseModal={() => setModalOpen(false)}
/>
</Container>
);
}

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 color from "./color";
export const GlobalStyle = createGlobalStyle`
html, body {
@ -7,6 +8,19 @@ export const GlobalStyle = createGlobalStyle`
font-family: 'Inter', sans-serif;
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";
declare module "styled-components" {
export interface Theme {
export interface DefaultTheme {
bgColor: 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)",
};