Design consistency fixes

src/Theme/index.js

@@ -96,9 +96,9 @@ export const TYPE = {
 
 export const Header = styled.h1`
 	color: ${({ theme }) => theme['text1']};
-	font-size: 24px;
-	font-weight: 500;
-	margin: 0 0 -20px;
+	font-size: 30px;
+	font-weight: 700;
+	margin-right: auto;
 `
 
 const slideUp = keyframes`

src/components/ComparePage/index.tsx

@@ -16,8 +16,10 @@ import { ISettings } from '~/contexts/types'
 import ReactSelect from '../MultiSelect/ReactSelect'
 
 import { fetchWithErrorLogging } from '~/utils/async'
+import { Header } from '~/Theme'
 import { PROTOCOLS_API } from '~/constants'
 
+
 const fetch = fetchWithErrorLogging
 
 const DataWrapper = styled.div`
@@ -236,7 +238,7 @@ function ComparePage() {
 					name: 'Open Protocol'
 				}}
 			/>
-			<h2>Compare chains </h2>
+			<Header>Compare chains </Header>
 
 			<ControlsWrapper>
 				<ReactSelect

src/components/Correlations/index.tsx

@@ -1,5 +1,5 @@
 import { X as XIcon } from 'react-feather'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { IResponseCGMarketsAPI } from '~/api/types'
 import { useQueries, useQuery } from 'react-query'
@@ -54,21 +54,21 @@ export default function Correlations({ coinsData }) {
 		() =>
 			!isLoading
 				? Object.fromEntries(
-						coins.map((coin0) => {
-							const results = coins.map((coin1) => {
-								if (coin1.id === coin0.id) return null
-								const chart0 = priceChart[coin0.id]?.slice(-period)
-								const chart1 = priceChart[coin1.id]?.slice(-period)
-								const shortChartLength = chart0.length > chart1?.length ? chart1?.length : chart0?.length
-								const corr = pearsonCorrelationCoefficient(
-									chart0.slice(0, shortChartLength),
-									chart1.slice(0, shortChartLength)
-								)
-								return corr
-							})
-							return [coin0.id, results]
+					coins.map((coin0) => {
+						const results = coins.map((coin1) => {
+							if (coin1.id === coin0.id) return null
+							const chart0 = priceChart[coin0.id]?.slice(-period)
+							const chart1 = priceChart[coin1.id]?.slice(-period)
+							const shortChartLength = chart0.length > chart1?.length ? chart1?.length : chart0?.length
+							const corr = pearsonCorrelationCoefficient(
+								chart0.slice(0, shortChartLength),
+								chart1.slice(0, shortChartLength)
+							)
+							return corr
 						})
-				  )
+						return [coin0.id, results]
+					})
+				)
 				: [],
 		[isLoading, period, queryCoins]
 	)
@@ -81,7 +81,7 @@ export default function Correlations({ coinsData }) {
 					(search === ''
 						? true
 						: coin?.symbol?.toLowerCase().includes(search.toLowerCase()) ||
-						  coin?.name?.toLowerCase().includes(search.toLowerCase())) && !selectedCoins[coin.id]
+						coin?.name?.toLowerCase().includes(search.toLowerCase())) && !selectedCoins[coin.id]
 			)
 		)
 	}, [search, selectedCoins, queryCoins])
