From b429a7482b273f71d8d9e710380dbf22b73bf9ea Mon Sep 17 00:00:00 2001
From: Walter Hurtado <walter.hurtado@lkmx.io>
Date: Tue, 16 Feb 2021 17:29:56 -0800
Subject: [PATCH] =?UTF-8?q?-=20Style=20adjustments=20in=20'Financial=20pag?=
 =?UTF-8?q?e'=20-=20Links=20in=20header=20men=C3=BA=20hidden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Head/index.tsx | 12 +++++------
 src/pages/Finance/index.tsx   | 39 +++++++++++++++--------------------
 src/pages/Finance/styles.styl | 16 ++++++++++++++
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
index 85867f64..cd472a47 100644
--- a/src/components/Head/index.tsx
+++ b/src/components/Head/index.tsx
@@ -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 &&
@@ -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 : '')}*/}
@@ -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`);
@@ -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 : '')}
@@ -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')}
             >
@@ -157,7 +157,7 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
               onClick={() => routing.push('/faq')}
             >
               <Text>FAQ</Text>
-            </Box>
+            </Box> */}
 
             {/*<Box*/}
             {/*  direction="column"*/}
diff --git a/src/pages/Finance/index.tsx b/src/pages/Finance/index.tsx
index 6cef553e..be83da15 100644
--- a/src/pages/Finance/index.tsx
+++ b/src/pages/Finance/index.tsx
@@ -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>
diff --git a/src/pages/Finance/styles.styl b/src/pages/Finance/styles.styl
index 78418bf1..e1210601 100644
--- a/src/pages/Finance/styles.styl
+++ b/src/pages/Finance/styles.styl
@@ -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;
@@ -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;