Fix external link styling

baofinance · Mar 17, 2022 · 99bbe13 · 99bbe13
1 parent 5fa061d
commit 99bbe13
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
@@ -24,10 +24,7 @@ const ExternalLink: FC<ExternalLinkProps> = ({
 const StyledLink = styled.a`
 	box-sizing: border-box;
 	color: ${(props) => props.theme.color.text[100]};
-	font-size: 1.25rem;
 	font-weight: ${(props) => props.theme.fontWeight.strong};
-	padding: ${(props) => props.theme.spacing[3]}px
-		${(props) => props.theme.spacing[4]}px;
 	text-align: center;
 	text-decoration: none;
 	width: 100%;

diff --git a/src/components/MobileMenu/MobileMenu.tsx b/src/components/MobileMenu/MobileMenu.tsx
@@ -33,18 +33,18 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ onDismiss, visible }) => {
 					>
 						Farms
 					</StyledLink>
-					<ExternalLink
+					<StyledExternalLink
 						href="https://snapshot.page/#/baovotes.eth"
 						target="_blank"
 					>
 						Vote
-					</ExternalLink>
-					<ExternalLink href="https://gov.bao.finance" target="_blank">
+					</StyledExternalLink>
+					<StyledExternalLink href="https://gov.bao.finance" target="_blank">
 						Forum
-					</ExternalLink>
-					<ExternalLink href="https://docs.bao.finance" target="_blank">
+					</StyledExternalLink>
+					<StyledExternalLink href="https://docs.bao.finance" target="_blank">
 						Docs
-					</ExternalLink>
+					</StyledExternalLink>
 				</StyledMobileMenu>
 			</StyledMobileMenuWrapper>
 		)
@@ -116,4 +116,22 @@ const StyledLink = styled(NavLink)`
 	}
 `
 
+const StyledExternalLink = styled.a`
+	box-sizing: border-box;
+	color: ${(props) => props.theme.color.text[100]};
+	font-size: 1.25rem;
+	font-weight: ${(props) => props.theme.fontWeight.strong};
+	padding: ${(props) => props.theme.spacing[3]}px
+		${(props) => props.theme.spacing[4]}px;
+	text-align: center;
+	text-decoration: none;
+	width: 100%;
+	&:hover {
+		color: ${(props) => props.theme.color.text[300]};
+	}
+	&.active {
+		color: ${(props) => props.theme.color.text[300]};
+	}
+`
+
 export default MobileMenu