Basin UI - Hover behavior

BeanstalkFarms · Aug 23, 2023 · a28aa1a · a28aa1a
1 parent fb322e9
commit a28aa1a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
@@ -50,6 +50,9 @@ const Box = styled.a`
   text-decoration: none;
   color: black;
   gap: 16px;
+  :hover {
+    background-color: #f0fdf4;
+  }
   :first-child {
     border-left: none;
   }
@@ -60,6 +63,9 @@ const SmallBox = styled.a`
   width: 64px;
   border-left: 1px solid black;
   justify-content: center;
+  :hover {
+    background-color: #f0fdf4;
+  }
 `;
 
 const StyledLink = styled.span`

diff --git a/projects/dex-ui/src/pages/Home.tsx b/projects/dex-ui/src/pages/Home.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { size } from "src/breakpoints";
 import { Link } from "react-router-dom";
-import { RightArrow, RightArrowCircle } from "src/components/Icons";
+import { RightArrowCircle } from "src/components/Icons";
 import styled from "styled-components";
 
 export const Home = () => {
@@ -24,8 +24,7 @@ export const Home = () => {
           <SubTitle>
             Customizable liquidity pools with shared components. &nbsp;
             <WhitepaperLink href={"/basin.pdf"} target="_blank">
-              Read the whitepaper
-              <RightArrow color="#46B955" />
+              Read the whitepaper →
             </WhitepaperLink>
           </SubTitle>
         </TitleSubtitleContainer>
@@ -144,6 +143,9 @@ const OracleWP = styled.a`
   text-decoration: none;
   display: flex;
   align-items: center;
+  :hover {
+    text-decoration: underline;
+  }
 `;
 
 const WhitepaperLink = styled.a`
@@ -156,6 +158,10 @@ const WhitepaperLink = styled.a`
   display: flex;
   align-items: center;
 
+  :hover {
+    text-decoration: underline;
+  }
+
   @media (min-width: ${size.mobile}) {
     font-size: 20px;
     line-height: 24px;
@@ -198,6 +204,10 @@ const Box = styled(Link)`
   text-decoration: none;
   color: black;
 
+  :hover {
+    background-color: #f0fdf4;
+  }
+
   @media (min-width: ${size.mobile}) {
     padding: 0px;
     font-size: 24px;