Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style adjustments in 'Financial page' - Links in header menú hidden #84

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/Head/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
</Box>

<Box direction="row" align="center" gap="15px">
<Box
{/* <Box
className={cn(
styles.itemToken,
!isInfo &&
Expand All @@ -106,7 +106,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
onClick={goToBridge}
>
<Text>Bridge</Text>
</Box>
</Box> */}

{/*<Box*/}
{/* className={cn(styles.itemToken, isSwap ? styles.selected : '')}*/}
Expand All @@ -117,7 +117,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
{/* <Text>Swap</Text>*/}
{/*</Box>*/}

<Box
{/* <Box
className={cn(styles.itemToken, isTokens ? styles.selected : '')}
onClick={() => {
routing.push(`/tokens`);
Expand All @@ -136,7 +136,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
}}
>
<Text>Transactions</Text>
</Box>
</Box> */}
{/*
<Box
className={cn(styles.itemToken, isInfo ? styles.selected : '')}
Expand All @@ -145,7 +145,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
<Text>Info</Text>
</Box> */}

<Box
{/* <Box
className={cn(styles.itemToken, isEarn ? styles.selected : '')}
onClick={() => routing.push('/earn')}
>
Expand All @@ -157,7 +157,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
onClick={() => routing.push('/faq')}
>
<Text>FAQ</Text>
</Box>
</Box> */}

{/*<Box*/}
{/* direction="column"*/}
Expand Down
39 changes: 17 additions & 22 deletions src/pages/Finance/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,48 @@ import { Icon } from 'components/Base/components/Icons';


export const FinancePage = () => {
const [expandedIdxs, setExpandedIdxs] = useState([]);

const addExpanded = idx => setExpandedIdxs(expandedIdxs.concat([idx]));
const removeExpanded = idx => setExpandedIdxs(expandedIdxs.filter(item => item !== idx));

return (
<BaseContainer>
<PageContainer>
<h1 className={styles.pageName}>Defi Products</h1>
<section className={styles.defiProducts}>
<div className={styles.defiProduct}>
<a id={styles.disabled} className={styles.defiProduct}>
<div className={styles.defiImage}>
<img className="img-fluid" src={`${process.env.PUBLIC_URL}/defi01.svg`} alt="logo"/>
<img className={styles.imgFluid} src={`${process.env.PUBLIC_URL}/defi01.svg`} alt="logo"/>
</div>
<h2 className={styles.defiTitle}>SCRT</h2>
<p className={styles.defiDescription}>Navigate different use-cases for SCRT in Secret Network</p>
</div>
<div className={styles.defiProduct}>
</a>
<a href="/eth" className={styles.defiProduct}>
<div className={styles.defiImage}>
<img className="img-fluid" src={`${process.env.PUBLIC_URL}/defi02.svg`} alt="logo"/>
<img className={styles.imgFluid} src={`${process.env.PUBLIC_URL}/defi02.svg`} alt="logo"/>
</div>
<h2 className={styles.defiTitle}>Bridge</h2>
<p className={styles.defiDescription}>Turn your Ethereum assets to Private Tokens on the Secret Network</p>
<a href="/eth"><img className={styles.imgArrowLink} src={`${process.env.PUBLIC_URL}/arrow-go.svg`} alt="defi-product"/></a>
</div>
<div className={styles.defiProduct}>
{/* <img className={styles.imgArrowLink} src={`${process.env.PUBLIC_URL}/arrow-go.svg`} alt="defi-product"/> */}
</a>
<a id={styles.disabled} className={styles.defiProduct}>
<div className={styles.defiImage}>
<img className="img-fluid" src={`${process.env.PUBLIC_URL}/defi03.svg`} alt="defi-product"/>
<img className={styles.imgFluid} src={`${process.env.PUBLIC_URL}/defi03.svg`} alt="defi-product"/>
</div>
<h2 className={styles.defiTitle}>SecretSwap</h2>
<p className={styles.defiDescription}>Front-running resistant AMM for secretTokens</p>
</div>
<div className={styles.defiProduct}>
</a>
<a target="blank" href="https://auctions.scrt.network/" className={styles.defiProduct}>
<div className={styles.defiImage}>
<img className="img-fluid" src={`${process.env.PUBLIC_URL}/defi04.svg`} alt="defi-product"/>
<img className={styles.imgFluid} src={`${process.env.PUBLIC_URL}/defi04.svg`} alt="defi-product"/>
</div>
<h2 className={styles.defiTitle}>Auction</h2>
<p className={styles.defiDescription}>Sealed bid auctions for large quantity Over-The-Counter book trading for secretTokens</p>
<a target="blank" href="https://auctions.scrt.network/"><img className={styles.imgArrowLink} src={`${process.env.PUBLIC_URL}/arrow-go.svg`} alt="defi-product"/></a>
</div>
<div className={styles.defiProduct}>
{/* <a target="blank" href="https://auctions.scrt.network/"><img className={styles.imgArrowLink} src={`${process.env.PUBLIC_URL}/arrow-go.svg`} alt="defi-product"/></a> */}
</a>
<a href="/earn" className={styles.defiProduct}>
<div className={styles.defiImage}>
<img className="img-fluid" src={`${process.env.PUBLIC_URL}/defi05.svg`} alt="logo"/>
<img className={styles.imgFluid} src={`${process.env.PUBLIC_URL}/defi05.svg`} alt="logo"/>
</div>
<h2 className={styles.defiTitle}>Earn</h2>
<p className={styles.defiDescription}>Explore yield opportunities in Secret Network</p>
</div>
</a>
</section>
</PageContainer>
</BaseContainer>
Expand Down
16 changes: 16 additions & 0 deletions src/pages/Finance/styles.styl
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,17 @@
@media screen and (max-width: 800px) {
gap: 16px;
}
#disabled {
opacity: 0.5;
cursor: arrow;
box-shadow: none;
&:hover {
background: #ffffff;
}
}
.defiProduct {
/* Auto Layout */
height: 586px;
position: relative;
display: flex;
flex-direction: column;
Expand All @@ -27,14 +36,21 @@
flex-grow: 1;
margin: 0px 16px;
transition: ease 2s;
justify-content: center;
@media screen and (max-width: 800px) {
flex: 1 1 100%;
height: auto;
}
&:hover {
background: #E1FEF2;
}
.defiTitle {
color: #30303D;
font-size: 2rem;
}
.imgFluid {
width: 120px;
height: 120px;
}
.defiDescription {
color: #748695;
Expand Down