@@ -110,7 +110,7 @@ export default function Correlations({ coinsData }) {
 
 	return (
 		<>
-			<TYPE.largeHeader>Correlations Matrix</TYPE.largeHeader>
+			<Header>Correlations Matrix</Header>
 
 			<ToggleWrapper>
 				<Switch onClick={() => setPeriod(7)} active={period === 7}>

src/components/Filters/raises/index.tsx

@@ -1,19 +1,18 @@
-import { DropdownsWrapper, Header, Wrapper } from '../v2Base'
+import { DropdownsWrapper, Wrapper } from '../v2Base'
 import { useMedia } from '~/hooks'
 import { SlidingMenu } from '~/components/SlidingMenu'
 import { RaisesFilterDropdowns } from './Dropdowns'
 import { IDropdownMenusProps } from './types'
 import { RaisesSearch } from '~/components/Search'
+import { Header } from '~/Theme'
 
 export function RaisesFilters(props: IDropdownMenusProps) {
 	const isSmall = useMedia(`(max-width: 30rem)`)
 
 	return (
 		<div>
-			<Header>
-				<h1>{props.header}</h1>
-			</Header>
-			<Wrapper>
+			<Header>{props.header}</Header>
+			<Wrapper style={{ marginTop: '1rem' }}>
 				<RaisesSearch list={props.investors || []} />
 
 				<DropdownsWrapper>

src/components/Nav/Desktop/SubMenu.tsx

@@ -95,15 +95,17 @@ const Details = styled.details`
 			background: #ebebeb;
 			font-size: 0.625rem;
 			border-radius: 4px;
-			padding: 3px;
+			padding: 2px 5px;
 			color: black;
 			position: relative;
 			left: -4px;
+			font-weight: 600;
+			letter-spacing: 0.5px;
 		}
 
 		:hover {
 			background-color: ${({ theme }) =>
-				theme.mode === 'dark' ? 'rgba(246, 246, 246, 0.1)' : 'rgba(246, 246, 246, 1)'};
+		theme.mode === 'dark' ? 'rgba(246, 246, 246, 0.1)' : 'rgba(246, 246, 246, 1)'};
 		}
 	}
 

src/components/Nav/Desktop/index.tsx

@@ -129,23 +129,26 @@ const Nav = styled.nav`
 			background: #ebebeb;
 			font-size: 0.625rem;
 			border-radius: 4px;
-			padding: 3px;
+			padding: 2px 5px;
 			color: black;
 			position: relative;
 			left: -4px;
-			top: 2px;
+			font-weight: 600;
+			top: 1px;
+			letter-spacing: 0.5px;
 		}
 
 		:hover,
 		:focus-visible {
 			opacity: 1;
 			background-color: ${({ theme }) =>
-				theme.mode === 'dark' ? 'rgba(246, 246, 246, 0.1)' : 'rgba(246, 246, 246, 1)'};
+		theme.mode === 'dark' ? 'rgba(246, 246, 246, 0.1)' : 'rgba(246, 246, 246, 1)'};
 		}
 
 		&[data-linkactive='true'] {
-			background-color: #2172e5;
+			background: linear-gradient(135deg, #2172e5, hsl(215 79% 36% / 1));
 			color: white;
+			font-weight:500;
 			opacity: 1;
 		}
 	}

src/components/RecentProtocols/index.tsx

@@ -9,6 +9,7 @@ import { FiltersByChain, HideForkedProtocols, TVLRange } from '~/components/Filt
 import { useCalcStakePool2Tvl } from '~/hooks/data'
 import { getPercentChange } from '~/utils'
 import { IFormattedProtocol } from '~/api/types'
+import { Header } from '~/Theme'
 
 function getSelectedChainFilters(chainQueryParam, allChains) {
 	if (chainQueryParam) {
@@ -141,7 +142,7 @@ export function RecentProtocols({ title, name, header, protocols, chainList, for
 			<ProtocolsChainsSearch step={{ category: 'Home', name: name }} />
 
 			<TableFilters>
-				<TableHeader>{header}</TableHeader>
+				<Header>{header}</Header>
 
 				<Dropdowns>
 					<FiltersByChain chainList={chainList} selectedChains={selectedChains} pathname={pathname} />

src/components/Search/Base/Desktop.tsx

@@ -34,7 +34,7 @@ const OptionsWrapper = styled.div`
 	border-bottom-left-radius: 12px;
 	border-bottom-right-radius: 12px;
 	background-color: ${({ theme }) => (theme.mode === 'dark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(246, 246, 246, 0.6)')};
-	--step-color: ${({ theme }) => (theme.mode === 'dark' ? '#7e96ff' : '#475590')};
+	--step-color: ${({ theme }) => (theme.mode === 'dark' ? '#629ff4' : '#475590')};
 
 	& > p {
 		display: flex;

src/pages/about.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { Divider, Panel } from '~/components'
 import { RowBetween } from '~/components/Row'
@@ -22,7 +22,7 @@ function AboutPage() {
 	return (
 		<Layout title="DefiLlama - DeFi Dashboard" defaultSEO>
 			<RowBetween>
-				<TYPE.largeHeader>About</TYPE.largeHeader>
+				<Header>About</Header>
 			</RowBetween>
 			<Panel style={{ marginTop: '6px' }}>
 				<DashGrid style={{ height: 'fit-content', padding: '0 0 1rem 0' }}>

src/pages/chatgptplugin.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { Divider, Panel } from '~/components'
 import { RowBetween } from '~/components/Row'
@@ -22,7 +22,7 @@ function PluginPage() {
 	return (
 		<Layout title="DefiLlama - ChatGPT Plugin" defaultSEO>
 			<RowBetween>
-				<TYPE.largeHeader>DefiLlama ChatGPT Plugin</TYPE.largeHeader>
+				<Header>DefiLlama ChatGPT Plugin</Header>
 			</RowBetween>
 			<Panel style={{ marginTop: '6px' }}>
 				<DashGrid style={{ height: 'fit-content', padding: '0 0 1rem 0' }}>

src/pages/donations.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { Divider, Panel } from '~/components'
 import { RowBetween } from '~/components/Row'
@@ -14,7 +14,7 @@ import { withPerformanceLogging } from '~/utils/perf'
 function Section({ title, children }) {
 	return (
 		<>
-			<TYPE.largeHeader>{title}</TYPE.largeHeader>
+			<Header>{title}</Header>
 			<TYPE.main>{children}</TYPE.main>
 		</>
 	)
@@ -40,7 +40,7 @@ function PressPage({ protocols }) {
 	return (
 		<Layout title="Donations - DefiLlama" defaultSEO>
 			<RowBetween>
-				<TYPE.largeHeader>Donations</TYPE.largeHeader>
+				<Header>Donations</Header>
 			</RowBetween>
 			<Panel style={{ marginTop: '6px' }}>
 				<DashGrid style={{ height: 'fit-content', padding: '0 0 1rem 0' }}>

src/pages/expenses.tsx

@@ -6,6 +6,7 @@ import Layout from '~/layout'
 import { withPerformanceLogging } from '~/utils/perf'
 
 import { fetchWithErrorLogging } from '~/utils/async'
+import { Header } from '~/Theme'
 
 const fetch = fetchWithErrorLogging
 
@@ -43,6 +44,7 @@ export const getStaticProps = withPerformanceLogging('expenses', async () => {
 export default function Protocols(props) {
 	return (
 		<Layout title={`Protocol Expenses - DefiLlama`} defaultSEO>
+			<Header>Protocol Expenses</Header>
 			<TableWithSearch
 				data={props.expenses}
 				columns={expensesColumns}

src/pages/press.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import { Box } from 'rebass'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { Divider, Panel } from '~/components'
 import { RowBetween } from '~/components/Row'
@@ -76,7 +76,7 @@ function PressPage() {
 	return (
 		<Layout title="Press - DefiLlama" defaultSEO>
 			<RowBetween>
-				<TYPE.largeHeader>Press & Media</TYPE.largeHeader>
+				<Header>Press & Media</Header>
 			</RowBetween>
 			<Panel style={{ marginTop: '6px' }}>
 				<DashGrid style={{ height: 'fit-content', padding: '0 0 1rem 0' }}>

src/pages/top-gainers-and-losers.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import styled from 'styled-components'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { splitArrayByFalsyValues } from '~/components/Table/utils'
 import { useCalcStakePool2Tvl } from '~/hooks/data'
@@ -43,7 +43,3 @@ export default function TopGainersLosers({ protocols }) {
 		</Layout>
 	)
 }
-
-const Header = styled(TYPE.largeHeader)`
-	margin: 12px 0 -12px !important;
-`

src/pages/top-protocols.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import styled from 'styled-components'
-import { TYPE } from '~/Theme'
+import { Header, TYPE } from '~/Theme'
 import Layout from '~/layout'
 import { CustomLink } from '~/components/Link'
 import TokenLogo from '~/components/TokenLogo'
@@ -102,7 +102,7 @@ export default function Chains({ data, columns }) {
 
 	return (
 		<Layout title="TVL Rankings - DefiLlama" defaultSEO>
-			<TYPE.largeHeader style={{ marginTop: '8px' }}>Top Protocols</TYPE.largeHeader>
+			<Header style={{ marginTop: '8px' }}>Top Protocols</Header>
 			<Table instance={instance} skipVirtualization />
 		</Layout>
 	)